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):

---

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.

---

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

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

Height categories

	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:

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:

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.

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.

Example 2: Grids

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

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.