Android Jetpack Compose is designed to be more efficient and performant than XML layouts. It allows you to define UI in a more declarative and composable way. Compose is also designed to work seamlessly with Kotlin. Visit the Android doc, why adopt Compose? to learn more.
How to use the sample
Run the sample to view the map. Pan and zoom to navigate the map.
How it works
Create a custom @Composable function to wrap the MapView
Use AndroidView to wrap a classic Android view in a Compose UI.
Set its Modifier to define the MapView layout parameters
Use its factory parameter to provide context and create MapView(context)
Add the MapView to the lifecycle observer
Add the composable content to the Activity using setContent { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Copyright 2023 Esri
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/package com.esri.arcgismaps.sample.displaycomposablemapview
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
classMainActivity : ComponentActivity() {
privateval viewpointAmerica = Viewpoint(39.8, -98.6, 10e7)
privateval viewpointAsia = Viewpoint(39.8, 98.6, 10e7)
overridefunonCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// authentication with an API key or named user is// required to access basemaps and other location services ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.API_KEY)
setContent {
SampleAppTheme {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
// a mutable/immutable state is computed by remember to store its value during// initial composition, and updates the composition on the state value changevar viewpoint by remember { mutableStateOf(viewpointAmerica) }
val map by remember { mutableStateOf(ArcGISMap(BasemapStyle.ArcGISNavigationNight)) }
// Composable function that wraps the MapView MapViewWithCompose(
arcGISMap = map,
viewpoint = viewpoint,
// lambda to retrieve the MapView's onSingleTapConfirmed onSingleTap = {
// swap between America and Asia viewpoints viewpoint =
if (viewpoint == viewpointAmerica) viewpointAsia else viewpointAmerica
}
)
}
}
}
}
}
