> ## Documentation Index
> Fetch the complete documentation index at: https://docs.here.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a map view with Jetpack Compose

To take a fully declarative UI approach for your app, use Kotlin and Jetpack Compose with the MapView class. Jetpack Compose provides an alternative to traditional XML layouts, offering a code-based approach to UI development that integrates seamlessly with the HERE SDK.

If you prefer using XML layouts instead of Jetpack Compose, or if you're working with an existing project that uses XML-based layouts, refer to the [Integrate the HERE SDK](android-integrate-here-sdk) section which covers the XML implementation approach.

## Create a new project with Jetpack Compose

Start Android Studio (we used version Android Studio Narwhal 4 Feature Drop | 2025.1.4 for this tutorial) and perform the following steps:

1. Select **File** and click **New Project**.
2. Choose **Phone and Tablet**, select **Empty Activity** and click **Next**.
3. Provide a project name, e.g. "HelloMapKotlin".
4. Next to **Minimum API level**, set API 24 as the minimum Android SDK.
5. Select a **Build configuration language**.
6. Make sure an appropriate directory is chosen in **Save location** and click **Finish** to continue.

Note that selecting **Empty Activity** ensures that you use Jetpack Compose in your app.

Once the wizard finishes, make sure to build the plain project and execute it on an emulator (or on a device). If all goes well, you should see the "Hello Android" text.

## Configure the project to include the HERE SDK

Before you begin adding the map view with Jetpack Compose, ensure you have completed the following setup steps:

1. Make sure you have access to your credentials and the HERE SDK framework. To learn more, see [Get started](android-get-started).
2. Ensure that you have properly integrated the HERE SDK:

* [Adapt your Gradle script to integrate the HERE SDK](android-integrate-here-sdk#integrate-the-android-archive)
* [Set required credentials](android-integrate-here-sdk#set-your-credentials)
* [Initialize the HERE SDK](android-integrate-here-sdk#initialize-the-here-sdk)

## Adding the map view

Once you have integrated the HERE SDK into your project and set your credentials, add a new `MapView` using Jetpack Compose.

Open `MainActivity.kt`. If you followed Android Studio’s wizard, it probably includes a sample composable function called `Greeting()`. You can go ahead and remove that method, as we are replacing it with the map view.

Inside the `MainActivity` class, create a member variable for our `MapView` instance:

```kotlin
private var mapView: MapView? = null
```

The `MapView` class provided by the HERE SDK is a regular Android `View` (not a composable). In Jetpack Compose, we can display traditional Android views using a composable called `AndroidView`.
Add the following composable method inside your `MainActivity`:

```kotlin
@Composable
fun HereMapView(savedInstanceState: Bundle?) {
    AndroidView(factory = { ctx ->
        MapView(ctx).apply {
            setupMapView(savedInstanceState, this)
        }
    })
}
```

This creates a `MapView` programmatically and passes it to a `setupMapView()` method for further initialization.

Now, add the following method to your `MainActivity`. This initializes the `MapView`, restores its state, and loads the map scene:

```kotlin
private fun setupMapView(savedInstanceState: Bundle?, mapView: MapView) {
    this.mapView = mapView
    mapView.onCreate(savedInstanceState)
    mapView.onResume()
    if (savedInstanceState == null) {
        mapView.mapScene.loadScene(MapScheme.NORMAL_DAY, null)
    }
}
```

An error indicating that `MapView` is an unresolved symbol appears, so use the auto completion hotkey to add `com.here.sdk.mapview.MapView` to your imports list, or add it manually.

Note that multiple `MapView` instances can be created and rendered together on one screen.

To display the map on the screen, you need to call your composable function `HereMapView()` inside the `onCreate()` method of your `MainActivity`:

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    initializeHERESDK()
    setContent {
        MyApplicationTheme {
            HereMapView(savedInstanceState)
        }
    }
}
```

## Build and run

Now it's time to build and run the app. If all goes well, you should see a HERE map covering the whole area of the view.

![Screenshot: Showing map view.](https://files.readme.io/4e9b8d6a334296862fe2af5ec110f59d7c5c3b2dd5538a7fc6f2e63a1042317c-android-hello_map.png)