Customize the design of action buttons using Navigation View | Navigation SDK v2 | Android Docs

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.

mapbox_activity_customize_action_buttons

github View on GitHub

<?xml version="1.0" encoding="utf-8"?>
<com.mapbox.navigation.dropin.NavigationView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/navigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:accessToken="@string/mapbox_access_token" />

CustomActionButtonsActivity.kt

github View on GitHub

package com.mapbox.navigation.examples.dropinui.viewreplacement

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.navigation.examples.R
import com.mapbox.navigation.examples.databinding.MapboxActivityCustomizeActionButtonsBinding

class CustomActionButtonsActivity : AppCompatActivity() {

    private lateinit var binding: MapboxActivityCustomizeActionButtonsBinding

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

        binding.navigationView.api.routeReplayEnabled(true)

        binding.navigationView.customizeViewStyles {
            audioGuidanceButtonStyle = R.style.MapboxStyleAudioGuidanceButton_Circle
            cameraModeButtonStyle = R.style.MapboxStyleCameraModeButton_Circle
            recenterButtonStyle = R.style.MapboxStyleRecenterButton_Circle
            startNavigationButtonStyle = R.style.MyCustomStartNavigationButtonCircular
            endNavigationButtonStyle = R.style.MyCustomEndNavigationButtonCircular
            routePreviewButtonStyle = R.style.MyCustomRoutePreviewButtonCircular
        }
    }
}

Was this example helpful?