Customize playback controls

In addition to deciding how your app content is organized for navigating and browsing, you need to decide whether you want a queue or any custom controls for playing the content.

Car makers and Google take care of implementing and styling the playback view, minimized control bar, and queue. They also provide a basic set of playback controls, including Play/Pause, Next, Previous, and Overflow. (Next and Previous are contingent on your app supporting these actions.) If these controls are sufficient for your app, then you’re done.

However, if you want to provide a queue or access to additional playback actions beyond the ones that car makers provide, you need to decide:

  • Whether to display thumbnails for queue items
  • Whether to display an icon or elapsed time for the currently playing item in the queue
  • Whether to include previously played items in the queue
  • Which custom actions you want on the control bar, and whether they should replace the car makers’ Next and Previous controls
  • What the icons representing the relevant states of each action (such as available and disabled) will look like

Playback view

One of the most important features to design for a media app is the playback view.

Playback view examples

Mockup of media app while playing media
This playback view displays the currently playing song (Android Auto).
Mockup of media app while playing media with overflow overlay
The user has opened the overflow menu on the right side of the screen, which offers more functionality (Android Auto).
Mockup of media app while playing media
This playback view displays the currently playing song (AAOS).
Mockup of media app while playing media with overflow overlay
The user has opened the overflow menu on the right side of the screen, which offers more functionality (AAOS).
Two examples (list and grid) of media apps on AAOS (portrait)

Playback control requirements

Keep in mind the following requirement and recommendations:

Requirement level Requirements
MUST App developers must:
SHOULD App developers should:
  • If using text (including numbers) in an icon, utilize the maximum space in the bounding box to make the text as large and readable as possible
MAY App developers may:
  • Provide up to 6 custom actions (or up to 8, if not using Next and Previous)

Rationale

  • Consistent app UI: App developers need to align the interfaces for custom actions in media apps with similar actions familiar to their users on other devices to create familiar experiences for the car.
  • Glanceability: Text can appear smaller when paired with iconography, so text in icons should be maximized within the available space.

Queue

You should also provide your user with a way to browse the list of audio sources.

Queue examples

Mockup of media app displaying queue list with album art
Here, the user can review the queue of upcoming media (Android Auto).
Mockup of media app displaying queue list with playback controls
Here the user sees the list of upcoming media (AAOS).
Mockup of media app displaying queue list with album art
Here, the user can review the queue of upcoming media (AAOS, portrait).

Queue requirements

Requirement level Requirements
SHOULD App developers should:
  • Provide an indicator for the currently playing queue item
  • Include previously played items in the queue

To learn more about progress indicators and the queue, review Enable playback control.

MAY App developers may:

Rationale

  • Glanceable UI: Users should be able to see what's currently playing at a glance.