App experience
Stay organized with collections
Save and categorize content based on your preferences.
The app experience in the portrait reference design features 2 layers.
These layers allow users to interact with apps on both layers:
For the optimal multitasking experience, it's recommended that the base layer
run navigation apps, while the top layer run other types of apps using the
system app templates.
Base layer
The base layer encompasses almost the entire car screen.
It can run multiple apps at a time but only 1 of those apps will be visible
to the user. All the app's standard controls are available to the user.
For guidance about implementing and customizing the base layer, see
Base layer best practices and
Base layer customization.
Base layer best practices
Best practices for OEMs:
- Run separate apps on base and top layers: Don't run the same app
simultaneously on both layers.
- Run a navigation app on the base layer: Since drivers refer to
navigation apps the most during their car journey, use the base layer to
keep a navigation app always available. With the
control bar
providing media controls, drivers get an optimal media and navigation
experience on the car screen.
Top layer
The top layer can run any type of app, including phone apps (such as
Dialer) and
media apps providing content such as music, podcasts, radio, or bluetooth audio.
These apps run in
system app templates. In addition, media content can be
accessed from the
app launcher
and the
control bar.
When the top-layer app is opened, the base-layer app becomes responsive to the
screen space adjustment. That is, the base layer responds to the top-layer app's
expansion on the screen by reducing its own screen area.
System app templates
System app templates help build a consistent user
experience throughout the infotainment system. They are provided for
settings, media, and phone apps. The template consists of the following:
- App header at the top
- Vertical app menu to the left within reach of the driver
- App body content area
- Persistent controls in the control bar for some apps
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-23 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eThe portrait reference design features two app layers: a base layer for core apps like navigation and a top layer for other apps like media or phone.\u003c/p\u003e\n"],["\u003cp\u003eFor optimal multitasking, it's recommended to run navigation apps on the base layer and other app types on the top layer using system app templates.\u003c/p\u003e\n"],["\u003cp\u003eThe base layer occupies most of the screen and can run multiple apps, but only one is visible at a time with full functionality.\u003c/p\u003e\n"],["\u003cp\u003eThe top layer utilizes system app templates to ensure a consistent user experience across the system for settings, media, and phone apps.\u003c/p\u003e\n"],["\u003cp\u003eSystem app templates include an app header, vertical menu, body content area, and persistent controls in the control bar for some apps.\u003c/p\u003e\n"]]],[],null,["# App experience\n\n\u003cbr /\u003e\n\nThe app experience in the portrait reference design features 2 layers.\n\nThese layers allow users to interact with apps on both layers:\n\n- [Base layer](#base)\n- [Top layer](#top-layer)\n\nFor the optimal multitasking experience, it's recommended that the base layer\nrun navigation apps, while the top layer run other types of apps using the\nsystem app templates.\n\nBase layer\n----------\n\nThe base layer encompasses almost the entire car screen.\n\nIt can run multiple apps at a time but only 1 of those apps will be visible\nto the user. All the app's standard controls are available to the user.\n\nFor guidance about implementing and customizing the base layer, see\n[Base layer best practices](#best-practices-base) and\n[Base layer customization](/cars/design/automotive-os/product-experience/system-ui/portrait-reference/customization#base-layer). \n\n\u003cbr /\u003e\n\n### Base layer best practices\n\nBest practices for OEMs:\n\n- **Run separate apps on base and top layers**: Don't run the same app simultaneously on both layers.\n- **Run a navigation app on the base layer** : Since drivers refer to navigation apps the most during their car journey, use the base layer to keep a navigation app always available. With the [control bar](/cars/design/automotive-os/product-experience/system-ui/portrait-reference/system-experience#control-bar) providing media controls, drivers get an optimal media and navigation experience on the car screen.\n\nTop layer\n---------\n\nThe top layer can run any type of app, including phone apps (such as\n[Dialer](/cars/design/automotive-os/apps/dialer/overview)) and\nmedia apps providing content such as music, podcasts, radio, or bluetooth audio.\nThese apps run in\n[system app templates](#sys-app-templates). In addition, media content can be\naccessed from the\n[app launcher](/cars/design/automotive-os/product-experience/system-ui/portrait-reference/system-experience#app-launcher)\nand the\n[control bar](/cars/design/automotive-os/product-experience/system-ui/portrait-reference/system-experience#control-bar).\n\nWhen the top-layer app is opened, the base-layer app becomes responsive to the\nscreen space adjustment. That is, the base layer responds to the top-layer app's\nexpansion on the screen by reducing its own screen area.\n\n### System app templates\n\nSystem app templates help build a consistent user\nexperience throughout the infotainment system. They are provided for\nsettings, media, and phone apps. The template consists of the following:\n\n1. App header at the top\n2. Vertical app menu to the left within reach of the driver\n3. App body content area\n4. Persistent controls in the control bar for some apps \n\n\u003cbr /\u003e"]]
