Customize styling of the Navigation Instruction List

This example shows:

  • How to customize the styling of the Navigation Instruction List

    • navViewListBackground

    • navViewListPrimary

    • navViewListSecondary

    • navViewListManeuverPrimary

    • navViewListManeuverSecondary

  • How to config custom navigation style using NavLauncherConfig.Builder

docs-image

For all code examples, refer to Navigation Code Examples

activity_custom_instruction_list_style.xml 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
<?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_instruction_list"/>
    </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>

themes.xml view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style name="Theme.CustomNavInstructionList" parent="NavigationViewLight">
        <!-- You can customise your navigation style here-->
        <item name="navViewListBackground">#FFFFC0A8</item>
        <item name="navViewListPrimary">#FF6E7ACA</item>
        <item name="navViewListSecondary">#FF003CE0</item>
        <item name="navViewListManeuverPrimary">#FFA90403</item>
        <item name="navViewListManeuverSecondary">#FFA90403</item>
</style>

<style name="Theme.CustomNavInstructionListDark" parent="NavigationViewDark">
        <!-- You can customise your navigation style here-->
        <item name="navViewListBackground">#FFFFC0A8</item>
        <item name="navViewListPrimary">#FF6E7ACA</item>
        <item name="navViewListSecondary">#FF003CE0</item>
        <item name="navViewListManeuverPrimary">#FFA90403</item>
        <item name="navViewListManeuverSecondary">#FFA90403</item>
</style>

CustomInstructionListStyleActivity 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
package ai.nextbillion.navigation.demo.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import ai.nextbillion.kits.directions.models.DirectionsResponse;
import ai.nextbillion.kits.directions.models.DirectionsRoute;
import ai.nextbillion.kits.geojson.Point;
import ai.nextbillion.maps.location.modes.RenderMode;
import ai.nextbillion.navigation.demo.R;
import ai.nextbillion.navigation.ui.NBNavigation;
import ai.nextbillion.navigation.ui.NavLauncherConfig;
import ai.nextbillion.navigation.ui.NavigationLauncher;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class CustomInstructionListStyleActivity 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_instruction_list_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);
            configBuilder.lightThemeResId(R.style.Theme_CustomNavInstructionList);
configBuilder.darkThemeResId(R.style.Theme_CustomNavInstructionListDark);            NavigationLauncher.startNavigation(CustomInstructionListStyleActivity.this, configBuilder.build());
        }
    }
}

Code Highlights

The key part of the code is the definition of two theme styles: Theme_CustomNavInstructionList and Theme_CustomNavInstructionListDark. These styles are based on the NavigationViewLight and NavigationViewDark styles, respectively. They are used to customize the appearance of the navigation instruction list in the navigation view. Here is a more detailed explanation of each style:

  • Theme_CustomNavInstructionList: This style is used to customize the appearance of the navigation instruction list in light mode. It changes the background color, text color, and font size of the list.

  • Theme_CustomNavInstructionListDark: This style is used to customize the appearance of the navigation instruction list in dark mode. It changes the background color, text color, and font size of the list.

These styles can be used to change the appearance of the navigation instruction list to match the overall style of the app. For example, if the app is using a light theme, the Theme_CustomNavInstructionList style can be used to make the navigation instruction list white with black text. If the app is using a dark theme, the Theme_CustomNavInstructionListDark style can be used to make the navigation instruction list black with white text.

Code summary

Definition of Theme.CustomNavInstructionList:

  • It is a custom style that extends the NavigationViewLight style.

  • It allows customization of the navigation instruction list appearance.

  • The following items are defined within this style:

    • navViewListBackground: Specifies the background color of the navigation instruction list.

    • navViewListPrimary: Specifies the primary text color of the navigation instruction list.

    • navViewListSecondary: Specifies the secondary text color of the navigation instruction list.

    • navViewListManeuverPrimary: Specifies the primary color for maneuver icons or visuals in the navigation instruction list.

    • navViewListManeuverSecondary: Specifies the secondary color for maneuver icons or visuals in the navigation instruction list.

The Theme.CustomNavFloatingButtonsDark style is similar to the previous style but is based on NavigationViewDark.

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

configBuilder.darkThemeResId(R.style.Theme_CustomNavInstructionListDark) sets the dark theme for the navigation UI, using the Theme_CustomNavInstructionListDark 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.

Have Questions ?