Customize styling of the Navigation Instruction List

This example shows:

  1. How to customize the styling of the Navigation Instruction List

    1. navViewListBackground

    2. navViewListPrimary

    3. navViewListSecondary

    4. navViewListManeuverPrimary

    5. navViewListManeuverSecondary

  2. How to config custom navigation style using NavLauncherConfig.Builder

For all code examples, refer to Navigation Code Examples

activity_custom_instruction_list_style.xml view source

1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android=""
3    android:layout_width="match_parent"
4    android:layout_height="match_parent"
5    android:orientation="vertical"
6    android:padding="10dp">
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"/>
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_instruction_list"/>
25    </LinearLayout>
27    <TextView
28        android:id="@+id/routeGeometry"
29        android:layout_width="wrap_content"
30        android:layout_height="wrap_content"
31        android:layout_marginTop="10dp"/>
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"/>

themes.xml view source

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

CustomInstructionListStyleActivity view source

1package ai.nextbillion.navigation.demo.activity;
3import android.os.Bundle;
4import android.view.View;
5import android.widget.Button;
6import android.widget.ProgressBar;
7import android.widget.TextView;
9import ai.nextbillion.kits.directions.models.DirectionsResponse;
10import ai.nextbillion.kits.directions.models.DirectionsRoute;
11import ai.nextbillion.kits.geojson.Point;
12import ai.nextbillion.maps.location.modes.RenderMode;
13import ai.nextbillion.navigation.demo.R;
14import ai.nextbillion.navigation.ui.NBNavigation;
15import ai.nextbillion.navigation.ui.NavLauncherConfig;
16import ai.nextbillion.navigation.ui.NavigationLauncher;
17import androidx.annotation.NonNull;
19import retrofit2.Call;
20import retrofit2.Callback;
21import retrofit2.Response;
23public class CustomInstructionListStyleActivity 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_custom_instruction_list_style);
34        fetchRoute = findViewById(;
35        startNav = findViewById(;
36        routeGeometry = findViewById(;
37        progress = findViewById(;
38        fetchRoute.setOnClickListener(this);
39        startNav.setOnClickListener(this);
40        startNav.setEnabled(false);
41    }
43    @Override
44    public void onClick(View view) {
45        if (view.getId() == {
46            progress.setVisibility(View.VISIBLE);
47            Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
48            Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);
50            NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
51                @Override
52                public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
53                    progress.setVisibility(View.GONE);
54                    //start navigation with the route we just fetched.
55                    if (response.body() != null && !response.body().routes().isEmpty()) {
56                        directionsRoute = response.body().routes().get(0);
57                        routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
58                        startNav.setEnabled(true);
59                    }
60                }
62                @Override
63                public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
64                    progress.setVisibility(View.GONE);
65                }
66            });
67        } else if (view.getId() == {
68            NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
69            configBuilder.locationLayerRenderMode(RenderMode.GPS);
70            configBuilder.shouldSimulateRoute(true);
71            configBuilder.lightThemeResId(;
72configBuilder.darkThemeResId(;            NavigationLauncher.startNavigation(CustomInstructionListStyleActivity.this,;
73        }
74    }

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:

  1. 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.

  2. 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:

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

  2. It allows customization of the navigation instruction list appearance.

  3. The following items are defined within this style:

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

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

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

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

    5. 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( 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( 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.