How do I change the style of the map in a navigation view?

user_13186791 0
Viewed 270

I am implementing the mapbox maps and the mapbox navigation by using these imports:

    implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.5.0'
    implementation 'com.mapbox.mapboxsdk:mapbox-android-navigation-ui:0.42.6'

I have map with a self made map style, from which I select a destination location and launch the navigation activity.

button.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        boolean simulateRoute = false;
                        NavigationLauncherOptions options = NavigationLauncherOptions.builder()
                                .directionsRoute(currentRoute)
                                .shouldSimulateRoute(simulateRoute)
                                .build();
                        // Call this method with Context from within an Activity
                        NavigationLauncher.startNavigation(NavigationActivity.this, options);
                    }
                });

The navigation activity displays a map that has a style that does not match the one I used in the map that I used to start the navigation activity. How can I change the style of the map in the navigation view to match the one I used for the map that selected the destination.

mapbox navigation android styles
1 Answers

It's (fortunately) not too tricky to do - it's a matter of creating a new style (in styles.xml) for this purpose.

Something like this: (an excerpt from Mapbox's guides/documentation)

[style.xml]

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<!-- Mapbox Navigation style. Loads more items can be styled simply by adding them below. -->    
<style name="NavigationView" parent="Theme.AppCompat.NoActionBar">
    <item name="navigationViewPrimary">@color/mapboxWhite</item>
    <item name="navigationViewSecondary">@color/mapboxBlue</item>
    <item name="navigationViewAccent">@color/mapboxPink</item>
</style>

As mentioned in the code excerpt above, it is possible to style a lot (almost all) of the UI using the method above. An in-depth rundown of what's possible when it comes to styling the Navigation UI SDK can be found at the following URL: https://docs.mapbox.com/android/navigation/guides/styles/

In addition to the above, it appears to be possible to specify both light and dark styles via the NavigationLauncherOptions.Builder, if that's something of interest. Further info on that, here.

I sincerely hope that helps, and welcome to SO!

user_56928770
Related