Android Auto's adaptive-responsive (AR) framework adapts app layouts to any car screen size.
App UI and features, such as media browsing and playback actions, are also automatically adapted in Android Auto—compatible cars for apps projected from a user's phone.
At a glance
- Layouts adjust to the screen size at specific breakpoints
- Apply padding in 8dp increments
- Place 12dp padding between smaller components sparingly
How layout is determined
Android Auto's AR framework uses both adaptive design and responsive design:
- Responsive design (exact screen size determines layout) is used for the left and right margins
- Adaptive design (ranges of screen height and width determine layout) is used for layout
Layout is determined using measurements called breakpoints. Breakpoints are strategically defined screen height and width measurements that determine when to show a specific layout. For each breakpoint range, the layout adjusts to suit the screen size and orientation.
Android Auto relies on adaptive breakpoints to determine screen layout, which are calculated from the size of the app window, rather than the entire screen.
Android Auto uses responsive margins based on the size of the entire car screen. The left and right margins adjust to 12% of the screen width, and they typically contain scroll bars and navigation controls. The remaining screen space, called the app canvas, contains app content.
To provide more space, the right-side margin can be removed on smaller screen sizes. This space can be used by the app as a secondary area to show additional information.
The layout grid
Android Auto layouts align UI elements along an 8dp grid, with some smaller components aligning to a 4dp grid.
Padding refers to the space between UI elements. The Android Auto padding scale is applied in multiples of 8dp, up to padding sizes of 96dp. Any larger amounts of padding should also be added in multiples of 8dp.
This table lists typical padding values seen in the Auto UI. Size increments are listed in increasing order, marked by labels that start with the letter “P”:
Padding for smaller components
To create better alignment, and allow sufficient spacing, smaller components may use 12dp of padding sparingly.
Keylines are measurements that organize a UI by showing where elements, and components, should be placed horizontally in a layout (along the x-axis). They are marked by labels that start with the letter “KL."
Keylines can be placed anywhere in a layout. They can be used to indicate the distance between any two vertical edges (of elements, components, or the screen itself). Components and elements align their left or right edge to the closest keyline.
Measuring with keylines
Keylines change based on screen width, allowing UI elements to consistently scale their placement across different screen sizes.
The following keylines are recommended for a range of screen sizes, represented by labels marked with “KL(n)". They are shown in order of increasing keyline size:
|Extra wide screens