Create KML multi-track | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Create, save and preview a KML multi-track, captured from a location data source.

Create KML multi-track

Use case

When capturing location data for outdoor activities such as hiking or skiing, it can be useful to record and share your path. This sample demonstrates how you can collect individual KML tracks during a navigation session, then combine and export them as a KML multi-track.

How to use the sample

Tap Start Navigation to begin moving along a simulated trail. Tap Record Track to start recording your current path. Tap Stop Recording to end recording and capture a KML track. Repeat steps to capture multiple KML tracks in a single session. Tap the Save button to save your recorded tracks as a .kmz file to local storage. Then load the created .kmz file containing your KML multi-track to view all created tracks on the map.

How it works

Create an ArcGISMap with a basemap and a GraphicsOverlay to display the path geometry for your navigation route.
Create a SimulatedLocationDataSource to drive the LocationDisplay.
As you receive Location updates, add each point to a list of KmlTrackElement objects while recording.
On recording stopped, create a KmlTrack using one or more KmlTrackElement objects.
Combine one or more KmlTrack objects into a KmlMultiTrack.
Save the KmlMultiTrack inside a KmlDocument, then export the document to a .kmz file.
Load the saved .kmz file into a KmlDataset and locate the KmlDocument in the dataset’s rootNodes. From the document’s childNodes get the KmlPlacemark and retrieve the KmlMultiTrack geometry.
Retrieve the geometry of each track in the KmlMultiTrack by iterating through the list of tracks and obtaining the respective KmlTrack.geometry.

Relevant API

KmlDataset
KmlDocument
KmlMultiTrack
KmlPlacemark
KmlTrack
LocationDisplay
SimulatedLocationDataSource

Additional information

This sample uses the GeoView-Compose Toolkit module to be able to implement a composable MapView.

Sample Code

MainActivity.kt

CreateKMLMultiTrackViewModel.kt

CreateKMLMultiTrackScreen.kt

/* Copyright 2025 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.createkmlmultitrack

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.createkmlmultitrack.screens.CreateKMLMultiTrackScreen

class MainActivity : ComponentActivity() {

    override fun onCreate(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.ACCESS_TOKEN)

        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                CreateKMLMultiTrackApp()
            }
        }
    }

    @Composable
    private fun CreateKMLMultiTrackApp() {
        Surface(color = MaterialTheme.colorScheme.background) {
            CreateKMLMultiTrackScreen(
                sampleName = getString(R.string.create_kml_multi_track_app_name)
            )
        }
    }
}

/* Copyright 2025 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.createkmlmultitrack.components

import android.app.Application
import android.widget.Toast
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.Color
import com.arcgismaps.geometry.Geometry
import com.arcgismaps.geometry.GeometryEngine
import com.arcgismaps.geometry.Multipoint
import com.arcgismaps.geometry.Point
import com.arcgismaps.geometry.Polyline
import com.arcgismaps.location.Location
import com.arcgismaps.location.LocationDisplayAutoPanMode
import com.arcgismaps.location.SimulatedLocationDataSource
import com.arcgismaps.location.SimulationParameters
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.kml.KmlAltitudeMode
import com.arcgismaps.mapping.kml.KmlDataset
import com.arcgismaps.mapping.kml.KmlDocument
import com.arcgismaps.mapping.kml.KmlMultiTrack
import com.arcgismaps.mapping.kml.KmlPlacemark
import com.arcgismaps.mapping.kml.KmlTrack
import com.arcgismaps.mapping.kml.KmlTrackElement
import com.arcgismaps.mapping.symbology.SimpleLineSymbol
import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.mapping.view.LocationDisplay
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.esri.arcgismaps.sample.createkmlmultitrack.R
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.Job
import kotlinx.coroutines.cancelAndJoin
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch
import java.io.File
import java.time.Instant

class CreateKMLMultiTrackViewModel(application: Application) : AndroidViewModel(application) {
    private val provisionPath: String by lazy {
        application.getExternalFilesDir(null)?.path.toString() +
                File.separator + application.getString(R.string.create_kml_multi_track_app_name)
    }

    // Create a message dialog view model for handling error messages
    val messageDialogVM = MessageDialogViewModel()

    // This should be passed to the composable MapView
    val mapViewProxy = MapViewProxy()

    // Display a map with a street basemap style
    val arcGISMap by mutableStateOf(ArcGISMap(BasemapStyle.ArcGISStreets))

    // Overlay to display kml tracks and location points
    val graphicsOverlay = GraphicsOverlay()

    // Marker symbol to display KmlTrackElements
    private val locationSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Circle,
        color = Color.red,
        size = 10f
    )

    // Line symbol to display KmlTrack
    private val lineSymbol = SimpleLineSymbol(
        style = SimpleLineSymbolStyle.Solid,
        color = Color.black,
        width = 3f
    )

    // Observe the list of KML track elements being added when recording a KML track
    private var _kmlTrackElements = MutableStateFlow<List<KmlTrackElement>>(listOf())
    val kmlTrackElements = _kmlTrackElements.asStateFlow()

    // Observe the list of KML tracks being added for the multi track
    private var _kmlTracks = MutableStateFlow<List<KmlTrack>>(listOf())
    val kmlTracks = _kmlTracks.asStateFlow()

    // Enables the recenter button when not in navigation autopan
    var isRecenterButtonEnabled by mutableStateOf(false)
        private set

    // Updates UI to reflect recording buttons and text information
    var isRecordingTrack by mutableStateOf(false)
        private set

    // Updates the UI to display the tracks of the local .kmz file
    var isShowTracksFromFileEnabled by mutableStateOf(false)
        private set

    // Runs the location display simulation and is canceled when completed.
    private var locationDisplayJob: Job? = null

    // Default location display object, which is updated by rememberLocationDisplay
    private var locationDisplay: LocationDisplay = LocationDisplay()

    // Sets the location display
    fun setLocationDisplay(locationDisplay: LocationDisplay) {
        this.locationDisplay = locationDisplay
    }

    /**
     * Loads the hiking path polyline and starts a simulation down a path.
     * Updates the navigation autopan buttons based on state, and calls [addTrackElement]
     * with the current simulation [Location] when [isRecordingTrack] is enabled.
     */
    suspend fun startNavigation() {
        // Get the hiking path geometry
        val routeGeometry = Geometry.fromJsonOrNull(
            json = getApplication<Application>().getString(R.string.Coastal_Trail)
        ) as Polyline
        // Create a simulated location data source from json data
        // with simulation parameters to set a consistent velocity
        val simulatedLocationDataSource = SimulatedLocationDataSource(
            polyline = routeGeometry,
            parameters = SimulationParameters(
                startTime = Instant.now(),
                velocity = 25.0,
                horizontalAccuracy = 0.0,
                verticalAccuracy = 0.0
            )
        )
        // Set the map's initial viewpoint
        mapViewProxy.setViewpointGeometry(routeGeometry, 25.0)
        // Update sample UI state
        isShowTracksFromFileEnabled = false
        // Create a new job with the following coroutines
        locationDisplayJob = with(viewModelScope) {
            launch {
                // Set the simulated location data source as the location data source for this app
                locationDisplay.dataSource = simulatedLocationDataSource

                // Start the location data source
                locationDisplay.dataSource.start().onFailure {
                    messageDialogVM.showMessageDialog(
                        title = "Error starting location data source",
                        description = it.message.toString()
                    )
                }

                // Set the auto pan to navigation mode
                locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Navigation)
            }
            launch {
                // Automatically enable recenter button when navigation pan is disabled
                locationDisplay.autoPanMode.collect {
                    when (it) {
                        LocationDisplayAutoPanMode.Off -> isRecenterButtonEnabled = true
                        LocationDisplayAutoPanMode.Navigation -> isRecenterButtonEnabled = false
                        else -> {}
                    }
                }
            }
            launch {
                // Listen for changes in location
                locationDisplay.location.collect {
                    it?.let { location ->
                        if (isRecordingTrack) {
                            addTrackElement(location.position)
                        }
                    }
                }
            }
        }
    }

    /**
     * When recording is enabled, add the given [locationPoint] to the list
     * of [kmlTrackElements] and display the graphic on the map.
     */
    private fun addTrackElement(locationPoint: Point) {
        // Add a new element to the state flow
        _kmlTrackElements.value += KmlTrackElement(
            coordinate = locationPoint,
            instant = Instant.now(),
            angle = null
        )
        // Add a graphic at the location's position
        graphicsOverlay.graphics.add(
            Graphic(
                geometry = locationPoint,
                symbol = locationSymbol
            )
        )
    }

    /**
     * Enables recording state to collect position values from the location data source.
     */
    fun startRecordingKmlTrack() {
        isRecordingTrack = true
        _kmlTrackElements.value = listOf()
    }

    /**
     * Disables recording to create a new [KmlTrack] and display the track graphic on the map.
     */
    fun stopRecordingKmlTrack() {
        if (_kmlTrackElements.value.isEmpty())
            return messageDialogVM.showMessageDialog(
                title = "Empty track elements",
                description = "Cannot create a KmlTrack with 0 KmlTrackElements"
            )

        _kmlTracks.value += KmlTrack(
            elements = _kmlTrackElements.value,
            altitudeMode = KmlAltitudeMode.RelativeToGround
        )

        displayKmlTracks()
        isRecordingTrack = false
    }

    /**
     * Display polylines on the map representing all the recorded KML tracks.
     */
    private fun displayKmlTracks() {
        graphicsOverlay.graphics.clear()
        _kmlTracks.value.forEach { kmlTrack ->
            // Get the map's spacial reference
            val mapSpatialReference = arcGISMap.spatialReference
                ?: return messageDialogVM.showMessageDialog("Error retrieving spacial reference")
            // Set the KML geometry to use the same projection
            val multipoint = (kmlTrack.geometry as Multipoint)
            val polyline = GeometryEngine.projectOrNull(
                geometry = Polyline(multipoint.points),
                spatialReference = mapSpatialReference
            ) ?: return messageDialogVM.showMessageDialog("Error converting geometry spacial reference")
            // Add the polyline graphic to the map
            graphicsOverlay.graphics.add(Graphic(geometry = polyline, symbol = lineSymbol))
        }
    }

    /**
     * Exports the [KmlMultiTrack] as a kmz file to local storage.
     */
    fun exportKmlMultiTrack() {
        // Create a default KML document which will export file to device
        val kmlDocument = KmlDocument()
        // Create a KML multi track using the current list of tracks
        val multiTrack = KmlMultiTrack(_kmlTracks.value)
        // Add the multi track as a placemark KML node to the KML document
        kmlDocument.childNodes.add(KmlPlacemark(geometry = multiTrack))
        // Define the save file path
        val localKmlFile = File(provisionPath, "HikingTracks.kmz").apply {
            if (exists()) delete()
        }
        // Save KML file to local storage
        viewModelScope.launch {
            kmlDocument.saveAs(localKmlFile.canonicalPath).onSuccess {
                Toast.makeText(
                    getApplication(),
                    "Saved KmlMultiTrack: ${localKmlFile.name}",
                    Toast.LENGTH_SHORT
                ).show()
            }.onFailure {
                messageDialogVM.showMessageDialog(
                    title = it.message.toString(),
                    description = it.cause.toString()
                )
            }
            stopNavigation()
        }
    }

    /**
     * Stop the [locationDisplay] and [locationDisplayJob]. Updates UI to display results.
     */
    private fun stopNavigation() {
        viewModelScope.launch {
            if (locationDisplayJob?.isActive == true) {
                locationDisplay.dataSource.stop()
                locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Off)
                locationDisplayJob?.cancelAndJoin()
            }
            isShowTracksFromFileEnabled = true
        }
    }

    /**
     * Called from screen to load the KML file from local storage.
     * Once loaded, [onLocalKmlFileLoaded] is invoked with the KML multi track contents.
     */
    suspend fun loadLocalKmlFile(onLocalKmlFileLoaded: (List<Geometry>) -> Unit) {
        // Create the file path for the local KML file
        val localKmlFile = File(provisionPath, "HikingTracks.kmz")
        // Check if file exists
        if (!localKmlFile.exists())
            return messageDialogVM.showMessageDialog("Error locating KML file")
        // Create a KML dataset using the local file path
        val localKmlDataset = KmlDataset(localKmlFile.canonicalPath)
        // Load the KML dataset
        localKmlDataset.load().onFailure {
            return messageDialogVM.showMessageDialog("Error parsing KML file")
        }
        // Get the document's node which contains the placemark
        val kmlDocument = localKmlDataset.rootNodes.first() as KmlDocument
        val kmlPlacemark = kmlDocument.childNodes.first() as KmlPlacemark
        // Get the multi track geometry from the placemark
        val kmlMultiTrack = kmlPlacemark.kmlGeometry as KmlMultiTrack
        // Calculate the union of all the KML tracks
        val allTracksGeometry = GeometryEngine.unionOrNull(kmlMultiTrack.tracks.map { it.geometry })
            ?: return messageDialogVM.showMessageDialog("KmlMultiTrack has no geometry")

        // Set the viewpoint to the union geometry
        mapViewProxy.setViewpointGeometry(
            boundingGeometry = allTracksGeometry,
            paddingInDips = 25.0
        )
        // Add the other individual track geometry as well
        val trackGeometries = mutableListOf(allTracksGeometry).apply {
            addAll(kmlMultiTrack.tracks.map { it.geometry })
        }
        // Invoke UI to display the list of geometry tracks
        onLocalKmlFileLoaded(trackGeometries)
    }

    /**
     * Update viewpoint to display [kmlTrackGeometry].
     */
    fun previewKmlTrack(kmlTrackGeometry: Geometry) {
        viewModelScope.launch {
            mapViewProxy.setViewpointGeometry(
                boundingGeometry = kmlTrackGeometry,
                paddingInDips = 25.0
            )
        }
    }

    /**
     * Sets the autopan mode to navigation, and update UI.
     */
    fun recenter() {
        locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Navigation)
        isRecenterButtonEnabled = false
    }

    /**
     * Resets UI and map graphics.
     */
    fun reset() {
        _kmlTracks.value = listOf()
        graphicsOverlay.graphics.clear()
        isShowTracksFromFileEnabled = false
    }
}

/* Copyright 2025 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.
 *
 */

@file:OptIn(ExperimentalMaterial3Api::class)

package com.esri.arcgismaps.sample.createkmlmultitrack.screens

import android.content.res.Configuration
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.Button
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.FilledTonalIconButton
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MenuAnchorType
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
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 androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.geometry.Geometry
import com.arcgismaps.mapping.kml.KmlTrackElement
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.rememberLocationDisplay
import com.esri.arcgismaps.sample.createkmlmultitrack.R
import com.esri.arcgismaps.sample.createkmlmultitrack.components.CreateKMLMultiTrackViewModel
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

/**
 * Main screen layout for the sample app
 */
@Composable
fun CreateKMLMultiTrackScreen(sampleName: String) {
    // Create a location display using the current application's context
    val locationDisplay = rememberLocationDisplay()
    // Create the map view-model and set the location display to be used for simulation
    val mapViewModel = viewModel<CreateKMLMultiTrackViewModel>().apply {
        setLocationDisplay(locationDisplay)
    }
    // Observe viewmodel states
    val currentKmlMultiTrack by mapViewModel.kmlTracks.collectAsStateWithLifecycle()
    var localMultiTrackGeometries by remember { mutableStateOf<List<Geometry>?>(null) }
    val isShowTracksFromFileEnabled = mapViewModel.isShowTracksFromFileEnabled
    // Update UI between recording option and browse tracks options.
    LaunchedEffect(isShowTracksFromFileEnabled) {
        if (isShowTracksFromFileEnabled) {
            mapViewModel.loadLocalKmlFile(onLocalKmlFileLoaded = { localMultiTrackGeometries = it })
        } else {
            mapViewModel.startNavigation()
            localMultiTrackGeometries = null
        }
    }

    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it),
                verticalArrangement = Arrangement.spacedBy(12.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                MapView(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f),
                    arcGISMap = mapViewModel.arcGISMap,
                    mapViewProxy = mapViewModel.mapViewProxy,
                    locationDisplay = locationDisplay,
                    graphicsOverlays = listOf(mapViewModel.graphicsOverlay)
                )
                if (!isShowTracksFromFileEnabled) {
                    TrackSimulationOptions(
                        isRecenterEnabled = mapViewModel.isRecenterButtonEnabled,
                        isRecordButtonEnabled = !mapViewModel.isRecordingTrack,
                        kmlTracksSize = currentKmlMultiTrack.size,
                        kmlTrackElementsFlow = mapViewModel.kmlTrackElements,
                        onRecenterClicked = mapViewModel::recenter,
                        onExportClicked = mapViewModel::exportKmlMultiTrack,
                        onRecordButtonClicked = {
                            if (!mapViewModel.isRecordingTrack) {
                                mapViewModel.startRecordingKmlTrack()
                            } else {
                                mapViewModel.stopRecordingKmlTrack()
                            }
                        },
                    )
                } else {
                    TrackBrowseOptions(
                        multiTrackGeometries = localMultiTrackGeometries,
                        onTrackSelected = mapViewModel::previewKmlTrack,
                        onResetButtonClicked = mapViewModel::reset
                    )
                }
            }

            mapViewModel.messageDialogVM.apply {
                if (dialogStatus) {
                    MessageDialog(
                        title = messageTitle,
                        description = messageDescription,
                        onDismissRequest = ::dismissDialog
                    )
                }
            }
        }
    )
}

@Composable
fun TrackSimulationOptions(
    isRecenterEnabled: Boolean,
    isRecordButtonEnabled: Boolean,
    kmlTrackElementsFlow: StateFlow<List<KmlTrackElement>>,
    kmlTracksSize: Int,
    onRecordButtonClicked: () -> Unit,
    onRecenterClicked: () -> Unit,
    onExportClicked: () -> Unit
) {
    // Observe the track element size
    var kmlTrackElementSize by remember { mutableIntStateOf(0) }
    LaunchedEffect(Unit) {
        kmlTrackElementsFlow.collect { kmlTrackElementSize = it.size }
    }

    Column(
        modifier = Modifier.padding(12.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TrackStatusText(
            isDisplayingTracks = false,
            isRecordingTrackElements = !isRecordButtonEnabled,
            kmlTrackElementsSize = kmlTrackElementSize
        )
        HorizontalDivider()
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = stringResource(R.string.kml_multi_track_hint),
                style = MaterialTheme.typography.bodyMedium
            )
            Text(
                text = kmlTracksSize.toString(),
                style = MaterialTheme.typography.bodyMedium
            )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .animateContentSize(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            FilledTonalIconButton(onClick = onRecenterClicked, enabled = isRecenterEnabled) {
                Icon(
                    painter = painterResource(R.drawable.gps_on_24),
                    contentDescription = "RecenterIcon"
                )
            }
            Button(onClick = onRecordButtonClicked) {
                Text(
                    modifier = Modifier.animateContentSize(),
                    text = if (isRecordButtonEnabled) stringResource(R.string.record_track_hint)
                    else stringResource(R.string.stop_recording_hint)
                )
            }
            FilledTonalIconButton(
                onClick = onExportClicked,
                enabled = isRecordButtonEnabled
            ) {
                Icon(
                    painter = painterResource(R.drawable.save_24),
                    contentDescription = "Export KML multi-track"
                )
            }
        }
    }
}

@Composable
fun TrackStatusText(
    isRecordingTrackElements: Boolean = false,
    kmlTrackElementsSize: Int = 0,
    isDisplayingTracks: Boolean
) {
    Box(Modifier.animateContentSize()) {
        if (isDisplayingTracks) {
            Text(
                text = stringResource(R.string.kml_multi_track_browse_hint),
                style = MaterialTheme.typography.labelLarge
            )
        } else {
            if (isRecordingTrackElements) {
                Text(
                    text = stringResource(R.string.kml_multi_track_recording_hint) + kmlTrackElementsSize,
                    style = MaterialTheme.typography.labelLarge,
                    color = MaterialTheme.colorScheme.error
                )
            } else {
                Text(
                    text = stringResource(R.string.kml_multi_track_start_record_hint),
                    style = MaterialTheme.typography.labelLarge
                )
            }
        }
    }
}

@Composable
fun TrackBrowseOptions(
    multiTrackGeometries: List<Geometry>?,
    onTrackSelected: (Geometry) -> Unit,
    onResetButtonClicked: () -> Unit
) {
    Column(
        modifier = Modifier.padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TrackStatusText(isDisplayingTracks = true)
        HorizontalDivider()
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Tracks Dropdown Menu
            var expanded by remember { mutableStateOf(false) }
            var selectedTrackIndex by remember { mutableIntStateOf(0) }
            ExposedDropdownMenuBox(
                modifier = Modifier,
                expanded = expanded,
                onExpandedChange = { expanded = !expanded }
            ) {
                TextField(
                    value = if (selectedTrackIndex == 0) stringResource(R.string.show_all_kml_tracks_hint)
                    else stringResource(R.string.kml_track_number_hint) + selectedTrackIndex,
                    onValueChange = {},
                    readOnly = true,
                    trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
                    modifier = Modifier.menuAnchor(type = MenuAnchorType.PrimaryNotEditable)
                )
                ExposedDropdownMenu(
                    expanded = expanded,
                    onDismissRequest = { expanded = false }
                ) {
                    multiTrackGeometries?.forEachIndexed { index, kmlTrackGeometry ->
                        DropdownMenuItem(
                            text = {
                                Text(
                                    if (index == 0) stringResource(R.string.show_all_kml_tracks_hint)
                                    else stringResource(R.string.kml_track_number_hint) + index
                                )
                            },
                            onClick = {
                                onTrackSelected(kmlTrackGeometry)
                                selectedTrackIndex = index
                                expanded = false
                            })
                        // Show a divider between dropdown menu options
                        if (index < multiTrackGeometries.lastIndex) {
                            HorizontalDivider()
                        }
                    }
                }
            }

            FilledTonalIconButton(
                onClick = onResetButtonClicked
            ) {
                Icon(
                    imageVector = Icons.Default.Refresh,
                    contentDescription = "Reset KML multi-track"
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun TrackOptionsPreview() {
    SampleAppTheme {
        Surface {
            TrackSimulationOptions(
                isRecenterEnabled = true,
                isRecordButtonEnabled = true,
                onRecordButtonClicked = { },
                onRecenterClicked = { },
                onExportClicked = { },
                kmlTracksSize = 1,
                kmlTrackElementsFlow = MutableStateFlow(listOf())
            )
        }
    }
}

@Preview(showBackground = true)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun TrackBrowseOptionsPreview() {
    SampleAppTheme {
        Surface {
            TrackBrowseOptions(
                multiTrackGeometries = listOf(),
                onTrackSelected = { },
                onResetButtonClicked = { }
            )
        }
    }
}