• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Customize styling of the dissolved route line

Sets the style of the route you drive through during navigation

This example shows how to style the dissolved route line.

  • alternativeRouteScale

  • navigationDissolvedRouteColor

  • navigationDissolvedAnimatedRouteColor

For all code examples, refer to Navigation Code Examples

themes.xml view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<resources xmlns:tools="http://schemas.android.com/tools">
   <!-- Set dissolved route line style by navViewRouteStyle -->
   <style name="Theme.CustomNavDissolvedRouteline" parent="NavigationViewLight">
       <item name="navViewRouteStyle">@style/CustomNavDissolvedRouteLineStyle</item>
   </style>

   <style name="CustomNavDissolvedRouteLineStyle" parent="NavigationMapRoute">
       <!-- Is how many times the width of the normal route -->
       <item name="alternativeRouteScale">1.0</item>
       <!-- The colour of dissolved route line -->
       <item name="navigationDissolvedRouteColor">#FFFF0106</item>
       <!-- The current color of the animation effect in 1 second -->
       <item name="navigationDissolvedAnimatedRouteColor">#FF54E910</item>

   </style>
</resources>

CustomDissolvedLineStyleActivity view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
public class CustomDissolvedLineStyleActivity extends AppCompatActivity implements View.OnClickListener{

   private Button fetchRoute;
   private Button startNav;
   private TextView routeGeometry;
   private DirectionsRoute directionsRoute;
   private ProgressBar progress;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_custom_dissolved_line_style);

       fetchRoute = findViewById(R.id.fetchRoute);
       startNav = findViewById(R.id.startNav);
       routeGeometry = findViewById(R.id.routeGeometry);
       progress = findViewById(R.id.progress);
       fetchRoute.setOnClickListener(this);
       startNav.setOnClickListener(this);
       startNav.setEnabled(false);
   }

   @Override
   public void onClick(View view) {
       if (view.getId() == R.id.fetchRoute) {
           progress.setVisibility(View.VISIBLE);
           Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
           Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);

           NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
               @Override
               public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
                   progress.setVisibility(View.GONE);
                   //start navigation with the route we just fetched.
                   if (response.body() != null && !response.body().routes().isEmpty()) {
                       directionsRoute = response.body().routes().get(0);
                       routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
                       startNav.setEnabled(true);
                   }
               }

               @Override
               public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
                   progress.setVisibility(View.GONE);
               }
           });
       } else if (view.getId() == R.id.startNav) {
           NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
           configBuilder.locationLayerRenderMode(RenderMode.GPS);
           configBuilder.shouldSimulateRoute(true);
           // Set dissolved rout line styling by lightThemeResId resource
        configBuilder.lightThemeResId(R.style.Theme_CustomNavDissolvedRouteline);
           NavigationLauncher.startNavigation(CustomDissolvedLineStyleActivity.this, configBuilder.build());
       }
   }
}

activity_custom_dissolved_line_style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="10dp">

   <LinearLayout
       android:layout_width="wrap_content"
       android:orientation="vertical"
       android:layout_height="wrap_content">
       <Button
           android:id="@+id/fetchRoute"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="12sp"
           android:text="@string/fetch_route"/>

       <Button
           android:id="@+id/startNav"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="12sp"
           android:text="@string/start_navigation_with_custom_top_panel"/>
   </LinearLayout>

   <TextView
       android:id="@+id/routeGeometry"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="10dp"/>

   <ProgressBar
       android:id="@+id/progress"
       android:visibility="gone"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"/>

</LinearLayout>

Code summary

This example shows how to modify the dissolved route line style in the Theme.CustomNavDissolvedRouteline style. This style inherits from the NavigationViewLight style and sets the navViewRouteStyle property to the CustomNavDissolvedRouteLineStyle style. The CustomNavDissolvedRouteLineStyle style inherits from the NavigationMapRoute style and sets the following properties:

  • alternativeRouteScale: This property specifies the width of the dissolved route line as a multiple of the width of the normal route line.

  • navigationDissolvedRouteColor: This property specifies the color of the dissolved route line.

  • navigationDissolvedAnimatedRouteColor: This property specifies the color of the animation effect that is applied to the dissolved route line.

To use the Theme.CustomNavDissolvedRouteline style, you need to set the lightThemeResId property of the NavLauncherConfig object to the resource ID of the Theme.CustomNavDissolvedRouteline style. For example, the following code shows how to set the lightThemeResId property:

1
2
3
4
5
6
NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
configBuilder.locationLayerRenderMode(RenderMode.GPS);
configBuilder.shouldSimulateRoute(true);
// Set dissolved rout line styling by lightThemeResId resource
configBuilder.lightThemeResId(R.style.Theme_CustomNavDissolvedRouteline);
NavigationLauncher.startNavigation(CustomDissolvedLineStyleActivity.this, configBuilder.build());