CODEWITHSUNDEEP
androidmapboxmapbox-android
Pratik Butani
Pratik Butani

Reputation: 62411

Mapbox NavigationView UI set Dark Mode with Route Color to Red

I have implemented latest Mapbox Library with Navigation UI as follow.

implementation "com.mapbox.navigation:ui:1.5.1"
implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.1'

Link of documentation:

What I have implemented:

XML:

<com.mapbox.navigation.ui.NavigationView
    android:id="@+id/navigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/ll_nav"
    mapbox:mapbox_cameraZoom="15" />

and Output is:

enter image description here

I want that MAP in DARK Mode with Red color of Route Direction. I tried many solutions of older library versions but I didn't found any clue for newer one. I have also tried to implement Style but not working for NavigationView.

Can anyone please help?

Upvotes: 1

Views: 905

Answers (1)

Bipin Vayalu
Bipin Vayalu

Reputation: 3145

I think you should checkout this navigation style and guide link to customise it using Android standard way of style. (Same link you shared in your question. You just need to use their provided app:navigationDarkTheme attributes and inherit their default style.

<com.mapbox.navigation.ui.NavigationView
        android:id="@+id/navigationView"
        app:navigationDarkTheme="@style/CustomNavigationViewDark"
        app:navigationLightTheme="@style/CustomNavigationViewDark"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ll_nav"
        mapbox:mapbox_cameraZoom="15" />

CustomNavigationViewDark:

<style name="CustomNavigationViewDark" parent="MapboxStyleNavigationViewDark">
        <!-- The main turn banner view at the top of the screen -->
        <!-- Background color of the banner -->
        <item name="navigationViewBannerBackground">#FFFFFF</item>
        <!-- Color for the primary label that displays the turn name -->
        <item name="navigationViewBannerPrimaryText">#37516F</item>
        <!-- Color for the secondary label that occasionally appears underneath the primary label -->
        <item name="navigationViewBannerSecondaryText">#E637516F</item>
        <!-- Primary color for the turn arrow icons-->
        <item name="navigationViewBannerManeuverPrimary">#37516F</item>
        <!-- Secondary color for the turn arrow icons (e.g. the line segment that forks off) -->
        <item name="navigationViewBannerManeuverSecondary">#4D37516F</item>
        <!-- Alternate background color for the dropdown list of upcoming steps -->
        <item name="navigationViewListBackground">#FAFAFA</item>

        <!-- The summary view along the bottom of the screen -->
        <!-- Background color of the summary view -->
        <item name="navigationViewPrimary">@color/mapboxWhite</item>
        <!-- Tint color for icons in the summary view -->
        <item name="navigationViewSecondary">@color/mapboxBlue</item>
        <!-- Accent color for elements such as the recenter button -->
        <item name="navigationViewAccent">@color/mapboxPink</item>
        <!-- Color for the main duration label in the summary view -->
        <item name="navigationViewPrimaryText">#424242</item>
        <!-- Color for the secondary distance and ETA label in the summary view -->
        <item name="navigationViewSecondaryText">#424242</item>

        <!-- Custom colors for progress bars displayed during navigation -->
        <item name="navigationViewProgress">@color/red</item>
        <item name="navigationViewProgressBackground">@color/red</item>

        <!-- Custom colors for the route line and traffic -->
        <item name="navigationViewRouteStyle">@style/CustomNavigationMapRoute</item>

        <!-- Map style -->
        <item name="navigationViewMapStyle">mapbox://styles/bipinnt/ckp9cn6f10zyk17pk5gnxpelu</item>

        <!-- Other components -->
<!--        <item name="navigationViewDivider">#4882C6</item>-->
<!--        <item name="navigationViewRouteOverviewDrawable">#FAFAFA</item>-->
<!--        <item name="navigationViewDestinationMarker">@drawable/map_marker_light</item>-->
<!--        <item name="navigationViewLocationLayerStyle">@style/NavigationLocationLayerStyle</item>-->
    </style>

I hope this will resolve your issue/queries related to customisation of NavigationView.

Upvotes: 1

Related Questions