Customize Route Line Style

This example shows:

How to customize the styling of Route line
- routeColor
- routeScale
- alternativeRouteScale
- routeShieldColor
- routeFloatDurationBackgroundPrimary
- maneuverArrowColor
- maneuverArrowBorderColor
- routeWayNameBackGroundColor
- routeWayNameTextColor
How to config custom navigation style using NavLauncherConfig.Builder

For all code examples, refer to Navigation Code Examples

activity_route_line_style.xml view source

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_route_line"/>
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>

themes.xml view source

1
<style name="Theme.CustomNavigationRouteLine" parent="NavigationViewLight">
2
        <!-- You can customize your navigation style here-->
3
        <item name="navViewRouteStyle">@style/CustomRouteStyle</item>
4
</style>
5

6
<style name="Theme.CustomNavigationRouteLineDark" parent="NavigationViewDark">
7
   <!-- You can customize your navigation style here-->
8
   <item name="navViewRouteStyle">@style/CustomRouteStyle</item>
9
</style>
10

11
<style name="CustomRouteStyle" parent="NavigationMapRoute">
12
        <item name="routeColor">#FFE97F2F</item>
13
        <item name="routeScale">1.0</item>
14
        <item name="alternativeRouteScale">1.0</item>
15
        <item name="routeShieldColor">#FF54E910</item>
16
        <item name="routeFloatDurationBackgroundPrimary">#FFE97F2F</item>
17
        <item name="maneuverArrowColor">#FFFF0106</item>
18
        <item name="maneuverArrowBorderColor">#FF70C35D</item>
19
        <item name="routeWayNameBackGroundColor">#FFE97F2F</item>
20
        <item name="routeWayNameTextColor">@color/white</item>
21
</style>

CustomRouteLineStyleActivity view source

1
package ai.nextbillion.navigation.demo.activity;
2

3
import android.os.Bundle;
4
import android.view.View;
5
import android.widget.Button;
6
import android.widget.ProgressBar;
7
import android.widget.TextView;
8

9
import ai.nextbillion.kits.directions.models.DirectionsResponse;
10
import ai.nextbillion.kits.directions.models.DirectionsRoute;
11
import ai.nextbillion.kits.geojson.Point;
12
import ai.nextbillion.maps.location.modes.RenderMode;
13
import ai.nextbillion.navigation.core.navigation.NavigationConstants;
14
import ai.nextbillion.navigation.demo.R;
15
import ai.nextbillion.navigation.ui.NBNavigation;
16
import ai.nextbillion.navigation.ui.NavLauncherConfig;
17
import ai.nextbillion.navigation.ui.NavigationLauncher;
18
import androidx.annotation.NonNull;
19
import androidx.appcompat.app.AppCompatActivity;
20
import retrofit2.Call;
21
import retrofit2.Callback;
22
import retrofit2.Response;
23

24
public class CustomRouteLineStyleActivity extends AppCompatActivity implements View.OnClickListener {
25
    private Button fetchRoute;
26
    private Button startNav;
27
    private TextView routeGeometry;
28
    private DirectionsRoute directionsRoute;
29
    private ProgressBar progress;
30
    @Override
31
    protected void onCreate(Bundle savedInstanceState) {
32
        super.onCreate(savedInstanceState);
33
        setContentView(R.layout.activity_route_line_style);
34
        fetchRoute = findViewById(R.id.fetchRoute);
35
        startNav = findViewById(R.id.startNav);
36
        routeGeometry = findViewById(R.id.routeGeometry);
37
        progress = findViewById(R.id.progress);
38
        fetchRoute.setOnClickListener(this);
39
        startNav.setOnClickListener(this);
40
        startNav.setEnabled(false);
41

42
    }
43

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

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

63
                @Override
64
                public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
65
                    progress.setVisibility(View.GONE);
66
                }
67
            });
68
        } else if (view.getId() == R.id.startNav) {
69
            NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
70
            configBuilder.locationLayerRenderMode(RenderMode.GPS);
71
            configBuilder.shouldSimulateRoute(true);
72
            configBuilder.lightThemeResId(R.style.Theme_CustomNavigationRouteLine);
73
configBuilder.darkThemeResId(R.style.Theme_CustomNavigationRouteLineDark);
74
            NavigationLauncher.startNavigation(CustomRouteLineStyleActivity.this, configBuilder.build());
75
        }
76
    }
77
}

Code Highlights

This code example shows how to customize the navigation view route line style via themes.xml configuration file, the color of route line-related UI elements are defined in the file.

In the above theme file, we have customized some route line color in style with name CustomRouteStyle, then we applied the CustomRouteStyle in Theme.CustomNavigationRouteLine for day style and Theme.CustomNavigationRouteLineDark for night style. We can also do some further customizations in Theme.CustomNavigationRouteLine and Theme.CustomNavigationRouteLineDark based on needs (e.g. show different UI color during day/night).

In code we use configBuilder.lightThemeResId() and configBuilder.darkThemeResId() to specify the theme for the Navigation view in day style and night style respectively.

Code summary

This code example defined the theme styles Theme_CustomNavigationRouteLine based on NavigationViewLight and Theme_CustomNavigationRouteLineDark based on NavigationViewDark

The navViewRouteStyle item is set to @style/CustomRouteStyle. The CustomRouteStyle customizes the appearance of the navigation route line in the navigation view.

The following items are defined within CustomRouteStyle:

routeColor to specify the color of the route line
routeScale and alternativeRouteScale to determine the scale of the route line and alternative route lines respectively
routeShieldColor to set the color of the shields along the route
maneuverArrowColor and maneuverArrowBorderColor to define the colors of the maneuver arrows
routeWayNameBackGroundColor and routeWayNameTextColor to specify the background color and text color of the route way names.

configBuilder.lightThemeResId(R.style.Theme_CustomNavigationRouteLine) sets the light theme for the navigation UI, using the Theme_CustomNavigationRouteLine style defined earlier. This style determines the appearance of the route line in the navigation view.

configBuilder.darkThemeResId(R.style.Theme_CustomNavigationRouteLineDark) sets the dark theme for the navigation UI, using the Theme_CustomNavigationRouteLineDark style defined earlier. This style is applied when the device's dark mode is enabled.

Besides, the action after clicking the fetch route button shows how to fetch a route using NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() { ... }); The origin and destination points are passed as parameters, along with a callback to handle the response asynchronously.