Navigation Style and Theme

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>

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>

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>

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>

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

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>

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>

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>

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

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

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());

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

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

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>

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

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

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

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