Media belongs to a suite of system applications (for example, Dialer and App Launcher). These applications share common styles and assets defined at different levels in the AOSP structure.
framework/base.All Android base styles are defined here.
packages/services/Car/car_product/overlay.Contains build-time overlays that modify standard framework/base resources to produce the AOSP look-and-feel of Android Automotive OS. OEMs may opt to exclude this overlay and use their own.
packages/apps/Car/libs/car-ui-lib.This library defines AAOS components and resources common to system applications and unbundled applications designed for customization. For more details, refer to the Car UI Library Integration Guide.
packages/apps/Car/libs/car_app_common. Common colors and styles shared between Automotive system applications. OEMs can use overlays to customize these elements (similar to
packages/apps/Car/libs/car_media_common. Contains elements shared between Media and other media UIs (for example, the Home screen Media widget).
packages/apps/Car/Media. All system applications use their own theme, which extends from
Android Automotive AOSP provides two presentations of media.
- Media UI. Enables users to sign in, browse content, and use detailed playback controls.
- Home screen media widget. Enables the use of core media playback control features to the Home screen.
This figure describes the structure of the Media UI:
Figure 1. Media UI
For details about UX and UI guidelines as well as the spatial structure of the different components of Media, see Spatial Model.
The Media UI toolbar is a component shared with other system applications, such as Dialer and Radio. For a description on its customization, see the Car UI Library Integration Guide.
Browse consists primarily of a Car UI RecyclerView (which handles scrollbar position, arrows, and margins) and browse items of different types, such as headers, grid items, icon grid items, list items, and icon list items.
Minimized Playback Controls
When the browse fragment is being displayed, and when a media item is selected, a minimized playback controls view is displayed. The following figure illustrates the structure of this view:
Figure 2. Minimized playback controls
Developers can use a set of style hint (see Apply Content Styles) to customize the presentation of media browse content. OEMs must adhere to these styles, adjusting presentation to their design system.
Supported item types and the respective layouts are located as follows:
media_browse_list_item.xml). Commonly used for episodes in a podcast, such as playlist items, and favorites.
media_browse_list_icons_item.xml). Used for categories or menu options, in which the image included with the media item is not actual album art but an icon.
media_browse_grid_item.xml). Commonly used for playable items, like songs or playlists.
media_browse_grid_icons_item.xml). Used for categories, similar to
media_browse_header_item.xml). Used to organize media items into sections.
To display this screen, expand the minimized playback controls:
- Currently playing media item medata (including title and subtitle).
- Complete playback controls.
- Playback queue (used to display recently played or next items to play).
Components of the Playback screen are identified in the figures below.
Figure 3. Playback screen
Playback screen doesn’t share the toolbar with the rest of the application. Instead, the elements on the top of the screen are individually managed by this screen.
The playback screen includes an extended set of playback controls, organized in control
rows. The secondary row (displayed below as the row on the top) is only displayed if the space
on the first row is not enough to display all the actions returned by the media app from
Figure 4. Playback controls.
OEMs can customize the icons of standard actions, but they must present custom action icons as they are provided by the media applications.
Home Screen Media Widget
This widget is implemented as a fragment in
This fragment includes a minimized version of the Playback Screen described above. All the same
customization rules and capabilities apply.
Figure 5. Home screen media widget
The App Selector button dislayed above uses the switch functionality described in Media Source Switching User Flow.
Play/Pause/Stop Button Layout
The Play/Pause/Stop button layout can be customized for "Now playing" and
the minimized playback controls view. Both layouts are defined in
To customize button layouts, apply build-time overlays to