Appendix B, customization

To ensure Car UI customizations perform as intended, you MUST adhere to the items described below.

General

Limits in this section are true regardless of layout:

Element Description

Typography
  • Tab text labels MUST be wide enough to display strings of at least 6 “W” characters.
  • Text containers MUST be tall enough to fully display a single “H” character.
  • Text sizes MUST appear in descending order, for example:

    car_ui_body_1 > car_ui_body_2 > car_ui_body_3

Contrast
  • Contrast between foreground (text) and background MUST be at least 4.5:1.
  • Contrast between button color and background MUST be at least 3:1.
  • Tab selected state contrast with background MUST be at least 4.5:1.
  • Tab selected state contrast with unselected state MUST be at least 3:1.

Others
  • All icons MUST be vector drawables.
  • Touch targets MUST be at least 76 dp wide.
  • Padding constants MUST appear in descending order, for example:
    car_ui_padding_0 > car_ui_padding_1 > car_ui_padding_2

Components

Values provided below apply to specific components:

Element Description

Toolbar

 SHOULD be wide enough to display title strings of at least 20 "W" characters.

Preference

 SHOULD be wide enough to display title strings of at least 20 "W" characters.

App styled view

SHOULD be:

  • Wide enough to display at least 672 density-independent pixels (dp).
  • Tall enough to display at least 672 dp.

Layout

Limits in this section pertain to specific layouts and combinations of Car UI library components. A series of unique cases have been observed and generalized into emergent patterns.

Location dialog

A test dialog that contains the same content as the Google Play Services location dialog, constructed with Car UI library components and tested to ensure full content visibility:

Element Description
Title MUST wide enough to display strings of at least 38 “W” characters.
Body

MUST be completely visible and large enough to display:

  • Strings that may consist of at least 270 “W” characters.
  • At least four lines of text.
Call-to-action (CTA)

CTA MUST be completely visible:

  • Dialog MUST be wide enough to display at least two CTAs.
  • Titles MUST be wide enough to display strings of at least 9 “W” characters.

Settings screen

The Test Settings screen is composed of the app bar, subheader, and list elements components, which are described in the table:

Element Description
App bar
  • Title MUST be wide enough to display strings of at least 12 “W” characters.
  • MUST be at least 76dp tall.
Subheader MUST be wide enough to display strings of at least 12 “W” characters.
List elements

MUST be:

  • Wide enough to display strings of at least 12 “W” characters.
  • At least 76dp tall.