Add a custom theme
This documentation provides step-by-step instructions on how to add custom themes in the Navigation SDK UX Framework for Android. We'll create custom styles for the Day and Night themes and implement the necessary classes to achieve the desired customization.
Step 1: Create Custom Styles
To override the accent colors for the Day and Night themes, we'll create custom styles based on DashTheme.Day and DashTheme.Night. Open your styles.xml file and add the following code:
<style name="DayTheme" parent="DashTheme.Day">
<item name="text_color_accent">@color/accent</item>
<item name="text_color_links">@color/accent</item>
<item name="button_color_primary">@color/accent</item>
<item name="border_color_accent">@color/accent</item>
<item name="icon_color_accent">@color/accent</item>
<item name="guidance_color_primary">@color/accent</item>
</style>
<style name="NightTheme" parent="DashTheme.Night">
<item name="text_color_accent">@color/accent</item>
<item name="text_color_links">@color/accent</item>
<item name="button_color_primary">@color/accent</item>
<item name="border_color_accent">@color/accent</item>
<item name="icon_color_accent">@color/accent</item>
<item name="guidance_color_primary">@color/accent</item>
</style>
Replace @color/accent with the desired color values for the accent elements in both themes.
Step 2: Set styles in the Navigation SDK UX Framework
After initializing the UX Framework, apply the custom themes by configuring the SDK to use your newly created Day and Night themes. This is generally performed where you configure your UX Framework experience.
val config = DashConfig.create(
applicationContext = applicationContext,
accessToken = getString(R.string.mapbox_access_token),
) {
themeConfig {
dayStyleRes = R.style.DayTheme
nightStyleRes = R.style.NightTheme
}
// Rest configuration
}
Now you've successfully overridden the color scheme in the UX Framework using custom themes!