Media apps

While app developers provide the core content, icons, and custom actions for their media apps, car makers have the flexibility to customize the overall visual experience. This ensures that third-party media apps feel like a native part of the in-vehicle infotainment experience.

What car makers can customize

  • Configure the app bar: The position, styling, and specific functional elements of the media app bar
  • Style browsing views: The app header (position and style), as well as the visual styling of grid and list items
  • Style playback layouts: The layout and styling of the playback view, including the minimized control bar.
  • Design the search overlay: The appearance of the keyboard, overlay elements, and the styling of search results
  • Display app branding: How the app icon is positioned on content screens and how the app's accent color is integrated into the UI.

Configure the app bar

The app bar is the primary navigation and branding element for media apps in cars with Google built-in. It provides users with context about where they are in the app and gives them quick access to essential features like search and browsing.

You can customize the app bar to align with your car's brand by using design tokens to modify its appearance, layout, and functionality.

Anatomy

The media app bar typically consists of the following elements:

  • Navigation icon: Usually a back arrow to return to the previous screen.
  • App branding: Your app's logo or name.
  • Tabs: Navigational links for top-level categories, such as "Browse" or "Search".
  • Action icons: Contextual actions like the Search icon.

Customize the appearance

Use design tokens to ensure the app bar matches your car's system theme. Tokens allow you to define colors and typography that automatically update across the UI.

  • Background: Set the background color and opacity of the app bar using the appropriate surface tokens.
  • Typography: Use your brand's font and weight for the app title and tab labels by mapping them to system typography tokens.
  • Icons: Ensure navigation and action icons use consistent sizing and color tokens for legibility while driving.

Functional configurations

Manage tabs

You can choose which tabs appear in the app bar based on your app's structure. Common configurations include:

  • Standard browsing: Tabs for categories like Playlists, Artists, and Albums.
  • Search integration: A dedicated search tab or icon in the app bar for quick access to the keyboard or voice search.

Display branding

To maintain a cohesive look, you can decide how the app's logo or branding is displayed in the app bar. You can choose to:

  • Show the logo: Place the app logo next to the navigation icon.
  • Show the title: Use text for the app name if no logo is provided.

Style browsing views

Browsing views allow users to explore media content through grids and lists. Car makers can customize these views to ensure the media experience aligns with the vehicle's branding and system-wide design.

Header customization

The browsing header provides context for the user's current location in the content hierarchy. You can customize the following aspects of the header:

  • Position and styling: Adjust the vertical placement and visual design of the header, including height and background treatment.
  • Header elements: Customize specific components, such as the styling of the title text and the appearance of secondary icons.

Grid and list items

Media content is organized into grids or lists to help users browse efficiently. You can customize these layouts to improve readability and glanceability:

  • Item styling: Customize the visual appearance of individual items, including the size and shape of thumbnails and the typography for titles and subtitles.
  • Layout selection: Choose between grid or list formats based on the type of content being displayed (for example, using grids for album art and lists for track names).
  • Focus states: Define how items appear when they are selected or highlighted by the user.

Style playback layouts

The playback view provides users with controls and metadata for their currently playing media. Car makers can customize the appearance of this view and the minimized control bar to create a cohesive experience that aligns with the vehicle's brand.

Playback view anatomy

The playback view typically includes the following components:

  • Album art: The visual representation of the current media.
  • Metadata: Information such as the track title, artist name, and album title.
  • Playback controls: Essential actions like play, pause, skip, and shuffle.
  • Progress bar: A visual indicator of the current track's progress, often including a seekable thumb.

Customization options

You can use design tokens to modify the visual style of the playback experience.

Main playback screen

  • Background and overlays: Customize the background color, gradients, or opacity levels to match your system theme.
  • Typography: Define the font, size, and weight for track titles and artist information using system typography tokens.
  • Control styling: Customize the shape, color, and icon style of playback buttons (e.g., play, pause, next) to ensure they are consistent with other system controls.
  • Progress bar: Style the track and thumb of the progress bar using brand-specific colors.

Minimized control bar (MCB)

The minimized control bar allows users to control media while navigating other parts of the system. You can customize:

  • Position and layout: Determine where the MCB appears on the screen and how elements are arranged within it.
  • Element visibility: Choose which controls (such as play/pause or skip) are displayed in the minimized state.
  • Styling: Apply consistent colors and rounded corners to ensure the MCB feels like a native part of the system UI.

In-app search is a critical feature that allows users to find media quickly while in the vehicle. While app developers provide the search content, car makers are responsible for designing the search overlay, including the keyboard and the presentation of results.

Keyboard design

The search overlay uses different keyboard configurations depending on the vehicle's driving state to ensure safety and ease of use.

  • Standard keyboard: Displayed when the vehicle is parked. This is a full-featured keyboard for manual text entry.
  • Drive-optimized keyboard: Displayed when the vehicle is in motion. This version typically prioritizes voice input and may offer simplified manual entry or suggestions to minimize driver distraction.

Car makers can customize the visual style of these keyboards—such as key shape, background color, and typography—using system design tokens to match the vehicle's branding.

Once a user enters a query, the results are displayed in an overlay. You can customize the following aspects of this view:

  • Layout and spacing: Define how search results are grouped and how much space is provided between items for better legibility.
  • Item appearance: Customize the styling of list items within the search results, including font styles for titles and subtitles, and the size of associated thumbnails.
  • Empty and error states: Design the look of the overlay when no results are found or if a connection error occurs.

Display app branding

To create a cohesive media experience in cars with Google built-in, you can customize how third-party app branding is integrated into the system UI. This ensures that while the user knows which app they are using, the visual presentation remains consistent with the vehicle's overall design.

Brand elements

You can customize the placement and integration of the following app-specific elements:

  • App icon: The primary visual identifier for the media service.
  • Accent color: The brand-specific color provided by the app developer.
  • App name: The text-based name of the media service.

Customization options

Use design tokens to define how these branding elements appear across different media screens.

Icon placement and styling

You have flexibility in how the app icon is displayed within the media interface:

  • Positioning: Determine where the app icon appears on content screens, such as within the app bar or on the playback view.
  • Scaling and shape: Use system tokens to define the size and corner radius of the icon to ensure it matches other system-level icons.

Integrate accent colors

App accent colors can be used to provide a subtle hint of the app's brand without overwhelming the vehicle's UI:

  • Adaptive styling: You can choose how to incorporate the app's accent color into UI components like progress bars, active tab indicators, or buttons.
  • Color normalization: Ensure that app-provided colors meet contrast requirements for safety and legibility by applying system-defined color transformations.

Design best practices

  • Maintain system harmony: Ensure that app branding does not distract from the primary driving task or clash with the vehicle's system-wide theme.
  • Prioritize legibility: If using an app's accent color for text or icons, ensure it meets the necessary contrast ratios against your chosen background.
  • Consistent application: Apply branding rules consistently across all third-party media apps to provide a predictable user experience.
  • Use system tokens: Always map branding customizations to the provided design tokens to maintain compatibility with future system updates.