> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/navigation/v2/llms.txt)

# Customize runtime styling of UI components using NavigationView

![The example demonstrates how to customize styling of default UI Components at runtime.](https://docs.mapbox.com/android/assets/ideal-img/navigation-drop-in-ui-runtime-styling.b95e446.480.jpg)

> **Note**
> 
> This example is a part of the [Navigation SDK Examples](https://github.com/mapbox/mapbox-navigation-android-examples). You can find the values for all referenced resources in the [`res`](https://github.com/mapbox/mapbox-navigation-android-examples/tree/main-v2/app/src/main/res) directory. For example, see [`res/values/strings.xml`](https://github.com/mapbox/mapbox-navigation-android-examples/tree/main-v2/app/src/main/res/values/strings.xml) for `R.string.*` references used in this example. The dependencies can be found [here.](https://github.com/mapbox/mapbox-navigation-android-examples/blob/main/app/build.gradle) The examples use View binding. [See setup documention if necessary.](https://developer.android.com/topic/libraries/view-binding)

Title: `mapbox_activity_custom_runtime_styling`

[View on GitHub](https://github.com/mapbox/mapbox-navigation-android-examples/tree/main-v2/app/src/main/java/com/mapbox/navigation/examples/dropinui/styling/res/layout/mapbox_activity_custom_runtime_styling.xml)

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

  <com.mapbox.navigation.dropin.NavigationView
      android:id="@+id/navigationView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:accessToken="@string/mapbox_access_token" />

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/toggleStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="16dp"
      android:layout_marginBottom="120dp"
      android:src="@drawable/mapbox_ic_customize"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      tools:ignore="ContentDescription"
      />
</androidx.constraintlayout.widget.ConstraintLayout>
```

**Kotlin**

Title: `CustomRuntimeStylingActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-navigation-android-examples/tree/main-v2/app/src/main/java/com/mapbox/navigation/examples/dropinui/styling/CustomRuntimeStylingActivity.kt)

```kt
package com.mapbox.navigation.examples.dropinui.styling

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import androidx.core.graphics.drawable.toBitmap
import com.mapbox.maps.plugin.annotation.generated.PointAnnotationOptions
import com.mapbox.navigation.dropin.ViewStyleCustomization
import com.mapbox.navigation.examples.R
import com.mapbox.navigation.examples.databinding.MapboxActivityCustomRuntimeStylingBinding

/**
 * The example demonstrates how to use change the styling of default UI components supported by
 * `NavigationView` at runtime.
 *
 * Before running the example make sure you have put your access_token in the correct place
 * inside [app-preview/src/main/res/values/mapbox_access_token.xml]. If not present then add
 * this file at the location mentioned above and add the following content to it
 *
 * <?xml version="1.0" encoding="utf-8"?>
 * <resources xmlns:tools="http://schemas.android.com/tools">
 *     <string name="mapbox_access_token"><PUT_YOUR_ACCESS_TOKEN_HERE></string>
 * </resources>
 *
 * The example uses replay location engine to facilitate navigation without physically moving.
 *
 * How to use the example:
 * - Start the example
 * - Grant the location permissions if not already granted
 * - Press on the floating button in the bottom right to toggle runtime styling
 */
class CustomRuntimeStylingActivity : AppCompatActivity() {

    private lateinit var binding: MapboxActivityCustomRuntimeStylingBinding
    private var isCustomStyle = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = MapboxActivityCustomRuntimeStylingBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.navigationView.api.routeReplayEnabled(true)

        binding.toggleStyle.setOnClickListener {
            binding.navigationView.customizeViewStyles {
                isCustomStyle = if (isCustomStyle) {
                    tripProgressStyle = ViewStyleCustomization.defaultTripProgressStyle()
                    speedLimitStyle = ViewStyleCustomization.defaultSpeedLimitStyle()
                    speedLimitTextAppearance =
                        ViewStyleCustomization.defaultSpeedLimitTextAppearance()
                    destinationMarkerAnnotationOptions =
                        ViewStyleCustomization.defaultDestinationMarkerAnnotationOptions(
                            this@CustomRuntimeStylingActivity
                        )
                    roadNameBackground = ViewStyleCustomization.defaultRoadNameBackground()
                    roadNameTextAppearance = ViewStyleCustomization.defaultRoadNameTextAppearance()
                    audioGuidanceButtonStyle =
                        ViewStyleCustomization.defaultAudioGuidanceButtonStyle()
                    recenterButtonStyle = ViewStyleCustomization.defaultRecenterButtonStyle()
                    cameraModeButtonStyle = ViewStyleCustomization.defaultCameraModeButtonStyle()
                    routePreviewButtonStyle =
                        ViewStyleCustomization.defaultRoutePreviewButtonStyle()
                    endNavigationButtonStyle =
                        ViewStyleCustomization.defaultEndNavigationButtonStyle()
                    startNavigationButtonStyle =
                        ViewStyleCustomization.defaultStartNavigationButtonStyle()
                    false
                } else {
                    tripProgressStyle = R.style.MyCustomTripProgressStyle
                    speedLimitStyle = R.style.MyCustomSpeedLimitStyle
                    speedLimitTextAppearance = R.style.MyCustomSpeedLimitTextAppearance
                    destinationMarkerAnnotationOptions = PointAnnotationOptions().apply {
                        withIconImage(
                            ContextCompat.getDrawable(
                                this@CustomRuntimeStylingActivity,
                                R.drawable.mapbox_ic_marker
                            )!!.toBitmap()
                        )
                    }
                    roadNameBackground = R.drawable.mapbox_bg_road_name
                    roadNameTextAppearance = R.style.MyCustomRoadNameViewTextAppearance
                    audioGuidanceButtonStyle = R.style.MyCustomAudioGuidanceButton
                    recenterButtonStyle = R.style.MyCustomRecenterButton
                    cameraModeButtonStyle = R.style.MyCustomCameraModeButton
                    endNavigationButtonStyle = R.style.MyCustomEndNavigationButton
                    routePreviewButtonStyle = R.style.MyCustomRoutePreviewButton
                    startNavigationButtonStyle = R.style.MyCustomStartNavigationButton
                    true
                }
            }
        }
    }
}
```