Navigation Style and Theme

This section of the Android Navigation SDK guide discusses the process of customizing the Navigation Style and Theme to suit the unique branding and visual identity of the application. It covers a range of topics, such as attributes, Navigation View anatomy, attribute-to-UI mapping, and customization of styles, colors, and icons. Through this section, developers can acquire knowledge on how to apply custom styles and themes to the Navigation UI, enabling them to create a unique and personalized experience for users.

Attributes

This is a list of attributes that can be used to customize the appearance of a navigation view in an application that utilizes the NextBillion.ai Navigation SDK. Each attribute has a unique number, name, and type. The attributes are organized into six groups:

• Navigation View: The Navigation View attributes allow developers to customize the primary and secondary colors, text color and accent color.

• Instruction List: Instruction List attributes allow developers to customize the background color, primary and secondary text color and primary and secondary maneuver color.

• Banner: Banner attributes allow developers to customize the background color, secondary background color, primary and secondary text color, primary and secondary maneuver color.

• Sound button: Sound button attributes allow developers to customize the color and background color of the sound button.

• Speedometer: Speedometer attributes allow developers to customize the background color, text color and unit text color of the speedometer.

• Others: Other attributes allow developers to customize the appearance of the destination marker, route overview, recenter background, recenter info color, user location style, route style, and map style.

To learn more about attributes in Android, please refer to the Android official docs: Styles and Themes and Create a view class.

• Navigation View: The Navigation View attributes allow developers to customize the primary and secondary colors, text color and accent color.

• Instruction List: Instruction List attributes allow developers to customize the background color, primary and secondary text color and primary and secondary maneuver color.

• Banner: Banner attributes allow developers to customize the background color, secondary background color, primary and secondary text color, primary and secondary maneuver color.

• Sound button: Sound button attributes allow developers to customize the color and background color of the sound button.

• Speedometer: Speedometer attributes allow developers to customize the background color, text color and unit text color of the speedometer.

• Others: Other attributes allow developers to customize the appearance of the destination marker, route overview, recenter background, recenter info color, user location style, route style, and map style.

To learn more about attributes in Android, please refer to the Android official docs: Styles and Themes and Create a view class. These attributes give developers a high degree of control over the appearance of the navigation view, enabling them to create a visually pleasing and user-friendly navigation experience that is fully consistent with the branding and design of their application.

Anatomy of the Navigation View

This is an anatomy of the Navigation View in an application that utilizes the NextBillion.ai Navigation SDK. The navigation view is broken down into several components, each of which can be customized using specific attributes. These attributes are organized into groups such as Banner, Bottom Summary, Recenter button, Sound button, Route line, Destination Marker, User location, Instruction list, Map Style and Speedometer. Each component has a unique number, example, and description.

For example, the Banner component, which displays the current step and maneuver, can be customized using attributes such as navViewBannerBackground, navViewBannerPrimaryText, navViewBannerManeuverPrimary and navViewBannerSecondaryText.

The Bottom Summary component, which displays the remaining time and distance, can be customized using attributes such as navViewPrimary, navViewRouteOverviewBackground, and navViewSecondaryText. The Recenter button component can be customized using the navigationViewReCentreInfoColor attribute. The Sound button component can be customized using attributes such as navViewSoundColor, navViewSoundBackgroundColor, navViewSoundColor and navViewSoundColor. The Route line component can be customized using attributes such as navViewRouteStyle, routeColor, routeShieldColor and routeScale.

The Destination Marker, User location, Instruction list, Map Style and Speedometer components can also be customized using specific attributes. To understand what and how we can modify in the navigation view, let’s break it down into pieces:

No.	Example		Description	Attribute
1			Banner	Background color: navViewBannerBackground
	1.1	Commonwealth Avenue West	Primary step	navViewBannerPrimaryText
	1.2		Manuever Icon	navViewBannerManeuverPrimary
	1.3	100m	Distance text	navViewBannerSecondaryText
	1.4		Then step instruction Then step text	1.4.1 Background color: navViewBannerSecondaryBackground 1.4.2 Step text: navViewBannerSecondaryText
	1.5		Turn lanes
2			Bottom Summary BackGroud Color	navViewPrimary
	2.1		Route Preview	navViewRouteOverviewBackground navViewRouteOverviewDrawable
	2.2		Exit	(TBD)
	2.2	1 min	Remaining time	navViewPrimaryText
	2.2	20 m . 9:56 AM	Remaining distance & Arrival time	navViewSecondaryText
3			Recenter button Recenter text	navigationViewReCentreInfoColor
4			Sound button	navViewSoundColor navViewSoundBackgroundColor
	4.1		Sound button text	navViewSoundColor
	4.2		Sound button text	navViewSoundColor
5			Route line	navViewRouteStyle 5.0.1 route color:           routeColor 5.0.2 route shield color:           routeShieldColor 5.0.3 route scale:           routeScale
	5.1		Maneuver arrow	​​maneuverArrowColor maneuverArrowBorderColor
6			Destination Marker	navDestinationMarker
7			User location	navViewUserLocationStyle -> nbmap_LocationComponent -> nbmap_gpsDrawable
8			Instruction list	navViewListBackground
	8.1		Instruction list item text	navViewListPrimary navViewListSecondary
	8.2		Instruction list item maneuver	navViewListManeuverPrimary navViewListManeuverSecondary
9			Map Style	navViewMapStyle
10			Speedometer	navigationCurrentSpeedBackgroundColor
	10.1	63	Driving speed	navigationCurrentSpeedTextColor
	10.2	km/h	Speed unit	navigationCurrentSpeedUnitTextColor

These attributes give developers a high degree of control over the appearance of the navigation view, enabling them to create a visually pleasing and user-friendly

Mapping between attributes and UI

This is a mapping between attributes and the User Interface (UI) of NavigationView. The table lists various attributes and their corresponding UI components that they affect. For example, the attribute navViewPrimary is used to customize the background color of the Bottom Summary, Sound button and the attribute navViewSecondary is used to customize the Sound button text.

This table helps developers to easily identify which attribute they should use to customize a specific part of the UI. By using these attributes, developers can easily control the visual appearance of the navigation view and create a user-friendly and visually pleasing navigation experience that is consistent with the branding and design of their application.

navViewRouteStyle

The Navigation SDK has a "NavigationMapRoute" styleable that allows developers to customize the colors and appearance of the primary route, alternative route, dashed route, dissolved route, wayname chip, and waypoint drawables. The attributes include route color, route congestion color, route shield color, alternative route color, route scale, alternative route scale, maneuver arrow color, line cap, off route dot color, and more. Developers can define these attributes in a style resource file and apply it to the NavigationMapRoute element in the layout file.

1
<declare-styleable name="NavigationMapRoute">
2
    <!-- Primary route colors -->
3
    <attr name="routeColor" format="color" />
4
    <attr name="routeModerateCongestionColor" format="color" />
5
    <attr name="routeSevereCongestionColor" format="color" />
6
    <attr name="routeShieldColor" format="color" />
7

8

9
    <!-- Alternative route colors -->
10
    <attr name="alternativeRouteColor" format="color" />
11
    <attr name="alternativeRouteModerateCongestionColor" format="color" />
12
    <attr name="alternativeRouteSevereCongestionColor" format="color" />
13
    <attr name="alternativeRouteShieldColor" format="color" />
14

15

16
    <attr name="routeFloatDurationBackgroundPrimary" format="color" />
17
    <attr name="routeFloatDurationTextPrimary" format="color" />
18
    <attr name="routeFloatDurationBackgroundAlternative" format="color" />
19
    <attr name="routeFloatDurationTextAlternative" format="color" />
20

21

22
    <attr name="routeWayNameTextColor" format="color"/>
23
    <attr name="routeWayNameBackGroundColor" format="color"/>
24

25

26
    <!-- Dash line colors -->
27
    <attr name="dashLineColor" format="color" />
28

29

30
    <!-- Origin/Destination waypoint drawables -->
31
    <attr name="originWaypointIcon" format="reference" />
32
    <attr name="destinationWaypointIcon" format="reference" />
33

34

35
    <!-- Route Scales -->
36
    <attr name="routeScale" format="float" />
37
    <attr name="alternativeRouteScale" format="float" />
38
    <attr name="dashLineScale" format="float" />
39

40

41
    <attr name="maneuverArrowColor" format="color" />
42
    <attr name="maneuverArrowBorderColor" format="color" />
43

44

45
    <!-- Rounded route line cap -->
46
    <attr name="roundedLineCap" format="boolean" />
47

48

49
    <attr name="offRouteDotColor" format="color" />
50
    <attr name="navigationDissolvedRouteColor" format="color" />
51
    <attr name="navigationDissolvedAnimatedRouteColor" format="color" />
52
</declare-styleable>

we can categorize the attributes into these groups:

• Primary route line

• alternative route line

• dashed route line

• dissolved route line

• wayname chip

• waypoint drawables

• Route scales

• maneuver arrow

• line cap

• off route dot

A minimum example as below:

1
<style name="xxx">
2
...
3
<attr name="routeColor"                   format="color"/>
4
<attr name="routeModerateCongestionColor" format="color"/>
5
<attr name="routeSevereCongestionColor"   format="color"/>
6
<attr name="routeShieldColor"             format="color"/>
7
<attr name="routeScale"                   format="float"/>
8
<attr name="alternativeRouteScale"        format="float"/>
9
...
10
</style>

navViewUserLocationStyle

A style reference to customize the location component, location component is a part of the Maps SDK. The nbmap_LocationComponent is a styleable attribute that allows developers to customize the appearance of the location component in the Maps SDK. The attribute contains various options such as foreground and background drawables, tint colors, accuracy settings, and animation settings for the location icon, accuracy circle, and compass. Developers can also set options such as stale state timeout, icon padding, and layer configuration. Additionally, they can set options such as icon scale based on map zoom levels, camera tracking settings, and animation duration multiplier.

1
<declare-styleable name="nbmap_LocationComponent">
2
    <attr name="nbmap_foregroundDrawable" format="reference" />
3
    <attr name="nbmap_foregroundTintColor" format="color" />
4
    <attr name="nbmap_backgroundDrawable" format="reference" />
5
    <attr name="nbmap_backgroundTintColor" format="color" />
6
    <attr name="nbmap_bearingDrawable" format="reference" />
7
    <attr name="nbmap_bearingTintColor" format="color" />
8
    <attr name="nbmap_gpsDrawable" format="reference" />
9

10

11
    <attr name="nbmap_foregroundDrawableStale" format="reference" />
12
    <attr name="nbmap_foregroundStaleTintColor" format="color" />
13
    <attr name="nbmap_backgroundDrawableStale" format="reference" />
14
    <attr name="nbmap_backgroundStaleTintColor" format="color" />
15

16

17
    <attr name="nbmap_accuracyAlpha" format="float" />
18
    <attr name="nbmap_accuracyColor" format="color" />
19

20

21
    <attr name="nbmap_elevation" format="dimension" />
22

23

24
    <!-- Stale state -->
25
    <attr name="nbmap_enableStaleState" format="boolean" />
26
    <attr name="nbmap_staleStateTimeout" format="integer" min="0" />
27

28

29
    <!-- Location icon padding -->
30
    <attr name="nbmap_iconPaddingLeft" format="integer" />
31
    <attr name="nbmap_iconPaddingTop" format="integer" />
32
    <attr name="nbmap_iconPaddingRight" format="integer" />
33
    <attr name="nbmap_iconPaddingBottom" format="integer" />
34

35

36
    <!-- Map layer configuration -->
37
    <attr name="nbmap_layer_above" format="string" />
38
    <attr name="nbmap_layer_below" format="string" />
39

40

41
    <!-- Icon scale based on map zoom levels -->
42
    <attr name="nbmap_maxZoomIconScale" format="float" />
43
    <attr name="nbmap_minZoomIconScale" format="float" />
44

45

46
    <!-- Camera tracking settings -->
47
    <attr name="nbmap_trackingGesturesManagement" format="boolean" />
48
    <attr name="nbmap_trackingInitialMoveThreshold" format="dimension" />
49
    <attr name="nbmap_trackingMultiFingerMoveThreshold" format="dimension" />
50

51

52
    <!-- Animation duration multiplier -->
53
    <attr name="nbmap_trackingAnimationDurationMultiplier" format="float" />
54

55

56
    <!-- Compass animation -->
57
    <attr name="nbmap_compassAnimationEnabled" format="boolean" />
58

59

60
    <!-- Accuracy animation-->
61
    <attr name="nbmap_accuracyAnimationEnabled" format="boolean" />
62

63

64
    <!-- Pulsing circle -->
65
    <attr name="nbmap_pulsingLocationCircleEnabled" format="boolean" />
66
    <attr name="nbmap_pulsingLocationCircleFadeEnabled" format="boolean" />
67
    <attr name="nbmap_pulsingLocationCircleColor" format="color" />
68
    <attr name="nbmap_pulsingLocationCircleDuration" format="float" />
69
    <attr name="nbmap_pulsingLocationCircleRadius" format="float" />
70
    <attr name="nbmap_pulsingLocationCircleAlpha" format="float" />
71
    <attr name="nbmap_pulsingLocationCircleInterpolator" format="string" />
72

73

74
</declare-styleable>

the default style of location component

1
<style name="nbmap_LocationComponent">
2
  <item name="nbmap_foregroundDrawable">@drawable/nbmap_user_icon</item>
3
  <item name="nbmap_backgroundDrawable">@drawable/nbmap_user_stroke_icon</item>
4
  <item name="nbmap_bearingDrawable">@drawable/nbmap_user_bearing_icon</item>
5
  <item name="nbmap_gpsDrawable">@drawable/nbmap_user_puck_icon</item>
6

7

8
  <item name="nbmap_foregroundDrawableStale">@drawable/nbmap_user_icon_stale</item>
9
  <item name="nbmap_backgroundDrawableStale">@drawable/nbmap_user_stroke_icon</item>
10

11

12
  <item name="nbmap_accuracyAlpha">0.15</item>
13
  <item name="nbmap_accuracyColor">@color/nbmap_location_layer_blue</item>
14

15

16
  <item name="nbmap_elevation">12dp</item>
17

18

19
  <item name="nbmap_enableStaleState">true</item>
20
  <item name="nbmap_staleStateTimeout">30000</item>
21

22

23
  <!-- Location icon padding -->
24
  <item name="nbmap_iconPaddingLeft">0</item>
25
  <item name="nbmap_iconPaddingTop">0</item>
26
  <item name="nbmap_iconPaddingRight">0</item>
27
  <item name="nbmap_iconPaddingBottom">0</item>
28

29

30
  <!-- Location icon scale based on map zoom levels -->
31
  <item name="nbmap_maxZoomIconScale">1</item>
32
  <item name="nbmap_minZoomIconScale">0.6</item>
33

34

35
  <!-- Camera tracking settings -->
36
  <item name="nbmap_trackingGesturesManagement">false</item>
37
  <item name="nbmap_trackingInitialMoveThreshold">@dimen/nbmap_locationComponentTrackingInitialMoveThreshold</item>
38
  <item name="nbmap_trackingMultiFingerMoveThreshold">@dimen/nbmap_locationComponentTrackingMultiFingerMoveThreshold</item>
39

40

41
  <!-- Location pulsing circle -->
42
  <item name="nbmap_pulsingLocationCircleEnabled">false</item>
43
  <item name="nbmap_pulsingLocationCircleFadeEnabled">true</item>
44
  <item name="nbmap_pulsingLocationCircleColor">@color/nbmap_location_layer_blue</item>
45
  <item name="nbmap_pulsingLocationCircleDuration">2300</item>
46
  <item name="nbmap_pulsingLocationCircleRadius">35</item>
47
  <item name="nbmap_pulsingLocationCircleAlpha">0.4</item>
48
  <item name="nbmap_pulsingLocationCircleInterpolator">decelerate</item>
49

50
</style>

navViewMapStyle

navViewMapStyle is an attribute used to configure the base map's style in the Navigation SDK. It is a string value that corresponds to a Mapbox Style, which can be customized as per the user's needs. This attribute is typically included in a style resource file and can be set to any valid Mapbox style URL or local style file. A string value to configure the base map's style(Mapbox's Style https://docs.mapbox.com/help/glossary/style/)

In the example provided, the attribute is being set within a custom style called "CustomisedNavigationViewLight" which extends the "NavigationViewLight" style.

1
<style name="CustomisedNavigationViewLight" parent="NavigationViewLight">
2
    ...
3
<item name="navViewMapStyle">@string/xxx</item>
4
    ...
5
</style>

An example of a Navigation Theme

Example Style

This is an example of a custom theme for the NavigationView in the Navigation SDK. It extends the "Theme.AppCompat.Light.NoActionBar" parent theme and overrides various color and drawable attributes for the various elements of the NavigationView, such as the primary and secondary colors, text colors, banner background, route style, map style, sound button colors, location layer style and destination marker. Additionally, it also includes the attributes for the location speedometer like background color, text color, and unit text color. Developers can use this theme as a starting point to customize the appearance of the NavigationView to match their desired look and feel.

1
<style name="navViewLight" parent="Theme.AppCompat.Light.NoActionBar">
2
   <item name="navViewPrimary">                         @color/placeholder</item>
3
   <item name="navViewSecondary">                       @color/placeholder</item>
4
   <item name="navViewAccent">                          @color/placeholder</item>
5
   <item name="navViewPrimaryText">                     @color/placeholder</item>
6
   <item name="navViewSecondaryText">                   @color/placeholder</item>
7
   <item name="navViewDivider">                         @color/placeholder</item>
8
   <item name="navViewBannerBackground">                @color/placeholder</item>
9
   <item name="navViewBannerPrimaryText">               @color/placeholder</item>
10
   <item name="navViewBannerSecondaryText">             @color/placeholder</item>
11
   <item name="navViewBannerManeuverPrimary">           @color/placeholder</item>
12
   <item name="navViewBannerManeuverSecondary">         @color/placeholder</item>
13
   <item name="navViewProgress">                        @color/placeholder</item>
14
   <item name="navViewProgressBackground">              @color/placeholder</item>
15
   <item name="navViewRouteStyle">                      @style/NavigationMapRoute</item>
16
   <item name="navViewLocationLayerStyle">              @style/NavigationLocationLayerStyle</item>
17
   <item name="navViewDestinationMarker">               @drawable/placeholder</item>
18
   <item name="navViewRouteOverviewDrawable">           @drawable/placeholder</item>
19
   <item name="navViewMapStyle">                        @string/placeholder</item>
20
   <item name="navViewSoundColor">                      @color/placeholder</item>
21
   <item name="navViewSoundBackgroundColor">            @color/placeholder</item>
22
   <item name="navViewBannerSecondaryBackground">       @color/placeholder</item>
23
   <item name="navViewListBackground">                  @color/placeholder</item>
24
   <item name="navViewListPrimary">                     @color/placeholder</item>
25
   <item name="navViewListSecondary">                   @color/placeholder</item>
26
   <item name="navViewListManeuverPrimary">             @color/placeholder</item>
27
   <item name="navViewListManeuverSecondary">           @color/placeholder</item>
28
   <item name="navigationCurrentSpeedBackgroundColor">  @color/placeholder</item>
29
   <item name="navigationCurrentSpeedTextColor">        @color/placeholder</item>
30
   <item name="navigationCurrentSpeedUnitTextColor">    @color/placeholder</item>
31

32
</style>

Route Style

This is a style for the route line in the Navigation SDK. It defines various attributes for customizing the appearance of the route line, such as the primary and alternate route colors, route shield color, route scale, maneuver arrow color, maneuver arrow border color, and whether to use a rounded line cap for the route line. These attributes can be set to specific colors or dimensions as specified in the example. Developers can use this style to customize the look and feel of the route line according to their preferences.

1
<style name="NavigationMapRoute">
2
   <item name="routeColor">                   @color/placeholder</item>
3
   <item name="routeModerateCongestionColor"> @color/placeholder</item>
4
   <item name="routeSevereCongestionColor">   @color/placeholder</item>
5
   <item name="routeShieldColor">             @color/placeholder</item>
6
   <item name="routeScale">                                  1.0</item>
7
   <item name="maneuverArrowColor">           @color/placeholder</item>
8
   <item name="maneuverArrowBorderColor">     @color/placeholder</item>
9
   <item name="roundedLineCap">                             true</item>
10
</style>

Location Component Style

This is a style resource for the location component in the Maps SDK. It inherits from the base location component style and overrides specific attributes to customize the location layer. The example shows two attributes, nbmap_trackingAnimationDurationMultiplier and nbmap_trackingGesturesManagement. The first attribute sets the duration multiplier for location tracking animation, while the second attribute sets the gestures management for location tracking. This allows developers to fine-tune the behavior of the location layer to match the desired user experience.

1
<style name="NavigationLocationLayerStyle"parent="@style/nbmap_LocationComponent">
2
 <item name="nbmap_trackingAnimationDurationMultiplier">       1.1</item>
3
 <item name="nbmap_trackingGesturesManagement">               true</item>
4
</style>

For more details of the parent location component(@style/nbmap_LocationComponent) please refer to this section.

Apply styles to the navigation view

To apply these attributes to the navigation view, first, we need to declare a light style and a dark style(if needed), and then pass them to the SDK

1
<style name="Your Light Style" parent="NavigationViewLight">
2
...
3
</style>

1
<style name="Your Dark Style" parent="NavigationViewDark">
2
...
3
</style>

Please note that the parent field will be required if you are not going to override all default attributes. And then pass the styles to the second page via NavLauncherConfig. The NavLauncherConfig.Builder is used to set the route, location layer render mode, light theme, dark theme, and theme mode. The theme mode can be set to "dark", "light", or "system" (default). Finally, the NavigationLauncher.startNavigation() method is called with the activity and the configBuilder.build() as parameters to start the navigation.

1
NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder();
2

3
configBuilder.route(route);
4
configBuilder.locationLayerRenderMode(RenderMode.GPS);
5

6
configBuilder.lightThemeResId(R.style.{Your Light Style name});
7
configBuilder.darkThemeResId(R.style.{Your Dark Style name});
8
configBuilder.themeMode(The theme mode you want to use, value can be "dark","light" and "system",the default value is system);
9

10

11
NavigationLauncher.startNavigation(activity, configBuilder.build());

Scenario breakdown

Use a different destination icon

A reference of Drawable value. This style definition is used to set the destination marker icon in the navigation view. The attribute "navViewDestinationMarker" accepts a reference to a Drawable. To change the destination marker, one can simply add an item in the style definition with the name "navViewDestinationMarker" and set it to the desired drawable resource.

1
<attr name="navViewDestinationMarker" format="reference"/>

To use other markers, we can simply add the line below to our style/theme. In the example provided, the destination marker is being set to a drawable resource named "dest_marker". This change will be reflected in the navigation view when the style is applied to the navigation view.

1
<style name="your style">
2
    ...
3
<item name="navViewDestinationMarker">@drawable/dest_marker</item>
4
    ...
5
</style>
6

Customize the route style

Colors & Size/Scale

This is an example of how to customize the colors and size/scale of the route line in the navigation view. The attributes specified in this example allow developers to change the color of the primary route line, the color of the route line when the traffic is moderate, the color of the route line when the traffic is severe, the color of the route shield, and the scale of the primary and alternative route lines. The values for these attributes can be set in a style by using the <item> tag and referencing a color or float resource. The result is that the route line in the navigation view will have custom colors and size/scale based on the specified values in the style.

1

2
<attr name="routeColor"                   format="color"/>
3
<attr name="routeModerateCongestionColor" format="color"/>
4
<attr name="routeSevereCongestionColor"   format="color"/>
5
<attr name="routeShieldColor"             format="color"/>
6
<attr name="routeScale"                   format="float"/>
7
<attr name="alternativeRouteScale"        format="float"/>
8

9

10
<style name="your route style">
11
    ...
12
<item name="routeColor">@color/xxx</item>
13
<item name="routeModerateCongestionColor">@color/xxx</item>
14
<item name="routeSevereCongestionColor">@color/xxx</item>
15
<item name="routeShieldColor">@color/xxx</item>
16
<item name="routeScale">1.0</item>
17
    ...
18
</style>
19

1
<style name="your style">
2
    ...
3
<item name="navViewRouteStyle">your route style</item>
4
    ...
5
</style>

Upcoming Maneuver arrow

This is an example of how to customize the color and border color of the upcoming maneuver arrow in a navigation view using a custom style. The attributes, upcomingManeuverArrowColor and upcomingManeuverArrowBorderColor are used to set the color and border color of the arrow respectively, and are included in your route style. The example also shows the default values of the other attributes related to the route and maneuver arrow, such as routeColor, routeShieldColor, routeModerateCongestionColor, routeSevereCongestionColor, maneuverArrowColor, maneuverArrowBorderColor, routeScale and roundedLineCap which are also used to customize the appearance of the route and arrow. To apply this custom style, it can be passed as an argument to the SDK's navigation view.

1
<attr name="upcomingManeuverArrowColor"       format="color"/>
2
<attr name="upcomingManeuverArrowBorderColor" format="color"/>

Example

1
<style name="your route style">
2
    ...
3
<item name="upcomingManeuverArrowColor">       @color/xxx</item>
4
<item name="upcomingManeuverArrowBorderColor"> @color/xxx</item>
5
    ...
6
</style>

the default values:

Customize the colors of banner instructions

This is an example of how to customize the colors of banner instructions in the Navigation SDK. The example shows four attributes that can be used to change the appearance of the instructions banner displayed during navigation: navViewBannerBackground, navViewBannerPrimaryText, navViewBannerSecondaryText, navViewBannerManeuverPrimary.

The navViewBannerBackground attribute is used to specify the background color of the banner. navViewBannerPrimaryText is used to set the color of the primary text, which is typically the name of the street or road the user is currently on. navViewBannerSecondaryText is used to set the color of the secondary text, which is typically the distance until the next maneuver. navViewBannerManeuverPrimary is used to set the color of the maneuver icon, which is typically an arrow pointing in the direction of the next maneuver.

For example, you can set the background color of the banner to white, the primary text color to black, the secondary text color to gray and the maneuver icon color to blue.

Customize the colors of the bottom summary and instructions list

This example is customizing the colors of the bottom summary and instructions list in the Navigation View.

No.	Property	Attribute Name	Reference
1	Time Remaining Text	navViewPrimaryText	1 min
2	Distance Remaining Text	navViewSecondaryText	0.5km
3	Arrival Time Text	navViewSecondaryText	17:56
4	Instruction List Background Color	navViewBannerBackground	White
5	Step Primary Text	navViewListPrimary	Dunearn Road
6	Step Distance Text	navViewListSecondary	150m
7	Instruction List Maneuver Primary	navViewListManeuverPrimary
8	Instruction List Maneuver Secondary	navViewListManeuverSecondary

Change the base map’s style

To configure the base maps’ style is straightforward, simply add the styleable attribute below to our style.

The attribute "navViewMapStyle" is used to customize the style of the base map displayed in the navigation view. The format is a string, which refers to the Mapbox's Style URL (https://docs.mapbox.com/help/glossary/style/).

1
<attr name="navViewMapStyle" format="string"/>

In the example, your navViewRouteStyle is being set to a string reference of your map style. This allows developers to easily switch between different map styles by changing the value of this attribute in their app's styles.

1
<style name="your style">
2
    ...
3
<item name="navViewMapStyle">a reference of your style(string value)</item>
4
    ...
5
</style>