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](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/playback-view-ex-1.png?authuser=9)
![Mockup of media app while playing media with overflow overlay](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/playback-view-ex-2.png?authuser=9)
![Mockup of media app while playing media](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/playback-view-ex-3.png?authuser=9)
![Mockup of media app while playing media with overflow overlay](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/playback-view-ex-4.png?authuser=9)
![](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/browsing-views-fig-5.png?authuser=9)
Playback control requirements
Keep in mind the following requirement and recommendations:
Requirement level | Requirements |
---|---|
MUST | App developers must:
|
SHOULD | App developers should:
|
MAY | App developers may:
|
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](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/queue-ex-1.png?authuser=9)
![Mockup of media app displaying queue list with playback controls](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/queue-ex-2.png?authuser=9)
![Mockup of media app displaying queue list with album art](https://developers.google.cn/static/cars/design/create-apps/media-apps/images/queue-ex-3.png?authuser=9)
Queue requirements
Requirement level | Requirements |
---|---|
SHOULD | App developers should:
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.