Skip to main content

Component styles

Join the Mapbox Developers Discord Communityarrow-right

Navigation SDK UX Framework allows you to modify multiple aspects of the user experience provided out of the box. Typography, UI color schema and component shapes are the first of the user experience options you may want to modify to make your UX Framework UI styles look according to your brand guidelines.

UX Framework UI styles are defined by DashStyle styleable elements in XML. There are two default styles pre-built and incorporated in the Navigation SDK UX Framework:

  • DashTheme.Day - Day mode style.
  • DashTheme.Night - Night Mode Style

Each of these styles contains colors, font and shape configurations for the UI provided by the Navigation SDK UX Framework out of the box.

The way you can modify UX Framework UI styles is to inherit and override. This way you can inherit from one of the default styles and override only the attributes you need.

The first step you will need to do to modify one of the UX Framework UI styles is to create your own style by inheriting from the default one and overriding some of the attributes:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyDayStyle" parent="DashTheme.Day">
    <item name="text_color_accent">#3072F5</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">#ffffff</item>
    <item name="search_pin_color_accent">@color/accent</item>

    {/* end colors */}

    {/* Title1 */}
    <item name="typography_title1_font_family">@font/medium</item>
    <item name="typography_title1_font_size">@dimen/title1_font_size</item>
    <item name="typography_title1_font_weight">@integer/title1_font_weight</item>
    <item name="typography_title1_line_height">@dimen/title1_line_height</item>
  </style>
</resources>

Then you will need to apply it:

  • through the Navigation SDK UX Framework configuration
Dash.init(
   applicationContext = applicationContext,
   accessToken = getString(R.string.mapbox_access_token)
) {
   theme {
       dayStyleRes = R.style.LightTheme
   }
}
  • or update Navigation SDK UX Framework configuration in runtime
Dash.applyUpdate {
    theme { dayStyleRes = R.style._DayThemeRed }
}

Color Schema​

Navigation SDK UX Framework allows you to modify colors for all the UI elements of the pre-built UI. Changes that UX Framework allows you to make are limited by the UX Framework UI Design System. The Design System bundles UI elements in a group and specifies colors for each group, this way UX Framework manages the visual consistency and user experience across various components and screens in a particular UX Framework instance. In other words, you will be able to modify colors of groups of UI elements, rather than particular UI elements.

GLOSSARY
Color attributes

All available color attributes that you can override.

Within each group, the colors are further divided into subgroups to provide context for their usage:

  • Primary. The main color within each group.
  • Secondary. Less prominent colors for differentiation.
  • Tertiary. Even less prominent colors, for lower selection priority or disabled states.
  • Accent. Attention-grabbing and highlighting color (align with the application's branding).
  • Red. Colors indicating errors or warnings.
  • Inverted. Colors for use on inverted backgrounds.

Set the color by specifying the color directly or by referring to a color resource.

For example:

<item name="text_color_accent">@color/accent</item>

and

<item name="text_color_accent">#FF018786</item>

are both correct.

Typography​

Typography configuration is a part of the Navigation SDK UX Framework styles, and could be modified using the same inherit and override approach.

As well as colors, fonts in the UX Framework are a part of the UX Framework Design system. All the font types used in the UX Framework are standardized and applied to groups of text assets to enhance visual consistency and user experience across the UX Framework UI. As well as for colors this means that UX Framework allows modifying the font parameter for a group of text assets, rather than to a particular text asset.

GLOSSARY
Font attributes

All available font attributes that you can override.

UX Framework allows users to customize the following aspects of typography for the UX Framework UI:

  • Font Family. This attribute allows you to specify a font family. It can be specified using a reference to a font from the resources (using @font/font_name) or directly providing a string name for the font family (use fonts available in the Android system).

  • Font Size. This attribute allows you to specify the font size. Value for the font size should be provided in dimension format, typically specified in sp (scale-independent pixels) or dp (density-independent pixels).

  • Font Weight. This attribute allows you to specify the weight (or thickness) of the font characters. This value should be provided as an integer within the range between 1 and 1000. Common values might include 400 for regular, 500 for medium, 700 for bold, etc.

  • Line Height. This attribute allows the user to specify the distance between lines of text for style. Same as the font size, the line height value should be provided in dimension format, typically in sp or dp. (We recommend setting up line height to be more than font size + font padding.)

In the following code snippet, you may find examples of how font family is specified in various manners:

  • Title1. A custom font from the project's res/font directory is used.
  • **Title2. **The font is determined by the value associated with @string/family_medium in the string resources. If this value indicates a custom font, find it in res/font. If it specifies the name of a system font, then a system font is being used.
  • Title3 uses a system font.
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyDayStyle" parent="DashTheme.Day">
    {/* end colors */}
    {/* Title1 */}
    <item name="typography_title1_font_family">@font/medium</item>
    <item name="typography_title1_font_size">@dimen/title1_font_size</item>
    <item name="typography_title1_font_weight">@integer/title1_font_weight</item>
    <item name="typography_title1_line_height">@dimen/title1_line_height</item>
    {/* Title2 */}
    <item name="typography_title2_font_family">@string/family_medium</item>
    <item name="typography_title2_font_size">@dimen/title2_font_size</item>
    <item name="typography_title2_font_weight">@integer/title2_font_weight</item>
    <item name="typography_title2_line_height">@dimen/title2_line_height</item>
    {/* Title3 */}
    <item name="typography_title3_font_family">sans-serif-medium</item>
    <item name="typography_title3_font_size">@dimen/title3_font_size</item>
    <item name="typography_title3_font_weight">@integer/title3_font_weight</item>
    <item name="typography_title3_line_height">@dimen/title3_line_height</item>
    {/* Rest typography styles */}
  </style>
</resources>

Shape​

UX Framework uses a Material 3-inspired shapes system to decorate its components. It uses various shape sizes to direct attention, identify components, and communicate state.

The shape system uses a size-based scale to define the amount of roundness: none, extra small, small, medium, large, extra large, and full. Each component is assigned a style based on the desired degree of rounding. For square-cornered shapes, the style is "none"; for slightly to more rounded corners, the style is "extra small" to "extra large"; and for a fully rounded look, the style is " full".

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="DashTheme" parent="...">
    {/* Shapes */}
    <item name="shapes_extra_small_radius">4dp</item>
    <item name="shapes_small_radius">8dp</item>
    <item name="shapes_medium_radius">12dp</item>
    <item name="shapes_large_radius">16dp</item>
    <item name="shapes_extra_large_radius">24dp</item>
  </style>
</resources>

You can customize the shape size of any style level in the shape scale. Such changes affect all components mapped to that shape style.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyDayStyle" parent="DashTheme.Day">
    {/* Shapes */}
    <item name="shapes_extra_small_radius">6dp</item>
    <item name="shapes_small_radius">12dp</item>
    <item name="shapes_medium_radius">18dp</item>
    <item name="shapes_large_radius">24dp</item>
    <item name="shapes_extra_large_radius">30dp</item>
    {/* Rest of the style */}
  </style>
</resources>
Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?