Implement the System UI

Android Automotive provides a new System UI developed specifically for vehicles. Most components of the System UI are tightly-coupled with framework services. System UI refers to any element displayed on the screen that is not part of an app. The Automotive System UI (in the CarSystemUI element package) is an extension of the Android System UI (in the SystemUI package), which has been customized specifically for vehicles.

What is System UI?

Components specific to the Automotive System UI include:

Component Description
Navigation Bar System bar that can can be positioned on the left, bottom, or right of the screen and that can include facet buttons for navigation to different apps, toggle the notification panel, and provide vehicle controls (such as HVAC). This differs from the Android System UI implementation, which provides the Back, Home, and app-stack buttons.
Status Bar System bar positioned along the screen and that serves as a navigation bar. The Status Bar also provides functionality to support:
  • Connectivity icons. Including Bluetooth, Wi-Fi, and Hotspot/Mobile connection.
  • Pulldown notification panel. For example, swiping down from the top of the screen.
  • Heads up notifications (HUN).
Volume UI Dialog displayed when the driver uses physical volume buttons to change the volume on a device.
Lockscreen UI Screen through which users are authenticated to a specific user account.
User Switcher UI Screen through which a user can select a different user.

How Does System UI Work?

System UI is an Android application that runs when a device is powered on. The application is started via reflection by the SystemServer. The most relevant entry points for user-visible aspects of System UI are listed. below. Use these components to customize the Android System UI for Automotive-specific capabilities.

  • config_statusBarComponent
  • config_systemUIFactoryComponent

CarSystemUI is an extension of the SystemUI package, meaning that classes and resources in the SystemUI package can be used and overridden by the CarSystemUI package.

Customizing System UI

Overlays

While you could modify the Android source code to customize the System UI, doing so makes it more difficult and complex to apply Android updates in the future. Instead, Android supports the use of an overlay directory, which enables you to replace resource files without modifying the source code. In the Android build system, the overlay system overrides files in a controlled manner and all modified files are clearly identified without traversing the entire tree of AOSP source code.

The overlay files must be placed in the PRODUCT_PACKAGE_OVERLAYS directory and must have exactly the same sub folders as the original AOSP root structure. For Android 10 or higher, PRODUCT_PACKAGE_OVERLAYS is set to:

PRODUCT_PACKAGE_OVERLAYS := packages/services/Car/car_product/overlay

The Automotive System UI uses resources from both the SystemUI and the CarSystemUI packages, which means that resources from each location can be overridden with overlays to affect the look-and-feel of the Automotive System UI.

To replace a file, replicate the directory structure of the file being replaced in the /overlay directory you specified and then include the replacement in that directory. For example, to replace:

frameworks/base/packages/CarSystemUI/res/layout/super_status_bar.xml

Add the replacement super_status_bar.xml file located in:

packages/services/Car/car_product/overlay/frameworks/base/packages/CarSystemUI/res/layout/

To replace frameworks/base/packages/SystemUI/res/values/config.xml, (in SystemUI, not CarSystemUI), add the replacement config.xml file to:

packages/services/Car/car_product/overlay/frameworks/base/packages/SystemUI/res/layout/

or,

packages/services/Car/car_product/overlay/frameworks/base/packages/CarSystemUI/res/layout/

Descriptions of the two primary customization entry point are provided below.

The Automotive System UI can have three navigation bars on the left, bottom, and right of the screen. The visibility of each system bar is toggled with the following configurations:

  • config_enableLeftNavigationBar
  • config_enableBottomNavigationBar
  • config_enableRightNavigationBar

Each bar has a provisioned and unprovisioned state, which can be customized by overlaying the respective layout files:

  • car_left_navigation_bar.xml
  • car_left_navigation_bar_unprovisioned.xml
  • car_navigation_bar.xml (layout for the bottom navigation bar)
  • car_navigation_bar_unprovisioned.xml
  • car_right_navigation_bar.xml
  • car_right_navigation_bar_unprovisioned.xml

These layouts must contain com.android.systemui.statusbar.car.CarNavigationBarView at the top level, which can include any other necessary views. Buttons inside the navigation bars can be included using either:

  • com.android.systemui.statusbar.car.CarFacetButton
  • com.android.systemui.statusbar.car.CarNavigationButton (allows for a more XML-based configuration)

These views will be inflated in CarStatusBar#createNavigationBar, if the device is properly provisioned for a given user.

Status Bar

Consider the Status Bar as a navigation bar with additional functionality. Unlike the navigation bar, the Status Bar does not have a flag to disable it. You can modify the Status Bar with:

  • car_top_navigation_bar.xml
  • car_top_navigation_bar_unprovisioned.xml

These layouts must contain com.android.systemui.statusbar.car.CarNavigationBarView at the top level. The Status Bar contains status icons. To change the size of an icon, scale the icon uniformly with a scale factor instead of specifying a specific size. For example, in an overlay file /overlay/frameworks/base/packages/CarSystemUI/res/values/dimens.xml, add the following dimensions to double the size of the icons:

<resources>
    <!-- The amount by which to scale up the status bar icons.-->
    <item name="status_bar_icon_scale_factor" format="float" type="dimen">2</item>
</resources>

The Status Bar resides in a special windowing layer that also includes the notifications panel, the user switcher, heads up notifications (HUNs), and the keyguard. The various layouts for these are included in super_status_bar.xml.

System UI Source Code Changes

Overlays may not provide the flexibility needed to sufficiently customize System UI behavior.

Alert. Changes made to Android source code will be difficult to update in later releases of Android. It's strongly recommended that you extend Automotive System UI code instead of directly modifying the code. This way, the underlying Automotive System UI source code can be upgraded with minimal merge conflicts since all customizations are implemented through known API surfaces.

Most aspects of the System UI can be customized through these two entry points:

  • config_statusBarComponent
  • config_systemUIFactoryComponent

For example, if you create a class named com.android.systemui.statusbar.car.custom.CustomCarStatusBar, which extends CarStatusBar, update config_statusBarComponent to point to this new component. Extending this class enables the customization of most elements that pertain to the system bar and the notifications logic.

Likewise, you can create CustomCarSystemUIFactory and place it in config_systemUIFactoryComponent. Use this class to update the functionality of the VolumeUI and Lockscreen.