Stay organized with collections
Save and categorize content based on your preferences.
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
Playback control requirements
Keep in mind the following requirement and recommendations:
Requirement level
Requirements
MUST
App developers must:
Provide monochrome vector icons
for any custom actions they add, and change them dynamically to indicate
state
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
Queue requirements
Requirement level
Requirements
SHOULD
App developers should:
Provide an indicator for the currently playing queue item
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["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."]]],[]]