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.
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:
- The square element at left (typically used for album art) should appear only when the screen width is 930dp or greater, and
- 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.
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.
