Customize playback controls

  • Design your media app's playback view and decide if you need custom controls beyond Play/Pause, Next, Previous, and Overflow.

  • Provide monochrome vector icons for any custom actions, dynamically changing them to reflect the state (e.g., available, disabled).

  • Give users a queue to browse audio sources, ideally indicating the currently playing item and including previously played items.

  • For custom action icons, maximize text size for readability and limit the number of custom actions to 6 (or 8 if Next/Previous aren't used).

  • Consider including thumbnails and elapsed time or an icon for the currently playing item in the queue for better user experience.

Car makers and Google provide a basic set of playback controls like Play/Pause, Next, Previous, and Overflow. If you want additional features, like queue or custom actions, you need to make design decisions regarding layout, icons, and which (if any) provided controls to replace.

To go beyond the playback actions provided by car makers and offer users a queue or additional playback actions, you need to decide whether to show the following:

  • Thumbnails for items in the queue
  • An icon or elapsed time for the now playing item
  • Previously played items in the queue
  • Custom actions on the control bar and whether to replace the car maker's Next and Previous controls
  • Visual representations of each action's relevant states (for example, available or disabled)

App developers must maintain a consistent design for custom actions in media apps to align with user expectations and maximize text within icons to ensure readability.

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 now 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 capabilities (Android Auto).
Mockup of media app while playing media
This playback view displays the now playing song (Google built-in).
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 capabilities (Google built-in).
Two examples (list and grid) of media apps on Google built-in (portrait)

Queue

Provide the users 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 (Google built-in).
Mockup of media app displaying queue list with album art
Here, the user can review the queue of upcoming media (Google built-in, portrait).

Requirements

Keep in mind the following requirement and recommendations:

Requirement level Queue Requirements Playback control requirements
Must -- App developers must:
Should App developers should:
  • If using text (including numbers) in an icon, make maximum use of the space in the bounding box to make the text as large and readable as possible
 App developers should:
  • Provide an indicator for the now 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:
  • Provide up to 6 custom actions (or up to 8, if not using Next and Previous)
 App developers may: