Android Automotive: Customizing System Bars with Runtime Resource Overlays

As Android Automotive continues to evolve, automotive manufacturers often need to customize their vehicle's user interface to match their brand identity and user experience requirements. One crucial aspect of this customization is the system bar configuration. In this article, we'll explore how to customize system bars using Runtime Resource Overlays (RRO) in Android Automotive.

Understanding System Bars in Android Automotive

Before diving into the customization process, let's understand what system bars are in the context of Android Automotive. Unlike regular Android devices that typically have a status bar at the top and navigation bar at the bottom, Android Automotive supports up to four system bars:

• Top System Bar
• Left System Bar
• Right System Bar
• Bottom System Bar

Each of these bars can serve different purposes and can be configured independently to create a unified user experience that matches your vehicle's interface requirements.

Runtime Resource Overlays (RRO): The Customization Tool

Runtime Resource Overlays provide a powerful mechanism to modify resources at runtime without changing the original application's code. This is particularly useful for system UI customization in Android Automotive, as it allows manufacturers to:

1. Enable or disable specific system bars
2. Configure the type and behavior of each bar
3. Set z-order for overlapping bars
4. Customize the orientation of status icons
5. Control how bars behave during immersive mode

Implementation Guide

Let's walk through the process of creating an RRO to customize system bars.

Step 1: Project Structure

First, create a project structure that looks like this:

.
├── Android.bp
├── AndroidManifest.xml
└── res
    ├── values
    │   └── config.xml
    └── xml
        └── car_sysui_overlays.xml

Step 2: Define the Build Configuration

Create an Android.bp file to define your RRO package:

package {
    default_applicable_licenses: ["Android-Apache-2.0"],
}

runtime_resource_overlay {
    name: "CarSystemUICustomRRO",
    resource_dirs: ["res"],
    manifest: "AndroidManifest.xml",
    system_ext_specific: true
}

Step 3: Configure the Manifest

Create an AndroidManifest.xml that targets SystemUI:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.android.systemui.rro.custom">
    <overlay
        android:targetPackage="com.android.systemui"
        android:isStatic="true"
        android:resourcesMap="@xml/car_sysui_overlays"
    />
</manifest>

Step 4: Define System Bar Configuration

Create config.xml in the res/values directory to define your system bar configuration:

<resources>
    <!-- Enable/disable system bars -->
    <bool name="config_enableTopSystemBar">false</bool>
    <bool name="config_enableLeftSystemBar">true</bool>
    <bool name="config_enableRightSystemBar">false</bool>
    <bool name="config_enableBottomSystemBar">false</bool>

    <!-- Define system bar types -->
    <!-- STATUS_BAR = 0 -->
    <!-- NAVIGATION_BAR = 1 -->
    <!-- STATUS_BAR_EXTRA = 2 -->
    <!-- NAVIGATION_BAR_EXTRA = 3 -->
    <integer name="config_leftSystemBarType">1</integer>

    <!-- Configure z-order -->
    <integer name="config_leftSystemBarZOrder">10</integer>

    <!-- Set status icon orientation (0 = horizontal, 1 = vertical) -->
    <integer name="config_statusIconLayoutOrientation">1</integer>
</resources>

Step 5: Create Resource Mapping

Create car_sysui_overlays.xml in the res/xml directory to map your configurations:

<overlay>
    <item
        target="bool/config_enableLeftSystemBar"
        value="@bool/config_enableLeftSystemBar" />
    <item
        target="integer/config_leftSystemBarType"
        value="@integer/config_leftSystemBarType" />
    <item
        target="integer/config_leftSystemBarZOrder"
        value="@integer/config_leftSystemBarZOrder" />
    <item
        target="integer/config_statusIconLayoutOrientation"
        value="@integer/config_statusIconLayoutOrientation" />
</overlay>

Understanding Key Configuration Options

Let's break down some important configuration options:

System Bar Types

• STATUS_BAR (0): Displays status information like time, battery, etc.
• NAVIGATION_BAR (1): Contains navigation controls
• STATUS_BAR_EXTRA (2): Additional status information
• NAVIGATION_BAR_EXTRA (3): Additional navigation controls

Z-Order Configuration

The z-order configuration is crucial when you have multiple system bars that might overlap:

• Values below 10 place the bar behind Heads-Up Notifications (HUNs)
• Values 10 and above place the bar in front of HUNs
• Overlapping bars must have different z-orders to prevent runtime exceptions

Immersive Mode Behavior

You can control how system bars behave during immersive mode using config_systemBarPersistency:

• 0 (non_immersive): Show all system bars
• 1 (immersive): Hide all bars
• 2 (immersive_with_nav): Show navigation bar but hide status bar

Best Practices and Considerations

1. Consistency: Ensure your system bar configuration aligns with your overall UI/UX strategy.
2. Performance: Remember that each enabled system bar consumes system resources and screen real estate.
3. Testing: Thoroughly test your configuration across different screen sizes and orientations.
4. Z-Order Conflicts: Always assign unique z-orders to overlapping system bars to prevent runtime exceptions.
5. Icon Orientation: Choose the icon orientation that best matches your system bar placement (vertical for side bars, horizontal for top/bottom bars).

Conclusion

Runtime Resource Overlays provide a powerful and flexible way to customize system bars in Android Automotive. By following this guide and understanding the various configuration options, you can create a unique and cohesive user interface that meets your specific requirements while maintaining system stability and performance.

Remember that system bar customization is just one aspect of creating a great automotive UI. Consider how your system bar configuration integrates with other UI elements and contributes to the overall user experience of your vehicle's infotainment system.

Example Implementation

• https://github.com/hpnightowl/SystemUISystembarsAAOS