Because most aspects of the media UI are controlled by car makers and Google (see Partner roles for media), the design-related tasks for app developers are relatively simple.
Here are the basic tasks for app developers:
- Plan navigation tabs: Choose up to 4 top-level views of content and decide on icons or labels for navigation tabs.
- Plan browsing views: Plan how top-level and lower-level views of content will be organized and formatted (grid or list?).
- Customize playback controls: Decide whether you want to provide custom actions and icons and whether to implement a queue.
- Plan voice actions: Determine which commands you would like users to be able to request by voice
- Provide branding elements: Provide your app icon and accent color to represent your brand.
Optional extra steps for AAOS only:
- Create a sign-in flow: Use the available templates to create a sign-in flow for users to sign in to your app on the car screen (if your app requires sign-in).
- Create settings: Create in-vehicle settings screens for your app, if settings are needed.
Optional extra step for Android Auto only:
- Provide recommendations: Identify 10 items of media content to be showcased as recommended
Use the links above to access more detailed guidance about each task. For a summary of the design elements you’ll need to provide, consult the checklist.
Partner roles for media
The table below summarizes the design roles of app developers and car makers (in AAOS) in ensuring a unified media app experience. For apps running on AAOS-based vehicles, car makers can customize the UI to reflect their brand and vehicle styling. For apps running in Android Auto, Google creates a consistent look and feel for the app across the range of compatible vehicles.
| Aspect of the media experience | Car maker’s design role (or Google’s, for Android Auto) | App developer’s design role |
|---|---|---|
| Navigating media apps | Decide where the app bar goes and support app navigation and controls that can appear in the app bar | Decide which top-level content views to represent in the app bar’s tabs and provide icons and labeling as needed (see Plan navigation tabs) |
| Browsing content details | Determine size and content of grid or list items and implement app header at lower levels of content | Determine format (grid or list) and organization for browsable media content at each level (see Plan browsing views) |
| Playing media | Implement playback view and minimized control bar with appropriate media metadata and playback controls, including controls for any custom actions in the app. Provide a queue affordance in playback view and styling for the queue. | Decide whether to implement custom actions on the control bar, and provide icons for them. Also decide whether to implement a queue and whether to provide an indicator for the currently playing track (see Customize playback controls) |
| Voice actions | Provide Google Assistant UI and control how users invoke Assistant in specific cars | Specify which media categories to support for voice requests and what content to supply for generic requests (Plan voice actions) |
| Brand attribution | Display the app icon on all content screens and choose where to apply the third-party app color as an accent | Provide app icon and specify accent color (See Provide branding elements) |
| Sign-in and settings | Provide a settings affordance for search and settings on the app bar bar and connect users to sign-in screens as needed | Use templates to create a sign-in flow and settings screens. If needed, see Adapt sign-in flow and Design settings |
| Recommendations | Provide UI for content recommendations to appear | Provide a source for appropriate content recommendations |