Spatial model

This introduction to the media app template describes its main elements, the basic functions they provide, and the architecture that holds them together.

More detailed descriptions of how each element works are provided in the sections that follow this one. For a guide to these sections, refer to the overview for this section.


The media template includes the following:

  • App bar – Features primary app navigation and app controls (for in-app search and settings) and includes an app icon
  • Browseable content space – Displays content in either a grid view (shown here) or a list view
  • Playback controls – The minimized control bar shown here includes basic media metadata and playback controls, and it also provides access to a playback overlay with more controls
1. App bar with primary navigation tabs and app controls
2. Browseable content space
3. Playback controls (shown here on minimized control bar)

This sample layout shows just one possible arrangement of these elements. For example, car makers can decide to stack primary navigation and app controls rather than keeping them in a single horizontal bar, depending on the screen dimensions. The navigation hierarchy is described in more detail in the sections that follow.

Primary navigation

The primary navigation in the app bar consists of exposed tabs (except in rare cases where the screen is too small).

This example shows a typical tab arrangement:

Users can select tabs such as Home and Playlists on the app bar to navigate to these top-level views of media content.
Selecting a tab on the app bar replaces the current view with a different top-level app view.

App controls

App controls (shown at upper right in the example below) occupy the portion of the app bar not used for branding or primary navigation. They provide access to in-app search and settings functions for the current media app.

Selecting an app control opens an overlay. For example, the Settings affordance shown here opens an overlay that displays the Settings interface. When users close the overlay, they return to their previous location in the app.

Selecting the Settings affordance on the app bar opens an overlay that allows users to access app settings.
When an app control is selected, it opens an overlay on top of the browsable content, and the app bar changes to an app header.

Browseable content space

Within the browsable content space, users can scroll through content and navigate through z-space into individual items, down consecutive levels of hierarchy.

Because navigating through multiple levels increases the driver’s cognitive load, Google recommends keeping the information architecture relatively flat, with as few levels as possible.

The top level of browsable content lets users choose from a grid (as shown here) or list.
Making a selection from browsable content opens the next level down with more detail.

Playback controls

Playback controls in media apps can appear in either of two forms, depending on the circumstances:

  • Minimized control bar (available across views)
  • Playback view (overlay with full control bar)

These two forms alternate along the bottom of the screen in the animated example that follows.

Minimized control bar

The minimized control bar floats at the highest level of the browsable content space, above the content. It provides information about what's currently playing, along with basic affordances for user control of playback.

Once content begins playing, the minimized control bar remains available while a user is browsing media content. It persists until a new media app is selected or until the user taps the minimized control bar to display the playback view.

Playback view

The full control bar is available only in playback view, and it also floats above the content. In addition to the affordances available from the minimized control bar, the full control bar can provide more extensive controls defined by each media app.

Selecting the minimized control bar anywhere outside of the touch targets for its controls expands it to a full-screen playback overlay (the playback view), as shown here.
The playback view overlay sits on top of the browsable content space, and the minimized control bar is replaced by the full control bar with additional controls.