Toggle Navigation Theme
Switch Navigation Theme Mode
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
1package ai.nextbillion.navigation.demo.activity;
2
3import android.os.Bundle;
4import android.view.View;
5import android.widget.Button;
6import android.widget.ProgressBar;
7import android.widget.TextView;
8
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.core.navigation.NavigationConstants;
14import ai.nextbillion.navigation.demo.R;
15import ai.nextbillion.navigation.ui.NBNavigation;
16import ai.nextbillion.navigation.ui.NavLauncherConfig;
17import ai.nextbillion.navigation.ui.NavigationLauncher;
18import androidx.annotation.NonNull;
19import androidx.appcompat.app.AppCompatActivity;
20import retrofit2.Call;
21import retrofit2.Callback;
22import retrofit2.Response;
23
24public 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.
