Layout

This section provides design guidelines for screen layouts that can be scaled across a range of screen sizes.

The padding and keyline values defined here are used in Components, Media specs, Notification Center specs, and Dialer specs.

Guidance at a glance (TL:DR):

  • Base layouts on appropriate screen-size categories
  • Use an 8dp grid for alignment
  • Set margin widths to 12% of app working space
  • Place scroll bars and navigation aids in margins
  • Use padding for fixed spacing between elements

Key layout concepts

  • App working space: The area of the screen available to an app after accounting for screen space occupied by car maker and system UI features
  • Screen-size categories: A set of 4 screen-width ranges (standard, wide, extra wide, and super wide), and 3 screen-height ranges (short, standard, and tall), where “screen” refers to the app working space rather than the full space from edge to edge
  • Padding: A set of spacing values that specify fixed vertical and horizontal spacing between elements and components in a layout
  • Keylines: A set of variable-width spacing values – determined by width categories – that indicate horizontal space between a margin or component edge and an element in a layout
  • Flex area: A part of a component, sometimes assigned a minimum or maximum value, that can be scaled to fit screen size

App working space

An app’s working space is the available screen area remaining after accounting for screen space occupied by car-maker and system-UI features. The app working space is intended to contain left and right margins and the app canvas, which is the app’s primary content area.

Each margin should be equal to 12% of the app working space width. Margins typically contain scroll bars and navigational affordances for the app.

App working space examples
Examples of various app working spaces

Screen sizes

Reference-spec layouts are keyed to a set of screen-size categories based on the width and height of the app working space.

In specs throughout these guidelines, these categories are referred to by name. For example, “Wide” refers to all screen widths in the range from 930dp to 1279dp.

Screen-size categories affect recommendations for:

  • Keyline spacing in components and elements
  • Scaling of component flex areas
  • When to hide or display optional elements, such as album art on the minimized control bar

Width categories

Width breakpoints illustration
Standard Wide Extra wide Super wide
Screen-width range 690 – 929dp 930 – 1279dp 1280 – 1919dp ≥ 1920dp

Height categories

Height breakpoint illustration
Short Standard Tall
Screen-height range 0 – 609dp 610 – 1199dp ≥ 1200dp

Spacing

Reference-spec layouts are structured on an 8dp grid. In practice, this means UI components and elements in specs are spaced apart by multiples of 8dp.

There are two types of spacing:

  • Padding, for fixed-width and fixed-height spacing

  • Keylines, for variable-width spacing


Padding

Padding establishes fixed-width and fixed-height spacing between components in a reference-spec layout. It can also dictate fixed spacing between elements within a component, such as the space between adjacent number targets on the dialpad component. Typically, the closer the relationship is between two elements, the narrower the padding between them.

There are 9 padding values, designated as P0 – P8.

Here are the padding values and their corresponding sizes:

Padding values reference spec
P0 P1 P2 P3 P4 P5 P6 P7 P8
4dp 8dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp

Unlike keylines which change spacing values based on screen-width categories, padding values remain constant. For example, P1 is always 8dp. In some cases, however, the distance between a particular set of components or elements may have different padding values in the reference-spec layouts for different screen sizes. For example, the recommended vertical spacing between grid items is P4 for short screens and P5 for standard and tall screens.


Keylines

Rather than indicating padding between elements in a reference spec, keylines specify how far an element is from the nearest margin or edge of a component. Keylines change value based on screen width. They offer a convenient way to scale a layout to different screen sizes while maintaining proportional, horizontal spacing of elements.

There are 5 keylines, designated as KL0 to KL4.

Here are the keyline values for each screen width:

Keyline values reference spec
Screen width Standard Wide Extra wide Super wide
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 112dp
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 168dp

Scaling strategies

Reference-spec layouts provide guidelines for scaling apps to different screen sizes. To help with smooth scaling, specs typically include:

  • A flex area, which is a part of a component that car makers should expand or contract to fit within their specific screen size
  • Optional recommended minimum and maximum widths for the flex area, intended to prevent scaling components to undesirable sizes
  • Keylines used to maintain proportional, horizontal spacing of elements, which scale differently based on screen-width category
  • Padding, for specifying fixed spacing between components and elements

Optionally, some specs specify whether to hide or display certain elements based on screen width.

Example 1: Minimized control bar

The minimized control bar is an example of a component for which the reference-spec layout recommends flexing the component width and hiding a non-essential element at smaller screen sizes.

Minimized control bar spec
Minimized control bar spec

The spec for a minimized control bar includes 2 scaling guidelines:

  1. The square element at left (typically used for album art) should appear only when the screen width is 930dp or greater, and
  2. The flexible-width section in the middle should never be narrower than 440dp and can be scaled up for wider screens as long as the entire component width does not exceed 1028dp.
The animation below shows how the minimized control bar can be scaled to wider and narrower screens by following the recommendations in the reference layouts.

Minimized control bar animation
Minimized control bar animation

Example 2: Grids

Grids are an example of components that can be placed and sized in columns and rows within a layout.

Grid adaptive specs
Grid adaptive specs

The recommended number of columns (3 on narrower screens, 4 on wider screens) depends on the screen size. Column width and row height can be adjusted within a screen category as long as grids are never less than recommended minimum widths. The animation below shows how grids can be scaled to wider and narrower screens by following the recommendations in the reference layouts.

Grid adaptive animation
Grid adaptive animation