Google is committed to advancing racial equity for Black communities. See how.

Appendix B, Customization Guidelines

To ensure your Car UI customizations proceed as efficiently as possible, use the following values to define expectations for on-screen content visibility and functionality.

General Guidelines

Limits in this section are true regardless of layout:

Item Guidelines

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.

Component-Specific Guidelines

Values provided below apply to specific components:

Item Guidelines

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-Based Guidelines

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:

Item Guidelines
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 Items components. Each is described below:

Item Guidelines
App Bar
  • Title must 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 Items

Must be:

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