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
-
![documentation image](https://static.nextbillion.io/docs-next/docs/navigation/android/toggle-navigation-theme.jpg)
For all code examples, refer to Navigation Code Examples
activity_toggle_navigation_theme.xml view source
themes.xml view source
ToggleNavigationThemeActivity view source
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.