Toggle Navigation Theme

This example shows:

How to config custom navigation style using NavLauncherConfig.Builder
How to switch Navigation Theme Mode between Light, Dark, and System using configBuilder.themeMode(navigationThemeMode)
- NavigationConstants.NAVIGATION_VIEW_LIGHT_MODE
- NavigationConstants.NAVIGATION_VIEW_DARK_MODE
- NavigationConstants.NAVIGATION_VIEW_FOLLOW_SYSTEM_MODE

For all code examples, refer to Navigation Code Examples

activity_toggle_navigation_theme.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:layout_height="wrap_content">
11
        <Button
12
            android:id="@+id/fetchRoute"
13
            android:layout_width="wrap_content"
14
            android:layout_height="wrap_content"
15
            android:text="@string/fetch_route"/>
16
    </LinearLayout>
17

18
    <LinearLayout
19
        android:layout_width="wrap_content"
20
        android:layout_height="wrap_content"
21
        android:orientation="vertical">
22
        <Button
23
            android:id="@+id/startNavLight"
24
            android:layout_width="wrap_content"
25
            android:layout_height="wrap_content"
26
            android:textSize="12sp"
27
            android:text="@string/start_navigation_with_light_mode"/>
28
        <Button
29
            android:id="@+id/startNavDark"
30
            android:layout_width="wrap_content"
31
            android:layout_height="wrap_content"
32
            android:textSize="12sp"
33
            android:text="@string/start_navigation_with_dark_mode"/>
34
        <Button
35
            android:id="@+id/startNavAsSetting"
36
            android:layout_width="wrap_content"
37
            android:layout_height="wrap_content"
38
            android:textSize="12sp"
39
            android:text="@string/start_navigation_with_system_setting_mode"/>
40
    </LinearLayout>
41

42
    <TextView
43
        android:id="@+id/routeGeometry"
44
        android:layout_width="wrap_content"
45
        android:layout_height="wrap_content"
46
        android:layout_marginTop="10dp"/>
47

48
    <ProgressBar
49
        android:id="@+id/progress"
50
        android:visibility="gone"
51
        android:layout_width="wrap_content"
52
        android:layout_height="wrap_content"
53
        android:layout_gravity="center"/>
54

55
</LinearLayout>

themes.xml view source

1
<style name="Theme.CustomNavigationLight" parent="NavigationViewLight">
2
        <!-- You can customise your navigation style here-->
3
    </style>
4

5

6
    <style name="Theme.CustomNavigationDark" parent="NavigationViewDark">
7
        <!-- You can customise your navigation style here-->
8
    </style>

ToggleNavigationThemeActivity 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 ToggleNavigationThemeActivity extends AppCompatActivity implements View.OnClickListener {
25

26

27
    private Button fetchRoute;
28
    private Button startNavLight;
29
    private Button startNavDark;
30
    private Button startNavAsSetting;
31
    private TextView routeGeometry;
32
    private DirectionsRoute directionsRoute;
33
    private ProgressBar progress;
34
    private String navigationThemeMode = NavigationConstants.NAVIGATION_VIEW_LIGHT_MODE;
35
    @Override
36
    protected void onCreate(Bundle savedInstanceState) {
37
        super.onCreate(savedInstanceState);
38
        setContentView(R.layout.activity_toggle_navigation_theme);
39
        fetchRoute = findViewById(R.id.fetchRoute);
40
        startNavLight = findViewById(R.id.startNavLight);
41
        startNavDark = findViewById(R.id.startNavDark);
42
        startNavAsSetting = findViewById(R.id.startNavAsSetting);
43
        routeGeometry = findViewById(R.id.routeGeometry);
44
        progress = findViewById(R.id.progress);
45
        fetchRoute.setOnClickListener(this);
46
        startNavLight.setOnClickListener(this);
47
        startNavDark.setOnClickListener(this);
48
        startNavAsSetting.setOnClickListener(this);
49

50
        startNavLight.setEnabled(false);
51
        startNavDark.setEnabled(false);
52
        startNavAsSetting.setEnabled(false);
53

54
    }
55

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

63
            NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
64
                @Override
65
                public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
66
                    progress.setVisibility(View.GONE);
67
                    //start navigation with the route we just fetched.
68
                    if (response.body() != null && !response.body().routes().isEmpty()) {
69
                        directionsRoute = response.body().routes().get(0);
70
                        routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
71
                        startNavLight.setEnabled(true);
72
                        startNavDark.setEnabled(true);
73
                        startNavAsSetting.setEnabled(true);                    }
74
                }
75

76
                @Override
77
                public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
78
                    progress.setVisibility(View.GONE);
79
                }
80
            });
81
        } else if (view.getId() == R.id.startNavLight) {
82
            navigationThemeMode = NavigationConstants.NAVIGATION_VIEW_LIGHT_MODE;
83
            fetchRoute();
84
        } else if (view.getId() == R.id.startNavDark) {
85
            navigationThemeMode = NavigationConstants.NAVIGATION_VIEW_DARK_MODE;
86
            fetchRoute();
87
        }  else if (view.getId() == R.id.startNavAsSetting) {
88
            navigationThemeMode = NavigationConstants.NAVIGATION_VIEW_FOLLOW_SYSTEM_MODE;
89
            fetchRoute();
90
        }
91
    }
92

93
    private void fetchRoute() {
94
        NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
95
        configBuilder.locationLayerRenderMode(RenderMode.GPS);
96
        configBuilder.shouldSimulateRoute(true);
97
        configBuilder.themeMode(navigationThemeMode);
98
//        You can customise your Navigation Light theme and Navigation Dark theme
99
//        configBuilder.lightThemeResId(R.style.Theme_CustomNavigationLight);
100
//        configBuilder.darkThemeResId(R.style.Theme_CustomNavigationDark);
101

102
        NavigationLauncher.startNavigation(ToggleNavigationThemeActivity.this, configBuilder.build());
103
    }
104

105

106
}

Code Highlights

This code example defines an activity that allows the user to toggle between different navigation themes and start navigation based on a fetched route.

The Code defined Theme_CustomNavigationLight based on NavigationViewLight and Theme_CustomNavigationDark based on NavigationViewDark These styles are used to customize the appearance of the navigation view in Light mode and Dark mode.

Code summary

In the code example, configBuilder.themeMode(NavigationConstants.NAVIGATION_VIEW_LIGHT_MODE) method is used to set the theme mode for the navigation interface in the NavLauncherConfig object. The theme mode determines the visual style of the navigation UI. The method accepts a string parameter representing the theme mode. Defaults to NAVIGATION_VIEW_FOLLOW_SYSTEM_MODE

NAVIGATION_VIEW_LIGHT_MODE: This theme mode sets the navigation interface to use a light color scheme. It is suitable for environments with a bright background or during daytime. It provides a visually lighter and brighter appearance.
NAVIGATION_VIEW_DARK_MODE: This theme mode sets the navigation interface to use a dark color scheme. It is suitable for environments with low light conditions or during nighttime. It provides a visually darker and more contrasted appearance.
NAVIGATION_VIEW_FOLLOW_SYSTEM_MODE: This theme mode allows the navigation interface to follow the system-wide theme settings. It adapts to the user's preferred system theme, whether it is light or dark. The interface will automatically switch between light and dark modes based on the system's current theme settings.

By using these theme modes, you can customize the visual style of the navigation UI to match your application's design or provide a consistent experience with the system-wide theme.

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

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

Toggle Navigation Theme

Switch Navigation Theme Mode

Code Highlights

Code summary