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

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

Preference

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

Layout

Limits provided in this section pertain to specific layouts and combinations of Car UI library components.

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 (4) lines of text.
Call-to-Action (CTA)

CTA MUST be completely visible:

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

Settings screen

A Test Settings screen is composed of the App Bar, Subheader, and List Elements components. Each is described below:

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.