Component styles | Navigation SDK UX Framework | Android Docs

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>

Route line coloring

The UX Framework allows you to customize the appearance of route lines displayed on maps. This document explains how to override the default colors.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyDayStyle" parent="DashTheme.Day">
        {/* Route line colors */}
        <!--The default color of the route line-->
        <item name="route_line_color_route_default_color">#3064F5</item>
        <!--The color used for representing low traffic congestion-->
        <item name="route_line_color_route_low_congestion_color">#3064F5</item>
        <!--The color used for representing moderate traffic congestion-->
        <item name="route_line_color_route_moderate_congestion_color">#FF8E00</item>
        <!--The color used for representing heavy traffic congestion-->
        <item name="route_line_color_route_heavy_congestion_color">#FF3543</item>
        <!--The color used for representing severe traffic congestion-->
        <item name="route_line_color_route_severe_congestion_color">#9C1447</item>
        <!--The color used for representing unknown traffic congestion-->
        <item name="route_line_color_route_unknown_congestion_color">#3064F5</item>
        <!--The color used for representing low traffic congestion on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_low_congestion_color">#99BBFF</item>
        <!--The color used for representing moderate traffic congestion on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_moderate_congestion_color">#FF8E00</item>
        <!--The color used for representing heavy traffic congestion on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_heavy_congestion_color">#FF3543</item>
        <!--The color used for representing severe traffic congestion on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_severe_congestion_color">#9C1447</item>
        <!--The color used for representing unknown traffic congestion on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_unknown_congestion_color">#99BBFF</item>
        <!--The default color used for alternative route lines-->
        <item name="route_line_color_alternative_route_default_color">#99CBFF</item>
        <!--The color used for representing low traffic congestion on-->
        <item name="route_line_color_alternative_route_low_color">#99CBFF</item>
        <!--The color used for representing moderate traffic congestion on alternative routes-->
        <item name="route_line_color_alternative_route_moderate_color">#FFD7A6</item>
        <!--The color used for representing heavy traffic congestion on alternative routes-->
        <item name="route_line_color_alternative_route_heavy_color">#FFA6AC</item>
        <!--The color used for representing severe traffic congestion on alternative routes-->
        <item name="route_line_color_alternative_route_severe_color">#C3859C</item>
        <!--The color used for representing unknown traffic congestion on alternative routes-->
        <item name="route_line_color_alternative_route_unknown_color">#99CBFF</item>
        <!--The color for the restricted road indicator(s)-->
        <item name="route_line_color_restricted_road_color">#000000</item>
        <!--The color used for the route closure line-->
        <item name="route_line_color_route_closure_color">#000000</item>
        <!--The color for the restricted road indicator(s) on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_restricted_road_color">#00000000</item>
        <!--The color used for the route closure line on inactive legs of the route-->
        <item name="route_line_color_inactive_route_leg_closure_color">#00000000</item>
        <!--The color for the restricted road indicator(s) for alternative routes.-->
        <item name="route_line_color_alternative_route_restricted_road_color">#333333</item>
        <!--The color used for the alternative route closure line(s)-->
        <item name="route_line_color_alternative_route_closure_color">#333333</item>
        <!--The color of the section of route line behind the puck representing the section of the route traveled-->
        <item name="route_line_color_route_line_traveled_color">#00000000</item>
        <!--The color of the casing section of route line behind the puck representing the section
        of the route traveled. By default the casing line is beneath the route line and gives the appearance of a border-->
        <item name="route_line_color_route_line_traveled_casing_color">#00000000</item>
        <!--The color used for the route casing line which is positioned below the route line giving the line the appearance of a boarder-->
        <item name="route_line_color_route_casing_color">#1247B2</item>
        <!--The color used for the alternative route casing line(s) which is positioned below the route line giving the line the appearance of a boarder-->
        <item name="route_line_color_alternative_route_casing_color">#727E8D</item>
        <!--The color used for casing of route legs hat aren't currently being navigated.-->
        <item name="route_line_color_inactive_route_leg_casing_color">#001B63</item>
        <!--The color used for route legs that aren't currently being navigated.-->
        <item name="route_line_color_inactive_route_legs_color">#3151AC</item>
        {/* Rest of the style */}
    </style>
</resources>

追加の開発者リソース

この{Type}は役に立ちましたか？

Color Schema​

Typography​

Shape​

Route line coloring​

Color Schema

Typography

Shape

Route line coloring