Android Auto App UI

App UI

The status bar, drawer, and toast UI elements should be used without modifications. A consistent framework helps maintain a predictable experience for Android Auto users. The custom app layer can be modified to create unique branded experiences.

Status bar Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The status bar appears in the top right corner of the screen at the top level in z-space. It displays the phone’s connectivity, battery life, time, and a mic icon to start voice commands. When the car is parked, a search box is also visible. Tapping the search box opens the search view with a keyboard. No functional or interactive elements should be placed behind the status bar.

Drawer Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The drawer provides access to global actions and prioritizes useful content for drivers. Avoid putting long lists in the drawer or switching between views of the same content. Each drawer item must provide a single touch target. Two levels of hierarchy can be used before a content list should be shown. When Android Auto is on a compatible car display, a user must be able to navigate to each content view in 6 steps or less.

Best practices:

  • Simplify the content
  • Focus on contextual, fresh, and useful items
  • Show most items without scrolling
  • Use single-line items
  • Use two-line items for longer strings that are critical for decision making
  • Use icons sparingly

Drawer layouts

Single-line

When a selection can be made without additional information, use the single-line layout. This layout allows more list items to appear on screen at once. Apps should not mix single-line and two-line items at the same level.

Two-line

When more information is needed to make a selection, use the two-line layout.

Icons

Icons may be used only if they aid in item identification, since they can make a list hard to scan. If you use icons, they must appear beside every item at the same level.

Actions & categories

Actions apply to the app as a whole. Switching between different views of the same data does not constitute an action.

Categories permit further navigation into content. Use no more than 2 category levels before displaying actionable content. Actions and categories can exist together at the same level of the drawer.

Toasts Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Toasts provide brief feedback on an action with a message at the bottom of the screen. They are used primarily for system messaging and cannot be swiped off-screen. Use the Android Auto toast API to display glanceable toasts.

Custom app layer Expand and collapse content An arrow that points down when collapsed and points up when expanded.

All of the app space outside of the previously identified UI elements is the custom app layer. This is the place to create unique branded experiences. Review Custom apps for specifications and recommendations for designing in-car experiences that help minimize driver distraction.