Google is committed to advancing racial equity for Black communities. See how.

Customizing Media

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 car_product/overlay described above).

  • 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 Theme.CarUi (defined in car-ui-lib).

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.

Media UI

This figure describes the structure of the Media UI:

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.

AppBarView: Toolbar

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 Fragment

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:

Minimized playback controls

Figure 2. Minimized playback controls

Browse List

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:

Playback Screen

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.

Playback screen

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.

Playback Controls

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 PlaybackStateCompat#getActions().

Playback controls

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 car-media-common. This fragment includes a minimized version of the Playback Screen described above. All the same customization rules and capabilities apply.

Home screen media widget

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 packages/apps/Car/libs/car-media-common/res/layout/.

To customize button layouts, apply build-time overlays to play_pause_stop_button_layout.xml and minimized_play_pause_stop_button_layout.xml.