Learn how to create and display a scene with a basemap layer and an elevation layer. Set properties of the scene's camera to control the 3D perspective.
Like a map, a scene contains layers of geographic data. It contains a basemap layer and, optionally, one or more data layers. To provide a realistic view of the terrain, you can also add elevation layers to define the height of the surface across the scene. The 3D perspective of the scene is controlled by the scene's camera, which defines the position of the scene observer in 3D space.
In this tutorial, you create and display a scene using the imagery basemap layer. The surface of the scene is defined with an elevation layer and the camera is positioned to display an area of the Santa Monica Mountains in the scene view.
The scene and code will be used as the starting point for other 3D tutorials.
Prerequisites
The following are required for this tutorial:
- An ArcGIS account to access API keys. If you don't have an account, sign up for free.
- A development and deployment environment that meets the system requirements.
- An IDE for Android development in Kotlin.
Steps
Create a new Android Studio project
Use Android Studio to create an app and configure it to reference the API.
-
Open Android Studio.
- In the menu bar, click File > New > New Project....
- In the Create New Project window, make sure Phone and Tablet tab is selected, and then select Empty Activity. Click Next.
- In the Configure your project window, set the following configuration options:
- Name:
Display a scene
. - Package name: Change to
com.example.app
. Or change to match your organization. - Save location: Set to a new folder.
- Language: Kotlin
- Minimum SDK: API 26: Android 8.0 (O)
- Name:
-
In the Project tool window, make sure that your current view is Android. These tutorial instructions refer to that view.
If your view name is something other than Android (such as Project or Packages), click on the leftmost control in the title bar of the Project tool window, and select Android from the list.
-
From the Project tool window, open Gradle Scripts > build.gradle (Project: Display_a_scene). Replace the contents of the file with the following code:
build.gradle (Project: Display_a_scene)Use dark colors for code blocks Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line // Top-level build file where you can add configuration options common to all sub-projects/modules. plugins { id 'com.android.application' version '8.1.1' apply false id 'com.android.library' version '8.1.1' apply false id 'org.jetbrains.kotlin.android' version '1.9.10' apply false } tasks.register('clean', Delete) { delete rootProject.buildDir }
-
From the Project tool window, open Gradle Scripts > build.gradle (Module: Display_a_scene.app). Replace the contents of the file with the following code:
build.gradle (Module: app)Use dark colors for code blocks Change line Change line Change line Change line Change line Change line Change line Change line Change line apply plugin: 'com.android.application' apply plugin: 'org.jetbrains.kotlin.android' android { compileSdk 33 defaultConfig { applicationId "com.example.app" minSdkVersion 26
-
From the Project tool window, open Gradle Scripts > settings.gradle. Replace the contents of the file with the following code:
settings.gradle (Display a scene)Use dark colors for code blocks Change line Change line Change line Change line Change line Change line Change line Change line Change line Change line pluginManagement { repositories { gradlePluginPortal() google() mavenCentral() } } dependencyResolutionManagement {
-
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.
-
From the Project tool window, open app > manifests > AndroidManifest.xml. Update the Android manifest to allow network access.
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.xmlUse dark colors for code blocks Add line. <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-permission android:name="android.permission.INTERNET" />
Add import statements
Open app > java > com.example.app MainActivity.kt, and add import statements to reference the API.
package com.example.app
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.geometry.Point
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISScene
import com.arcgismaps.mapping.ArcGISTiledElevationSource
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Surface
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.view.Camera
import com.arcgismaps.mapping.view.SceneView
import com.example.app.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
Add a UI for the scene view
A scene view is a UI component that displays a scene. It also handles user interactions with the scene, including navigating with touch gestures. Use XML to add a scene view to the UI and make it available to the main activity source code.
-
In app > res > layout > activity_main.xml, replace the entire
Text
element with aView SceneView
element.If you do not see the XML code, select the Code tab to switch out of design mode and display the XML code in the editor.
Your
Scene
element creates an instance of theView SceneView
class from the ArcGIS Maps SDK for Kotlin.In your main activity source code, you can access the
SceneView
using an implicit property, which is declared in the value of theandroid:
attribute. In this case, the property will be namedid scene
.View activity_main.xmlUse dark colors for code blocks Change line Change line Change line Change line <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.arcgismaps.mapping.view.SceneView android:id="@+id/sceneView" android:layout_width="match_parent" android:layout_height="match_parent"/> </androidx.constraintlayout.widget.ConstraintLayout> </layout>
-
In MainActivity.kt, create a read-only lazy variable named
activity
referencing the generated Android classMain Binding Activity
. This variable will be initialized withMain Binding Data
when called.Binding Util.set Content View(this, R.layout.activity_ main) MainActivity.ktUse dark colors for code blocks Add line. Add line. Add line. class MainActivity : AppCompatActivity() { private val activityMainBinding: ActivityMainBinding by lazy { DataBindingUtil.setContentView(this, R.layout.activity_main) }
-
Create a read-only variable named
scene
and bind it to theView scene
created in activity_main.xml.View MainActivity.ktUse dark colors for code blocks Add line. Add line. Add line. class MainActivity : AppCompatActivity() { private val activityMainBinding: ActivityMainBinding by lazy { DataBindingUtil.setContentView(this, R.layout.activity_main) } private val sceneView: SceneView by lazy { activityMainBinding.sceneView }
Add a scene
Use the scene view to display a scene centered on the Santa Monica Mountains in California. The scene will contain a imagery basemap layer.
-
In MainActivity.kt, add a new
setup
method in yourScene() Main
class and create anActivity ArcGISScene
with an imagery basemap.MainActivity.ktUse dark colors for code blocks Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { } }
-
Create a new
ArcGISTiledElevationSource
and use it to create a newSurface
. Then set theelevation
property on theExaggeration surface
to 2.5f to increase the 3D effect of the elevation.MainActivity.ktUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { // add base surface for elevation data val elevationSource = ArcGISTiledElevationSource("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer") val surface = Surface().apply { elevationSources.add(elevationSource) // add an exaggeration factor to increase the 3D effect of the elevation. elevationExaggeration = 2.5f } } }
-
Set the
base
property of theSurface scene
to thesurface
.MainActivity.ktUse dark colors for code blocks Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { // add base surface for elevation data val elevationSource = ArcGISTiledElevationSource("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer") val surface = Surface().apply { elevationSources.add(elevationSource) // add an exaggeration factor to increase the 3D effect of the elevation. elevationExaggeration = 2.5f } baseSurface = surface } }
-
Create a
Point
for the camera and assign it tocamera
. Then create aLocation Camera
, passing thecamera
and values for the camera's heading, pitch, and roll.Location The position from which you view the scene is defined by a
Camera
. The following properties of the camera are used to define an observation point in the scene:- 3D location: Latitude, longitude, and altitude
- Heading: Azimuth of the camera's direction
- Pitch: Up and down angle
- Roll: Side-to-side angle
MainActivity.ktUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { // add base surface for elevation data val elevationSource = ArcGISTiledElevationSource("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer") val surface = Surface().apply { elevationSources.add(elevationSource) // add an exaggeration factor to increase the 3D effect of the elevation. elevationExaggeration = 2.5f } baseSurface = surface // Point(x, y, z, spatialReference) val cameraLocation = Point(-118.794, 33.909, 5330.0, SpatialReference.wgs84()) // Camera(location, heading, pitch, roll) val camera = Camera(cameraLocation, 355.0, 72.0, 0.0) } // set the scene on the scene view sceneView.scene = scene }
-
Create a
Viewpoint
using thecamera
theLocation camera
and set it as the initial viewpoint for the scene.MainActivity.ktUse dark colors for code blocks Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { // add base surface for elevation data val elevationSource = ArcGISTiledElevationSource("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer") val surface = Surface().apply { elevationSources.add(elevationSource) // add an exaggeration factor to increase the 3D effect of the elevation. elevationExaggeration = 2.5f } baseSurface = surface // Point(x, y, z, spatialReference) val cameraLocation = Point(-118.794, 33.909, 5330.0, SpatialReference.wgs84()) // Camera(location, heading, pitch, roll) val camera = Camera(cameraLocation, 355.0, 72.0, 0.0) initialViewpoint = Viewpoint(cameraLocation, camera) } }
-
Set the
scene
property ofscene
to the newView ArcGISScene
.MainActivity.ktUse dark colors for code blocks Add line. Add line. // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply { } // set the scene on the scene view sceneView.scene = scene }
-
In the
o
method, calln Create() lifecycle.add
to add the sceneView to the lifecycle scope. Then callObserver(scene View) setup
, which has been defined in the previous steps.Scene() Creating a new Android Studio project for Kotlin or Java automatically uses
set
. You can run the scene view from theContent View(R.layout.activity_ main) activity_
layout, but this requires a separate extension in the gradle script.main MainActivity.ktUse dark colors for code blocks Change line Add line. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) lifecycle.addObserver(sceneView) setupScene() }
Set your API key
An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.
-
Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.
-
Create the
set
method, where you will set theA p i Key() ArcGISEnvironment.apiKey
property by callingApiKey.create()
and passing your API key as a string. Don't forget the quotes.MainActivity.ktUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. private fun setApiKey(){ // set your API key // Note: it is not best practice to store API keys in source code. The API key is referenced // here for the convenience of this tutorial. ArcGISEnvironment.apiKey = ApiKey.create("YOUR_API_KEY") } // set up your scene here. You will call this method from onCreate() private fun setupScene() { val scene = ArcGISScene(BasemapStyle.ArcGISImagery).apply {
-
Call
set
in theA p i Key() o
lifecycle method, before then Create() setup
call.Scene() MainActivity.ktUse dark colors for code blocks Add line. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) lifecycle.addObserver(sceneView) setApiKey() setupScene() }
-
Click Run > Run > app to run the app.
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 scene with the imagery basemap layer centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the scene view to explore the scene.
What's next?
Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials: