Customize styling of the dissolved route line

docs-image

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<resources xmlns:tools="http://schemas.android.com/tools">
2 <!-- Set dissolved route line style by navViewRouteStyle -->
3 <style name="Theme.CustomNavDissolvedRouteline" parent="NavigationViewLight">
4 <item name="navViewRouteStyle">@style/CustomNavDissolvedRouteLineStyle</item>
5 </style>
6
7 <style name="CustomNavDissolvedRouteLineStyle" parent="NavigationMapRoute">
8 <!-- Is how many times the width of the normal route -->
9 <item name="alternativeRouteScale">1.0</item>
10 <!-- The colour of dissolved route line -->
11 <item name="navigationDissolvedRouteColor">#FFFF0106</item>
12 <!-- The current color of the animation effect in 1 second -->
13 <item name="navigationDissolvedAnimatedRouteColor">#FF54E910</item>
14
15 </style>
16</resources>

CustomDissolvedLineStyleActivity view source

1public class CustomDissolvedLineStyleActivity extends AppCompatActivity implements View.OnClickListener{
2
3 private Button fetchRoute;
4 private Button startNav;
5 private TextView routeGeometry;
6 private DirectionsRoute directionsRoute;
7 private ProgressBar progress;
8
9 @Override
10 protected void onCreate(Bundle savedInstanceState) {
11 super.onCreate(savedInstanceState);
12 setContentView(R.layout.activity_custom_dissolved_line_style);
13
14 fetchRoute = findViewById(R.id.fetchRoute);
15 startNav = findViewById(R.id.startNav);
16 routeGeometry = findViewById(R.id.routeGeometry);
17 progress = findViewById(R.id.progress);
18 fetchRoute.setOnClickListener(this);
19 startNav.setOnClickListener(this);
20 startNav.setEnabled(false);
21 }
22
23 @Override
24 public void onClick(View view) {
25 if (view.getId() == R.id.fetchRoute) {
26 progress.setVisibility(View.VISIBLE);
27 Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
28 Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);
29
30 NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
31 @Override
32 public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
33 progress.setVisibility(View.GONE);
34 //start navigation with the route we just fetched.
35 if (response.body() != null && !response.body().routes().isEmpty()) {
36 directionsRoute = response.body().routes().get(0);
37 routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
38 startNav.setEnabled(true);
39 }
40 }
41
42 @Override
43 public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
44 progress.setVisibility(View.GONE);
45 }
46 });
47 } else if (view.getId() == R.id.startNav) {
48 NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
49 configBuilder.locationLayerRenderMode(RenderMode.GPS);
50 configBuilder.shouldSimulateRoute(true);
51 // Set dissolved rout line styling by lightThemeResId resource
52 configBuilder.lightThemeResId(R.style.Theme_CustomNavDissolvedRouteline);
53 NavigationLauncher.startNavigation(CustomDissolvedLineStyleActivity.this, configBuilder.build());
54 }
55 }
56}

activity_custom_dissolved_line_style.xml

1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical"
6 android:padding="10dp">
7
8 <LinearLayout
9 android:layout_width="wrap_content"
10 android:orientation="vertical"
11 android:layout_height="wrap_content">
12 <Button
13 android:id="@+id/fetchRoute"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:textSize="12sp"
17 android:text="@string/fetch_route"/>
18
19 <Button
20 android:id="@+id/startNav"
21 android:layout_width="wrap_content"
22 android:layout_height="wrap_content"
23 android:textSize="12sp"
24 android:text="@string/start_navigation_with_custom_top_panel"/>
25 </LinearLayout>
26
27 <TextView
28 android:id="@+id/routeGeometry"
29 android:layout_width="wrap_content"
30 android:layout_height="wrap_content"
31 android:layout_marginTop="10dp"/>
32
33 <ProgressBar
34 android:id="@+id/progress"
35 android:visibility="gone"
36 android:layout_width="wrap_content"
37 android:layout_height="wrap_content"
38 android:layout_gravity="center"/>
39
40</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:

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