Skip to main content

Change Navigation View Options at runtime

Additional Developer Resources
Note

This example is a part of the Navigation SDK Examples. You can find the values for all referenced resources in the res directory. For example, see res/values/strings.xml for R.string.* references used in this example. The dependencies can be found here.The examples use View binding.See setup documention if necessary.

mapbox_activity_customize_navigationview_options
github View on GitHub
<?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/toggleOptions"
      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>
CustomNavigationViewOptionsActivity.kt
github View on GitHub
package com.mapbox.navigation.examples.dropinui.styling

import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.maps.Style
import com.mapbox.navigation.dropin.ViewOptionsCustomization
import com.mapbox.navigation.dropin.ViewOptionsCustomization.Companion.defaultRouteArrowOptions
import com.mapbox.navigation.dropin.ViewOptionsCustomization.Companion.defaultRouteLineOptions
import com.mapbox.navigation.examples.databinding.MapboxActivityCustomizeNavigationviewOptionsBinding
import com.mapbox.navigation.ui.maps.NavigationStyles
import com.mapbox.navigation.ui.maps.route.RouteLayerConstants
import com.mapbox.navigation.ui.maps.route.arrow.model.RouteArrowOptions
import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineOptions
import com.mapbox.navigation.ui.maps.route.line.model.RouteLineColorResources
import com.mapbox.navigation.ui.maps.route.line.model.RouteLineResources

/**
 * The example demonstrates how to use [ViewOptionsCustomization] to customize the options for
 * selective UI components 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 apply custom options
 */
class CustomNavigationViewOptionsActivity : AppCompatActivity() {

    private lateinit var binding: MapboxActivityCustomizeNavigationviewOptionsBinding
    private var toggleCustomOptions = false

    private val routeLineOptions: MapboxRouteLineOptions by lazy {
        MapboxRouteLineOptions.Builder(this)
            .withRouteLineResources(
                RouteLineResources.Builder()
                    .routeLineColorResources(
                        RouteLineColorResources.Builder()
                            .routeLowCongestionColor(Color.YELLOW)
                            .routeCasingColor(Color.RED)
                            .build()
                    )
                    .build()
            )
            // make sure to use the correct layerId based on the map styles
            .withRouteLineBelowLayerId("road-label") // for Style.LIGHT and Style.DARK
            .withVanishingRouteLineEnabled(true)
            .displaySoftGradientForTraffic(true)
            .build()
    }

    private val routeArrowOptions by lazy {
        RouteArrowOptions.Builder(this)
            .withAboveLayerId(RouteLayerConstants.TOP_LEVEL_ROUTE_LINE_LAYER_ID)
            .withArrowColor(Color.RED)
            .build()
    }

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

        binding.navigationView.api.routeReplayEnabled(true)

        binding.toggleOptions.setOnClickListener {
            binding.navigationView.customizeViewOptions {
                toggleCustomOptions = if (toggleCustomOptions) {
                    routeLineOptions = defaultRouteLineOptions(applicationContext)
                    routeArrowOptions = defaultRouteArrowOptions(applicationContext)
                    mapStyleUriDay = NavigationStyles.NAVIGATION_DAY_STYLE
                    mapStyleUriNight = NavigationStyles.NAVIGATION_NIGHT_STYLE
                    false
                } else {
                    routeLineOptions = this@CustomNavigationViewOptionsActivity.routeLineOptions
                    routeArrowOptions = this@CustomNavigationViewOptionsActivity.routeArrowOptions
                    mapStyleUriDay = Style.LIGHT
                    mapStyleUriNight = Style.DARK
                    true
                }
            }
        }
    }
}
Additional Developer Resources
Was this example helpful?