Navigating media apps

This section describes how a media app’s top-level app navigation works.

Users navigate among top-level content views in a media app using the app bar, which can include the following navigational elements:

  • Primary navigation tabs (or variants)
  • App selector (optional for OEMs)

The app bar can also include an app icon and app controls, which are discussed in App branding and Sign-in, settings & search.

Primary navigation tabs

Primary navigation for content views within a media app generally consists of up to 4 tabs in an app bar (unless the screen is extremely small and lacks room to display tabs). These tabs let users move laterally between content views at the top level of the app hierarchy.

When a user selects a tab, the destination reflects the user's previous interaction with that view of the content. For example, if a tab’s content was previously scrolled during the same media app session, the scroll position will be retained when the user returns to that tab.

Tabs in the app bar allow users to move laterally between content views.

Primary navigation variants

Each primary navigation item is typically represented with tabs that include both an icon and label. Including both reduces the cognitive load for drivers, because icons improve glanceability and labels clarify the meaning.

This app bar includes an icon and a label for each tab.

However, car makers may use alternate navigation strategies in some situations:

  • Labels only: If the screen is not tall enough to accommodate a reasonable amount of content as well as tabs that include both icons and labels
  • Drawer: If the screen is not wide enough for tabs
  • No tabs: If there is only one primary navigation option
In some special cases, the app bar may include one of these navigation strategies as an alternative to tabs with icons and labels (top to bottom): Tabs with labels only, a drawer instead of tabs, or a single top-level view of content with no tabs.

App selector

The app selector provides quick access to other media apps. car makers can decide whether to provide an app selector. For example, some car makers may prefer to rely solely on a list of all available apps as the mechanism for switching media apps.

callout icon
App branding
App icon placement may or may not involve an app selector
When the app bar is located at the top or bottom of the screen, the app selector is typically positioned on the app bar's right side.

When invoked, the app selector provides access to other media apps. When a user selects a different app, that app is displayed.

Typical apps available from app selector.

App bar positioning

Car makers determine the location for the app bar across all Android Automotive OS templates, including the media template. As long as it's always in the same place, the app bar can appear at the top or bottom of the screen or on one side. It's also possible to stack the tabs and app controls within the app bar.

To minimize cognitive load and ensure a reliable user experience, the app bar and its affordances must always appear in the same location across the entire infotainment system.