Display a map

Before starting this tutorial, you need the following:

1. An ArcGIS Location Platform or ArcGIS Online account.

2. A development and deployment environment that meets the system requirements.

3. An IDE for Android development in Kotlin.

Option 1: Develop the code

Create a new Android Studio project

Use Android Studio to create an app and configure it to reference the API.

1. Open Android Studio.

   • In the Welcome to Android Studio window, click New Project.

     Or if you already have Android Studio opened, click File > New > New Project in the menu bar.

   • In the New Project window, make sure Phone and Tablet tab is selected, and then select Empty Activity. Click Next.

   • In the next window, set the following options and then click Finish.

     • Name: Tutorial.
     • Package name: Change to com.example.app. Or change to match your organization.
     • Save location: Set to a new folder.
     • Minimum SDK: API 26 ("Oreo"; Android 8.0)
     • Build configuration language: Kotlin DSL (build.gradle.kts)

2. In the Project tool window, make sure that your current view is Android. These tutorial instructions refer to that view.

   More info

   If your view name is something other than Android (such as Project or Packages), click on the dropdown arrow and select Android from the list.

   

3. From the Android view, open Gradle Scripts > build.gradle.kts (Project: Tutorial). Replace the contents of the file with the following code.

   build.gradle.kts (Project: Tutorial)

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   // Top-level build file where you can add configuration options common to all sub-projects/modules.
   plugins {
       alias(libs.plugins.android.application) apply false
       alias(libs.plugins.kotlin.android) apply false
       alias(libs.plugins.kotlin.compose) apply false
   }

4. From the Android view, open Gradle Scripts > build.gradle.kts (Module :app). Replace the contents of the file with the entire expanded code below.

   build.gradle.kts (Module: app)

   Expand

   Use dark colors for code blocks

   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
       // ArcGIS Maps for Kotlin - SDK dependency
       implementation(libs.arcgis.maps.kotlin)
       // Toolkit dependencies
       implementation(platform(libs.arcgis.maps.kotlin.toolkit.bom))
       implementation(libs.arcgis.maps.kotlin.toolkit.geoview.compose)
       implementation(libs.arcgis.maps.kotlin.toolkit.authentication)
   

   Expand
   Compose Compiler Gradle plugin

   Kotlin 2.0+ requires the Compose Compiler Gradle plugin, which is referenced as alias(libs.plugins.kotlin.compose) in the plugins block at the top of the build.gradle.kts (Module :app) and declared as kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" } in the libs.versions.toml file. The version of the Compose Compiler Gradle plugin and the Kotlin Android plugin are the same.

   If you are using a Kotlin version earlier than 2.0, you must verify that the Compose compiler and the Kotlin compiler versions are compatible. For details, see Compose to Kotlin Compatibility Map.

5. From the Android view, open Gradle Scripts > libs.versions.toml. In the [versions] section, you need to declare the version number for ArcGIS Maps SDK for Kotlin. And in the [libraries] section, you need to add the library declarations for the following:

   • the ArcGIS Maps SDK for Kotlin SDK.
   • the ArcGIS Maps SDK for Kotlin Toolkit BOM.
   • any Toolkit modules needed. For this tutorial, you need the geoview-compose module, which contains the composable MapView, and the authentication module.

   The version for the Toolkit BOM applies to all the Toolkit modules you declare.

   Gradle version catalogs

   Gradle version catalogs are the standard Android approach to declaring dependency versions. They are preferred over specifying versions numbers in the build.gradle.kts or listing version numbers in a version.gradle. In recent releases of Android Studio, the New Project Wizard generates build.gradle.kts and gradle/libs.versions.toml files that support this standard.

   Gradle version catalogs can also use BOM files to specify a single version number for all artifacts in the BOM. For more details, see Using the BOM in the README of the ArcGIS Maps SDK for Kotlin Toolkit.

   gradle/libs.versions.toml

   Use dark colors for code blocksCopy

   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
   
   [versions]
   arcgisMapsKotlin = "200.7.0"
   
   [libraries]
   arcgis-maps-kotlin = { group = "com.esri", name = "arcgis-maps-kotlin", version.ref = "arcgisMapsKotlin" }
   arcgis-maps-kotlin-toolkit-bom = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-bom", version.ref = "arcgisMapsKotlin" }
   arcgis-maps-kotlin-toolkit-geoview-compose = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-geoview-compose" }
   arcgis-maps-kotlin-toolkit-authentication = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-authentication" }
   

6. From the Android view, open Gradle Scripts > settings.gradle.kts. Replace the contents of the file with the expanded code below.

   settings.gradle.kts (Tutorial)

   Expand

   Use dark colors for code blocks

   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
   dependencyResolutionManagement {
       repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
       repositories {
           google()
           mavenCentral()
           maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
       }
   }
   
   rootProject.name = "Tutorial"
   include(":app")

7. Sync the Gradle changes. Click the Sync now prompt or click the refresh icon (Sync Project with Gradle Files) in the toolbar. This may take several minutes.

8. From the Android view, open app > manifests > AndroidManifest.xml. Update the Android manifest to allow internet access.

   More info

   Insert these new elements within the manifest element. Do not alter or remove any other statements.

   Depending on what ArcGIS functionality you add in future tutorials, it is likely you will need to add additional permissions to your manifest.

   AndroidManifest.xml

   Expand

   Use dark colors for code blocks

   2 2 3 4 5 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6

   Add line.

   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
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools">
   
       <uses-permission android:name="android.permission.INTERNET" />
   

   Expand

Create a map

1. From the Android view, right click on app > kotlin+java > com.example.app, select New > package from the list. Enter com.example.app.screens as the package name. Hit Enter on your keyboard. This step creates a new package that will contain the UI files.

2. Right click on the screens package you just created, select New > Kotlin Class/File from the list. In the pop-up window, select File and enter MainScreen as the file name. Hit Enter on your keyboard.

3. In MainScreen.kt, delete any lines of code that were inserted automatically by Android Studio. Then add the following OptIn annotation, package name, and imports.

   MainScreen.kt

   Use dark colors for code blocks

   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
   @file:OptIn(ExperimentalMaterial3Api::class)
   
   package com.example.app.screens
   
   import androidx.compose.foundation.layout.fillMaxSize
   import androidx.compose.foundation.layout.padding
   import androidx.compose.material3.ExperimentalMaterial3Api
   import androidx.compose.material3.Scaffold
   import androidx.compose.material3.Text
   import androidx.compose.material3.TopAppBar
   import androidx.compose.runtime.Composable
   import androidx.compose.runtime.remember
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.res.stringResource
   import com.arcgismaps.mapping.ArcGISMap
   import com.arcgismaps.mapping.BasemapStyle
   import com.arcgismaps.mapping.Viewpoint
   import com.arcgismaps.toolkit.geoviewcompose.MapView
   import com.example.app.R
   
   

4. Create a top-level function named createMap() that returns an ArcGISMap.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   fun createMap(): ArcGISMap {
   
   }

5. Create an ArcGISMap using the BasemapStyle.ArcGISTopographic, and call apply {} on the map. The function returns this ArcGISMap.

   More info

   For more information on apply {}, see Kotlin scope functions.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   fun createMap(): ArcGISMap {
   
       return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
   
       }
   
   }

6. In the apply block, create a Viewpoint with x (longitude) and y (latitude) coordinates, and a scale. Assign the view point to the initialViewpoint property of the ArcGISMap.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   fun createMap(): ArcGISMap {
   
       return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
   
           initialViewpoint = Viewpoint(
               latitude = 34.0270,
               longitude = -118.8050,
   
               scale = 72000.0
   
           )
   
       }
   
   }

Create a MainScreen to hold the map

1. Create a composable function named MainScreen, which will call MapView.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   @Composable
   fun MainScreen() {
   
   }
   

   Expand

2. Add a remember block and call createMap() inside it. Then assign remember to a local variable named map.

   More info

   The top-level composable function remember is used to retain state across recompositions.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   @Composable
   fun MainScreen() {
   
       val map = remember {
           createMap()
       }
   
   }
   

   Expand

3. You will now call several composable functions from Android Jetpack Compose. Call Scaffold and pass a TopAppBar with a Text that contains the app name (R.string.app_name).

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   @Composable
   fun MainScreen() {
   
       val map = remember {
           createMap()
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
       }
   
   }
   

   Expand

4. In the trailing lambda for Scaffold, call the MapView composable defined in the ArcGIS Maps SDK for Kotlin Toolkit. Pass a Modifier that has maximum size and default padding. And pass map as the arcGISMap parameter.

   MainScreen.kt

   Expand

   Use dark colors for code blocks

   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
   @Composable
   fun MainScreen() {
   
       val map = remember {
           createMap()
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           MapView(
               modifier = Modifier.fillMaxSize().padding(it),
               arcGISMap = map
           )
   
       }
   
   }
   

   Expand

Call MainScreen inside MainActivity class

1. Open the app > kotlin+java > com.example.app > MainActivity.kt. Delete all lines of code in the file. Then add the package declaration, import statements, and the MainActivity class.

   MainActivity.kt

   Use dark colors for code blocks

   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
   
   package com.example.app
   
   import android.os.Bundle
   import androidx.activity.ComponentActivity
   import androidx.activity.compose.setContent
   import androidx.activity.enableEdgeToEdge
   import com.arcgismaps.ApiKey
   import com.arcgismaps.ArcGISEnvironment
   import com.arcgismaps.httpcore.authentication.OAuthUserConfiguration
   import com.arcgismaps.toolkit.authentication.AuthenticatorState
   import com.arcgismaps.toolkit.authentication.DialogAuthenticator
   import com.example.app.screens.MainScreen
   import com.example.app.ui.theme.TutorialTheme
   
   class MainActivity : ComponentActivity() {
   
   }

2. In the setContent block of the onCreate() lifecycle function, you will call the composable function MainScreen, with default theming applied. To do this, add onCreate() with the following code.

   MainActivity.kt

   Use dark colors for code blocks

   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
   class MainActivity : ComponentActivity() {
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
   
           enableEdgeToEdge()
   
           setContent {
               TutorialTheme {
                   MainScreen()
   
               }
           }
       }
   
   }

Set developer credentials

To allow your app users to access ArcGIS Location Services, use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Run your app

1. Click Run > Run > app to run the app.

   More info

   In Android Studio, you have two choices for running your app: an actual Android device or the Android Emulator.

   Android device

   Connect your computer to your Android device, using USB or Wi-Fi. For more details, see How to connect your Android device.

   Android Emulator

   Create an AVD (Android Virtual Device) to run in the Android Emulator. For details, see Run apps on the Android Emulator.

   Selecting a device

   When you build and run an app in Android Studio, you must first select a device. From the Android Studio toolbar, you can access the drop-down list of your currently available devices, both virtual and physical.

   .

   If you cannot access the list on the toolbar, click Tools > Device Manager.

You should see a map with the topographic basemap layer centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the map view to explore the map.

Option 2: Download the solution

1. Click the Download solution link in the right-hand side of this page.

2. Unzip the file to a location on your machine.

3. Run Android Studio.

4. Go to File > Open.... Navigate to the solution folder and click Open.

   On Windows: If you are in the Welcome to Android Studio dialog, click Open and navigate to the solution folder. Then click Open.

Since the downloaded solution does not contain authentication credentials, you must add the developer credentials that you created in the Set up authentication section.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services, use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Run the app

Click Run > Run > app to run the app.

You should see a map with the topographic basemap layer centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the map view to explore the map.