Overview

Use Scalable UI, to build sophisticated, dynamic, and multi-panel user experiences in cars. Scalable UI:

  • Provides a flexible windowing system.

  • Minimizes engineering risks, costs, and complexities presented by the Compatibility Test Suite (CTS) for user interface implementations.

Scalable UI supports a wide range of modern In-Vehicle Infotainment (IVI) designs that need dynamic window arrangements.

Benefits and compliance

Scalable UI benefits include:

  • Lower test risk: The framework is pre-certified and compliant with the CTS, which eliminates the primary risk of test failures late in a program cycle. Scalable UI can save months of engineering effort and accelerate compliance.

  • More design flexibility: Proven capability to recreate numerous complex existing automotive windowing models. Scalable UI supports ambitious and highly differentiated designs.

  • Less implementation complexity: Abstraction into a high-level, config-driven XML model lowers the barrier to entry for custom windowing logic.

  • Better performance: Scalable UI is built on a highly performant windowing foundation, fully integrated with standard Android. Transitions are smooth and can be optimized.

Core building blocks

Scalable UI minimizes the need for OEM-specific code, eases updatability, and reduces launch risks by eliminating pitfalls and reducing certification issues.

Th XML-driven approach addresses common challenges when managing complex windowing systems in AAOS, such as those related to precise positioning, Z-order conflicts, and app focus.

Scalable UI provides these core building blocks.

Panel

A panel is the fundamental rectangular container on the screen. Each panel maps to a dedicated root task for independent management. A panel can host app tasks (TaskPanel) or view-based content, such as widgets (DecorPanel). To learn more, see Configure a panel.

Variant

A variant defines a specific visual state for a panel and includes properties such as bounds (position and size), visibility, layer (Z-order), and corner radius. A single panel can have variants, such as opened, closed, or minimized. To learn more, see Use a variant to design a visual state.

Transition

A transition defines how a panel moves from its current state fromVariant to a new state, toVariant. The transition can be triggered by an Event and can define the animation that the panel goes through during the state change. A panel should move from its current state to toVariant. For synchronization, all transitions are animated and coordinated by the core Window Manager.

  • Event: A trigger to initiate a UI change. An OEM or the system can predefine a trigger. For example, _System_OnHomeEvent, _System_TaskOpenEvent, or a custom navigation button press.

For example, Scalable UI uses events to trigger transitions. These transitions animate a panel from one variant to another to display dynamic changes in the UI. These changes are communicated to other system apps to adjust content as needed. By defining UI relationships in XML, you can:

  • Specify complex UI behaviors: Define intricate user interface interactions.

  • Arrange windowing systems: Control window positioning and layering.

  • Implement visual themes: Apply consistent branding and aesthetics.

  • Reduce code complexity: Minimize the need for extensive custom code development.

To learn more, see Configure a transition.

System UI buttons

In addition to triggering intents, CarSystemBarButtons can trigger a ScalableUI event when tapped using event, selectedEvent, and unselectedEvent attributes.

event describes the event to be triggered when the button is tapped. If more granular control over an event is required, use the selectedEvent and unselectedEvent attributes to specify the event to trigger when the button is selected or unselected, respectively.

When to implement System UI

This section describes optimal uses of Scalable UI.

Create persistent multipanel layouts

Create a multi-zone experience in which different areas of the screen are permanently dedicated to specific functions. For example, dedicated media controls, a climate strip, or a full-screen map.

Use TaskPanels for primary apps (such as navigation) and DecorPanels for UI elements, in the form of views, that must be placed between TaskPanels.

Implement a dynamic home scene

Implement a Home scene composed of multiple, concurrently visible, and interactive app panels. For example, map, media player, and app grid.

To transition all relevant panels to their opened or default home variants, configure _System_HomeEvent.

Apply contextual overlays

Place non-app UI elements, such as contextual widgets, custom branding, and drag bars that can be animated in coordination with app tasks.

Use DecorPanels for all purely decorative or widget-hosting elements. If a widget hosts a fully functioning, launchable app, a Panel > TaskPanel is optimal. Use DecorPanels for view-based UI elements when layering must be synchronized with the TaskPanel layering.

Design complex panel interactions

Design advanced user-driven actions, such as dynamically resizing an app panel or adjusting instrument cluster views based on main display content.

Define custom Events to trigger specific, non-system-standard Transitions.

Next
Implement advanced windowing