Google on what to expect from Android XR transparent displays

Source: 9to5Google

Designing for Transparent Screens

Google Design published an article this week about Designing for Transparent Screens and the work that went into Jetpack Compose Glimmer, Android XR’s design system for Display AI Glasses.

Perceived Depth and Focus

For smart glasses with displays, the interface does not appear on the surface of the lens. Instead, it is projected to a perceived depth of about one meter away, within a square display area.

“Place your hand at arm’s length and focus on your fingers. The environment behind and around your hand goes out of focus.”

This means users must consciously shift their gaze from the real world to the one‑meter focal plane to read any content. The interaction is an active, physical choice rather than a passive glance.

Motion and Notification Transitions

Motion on this type of display must avoid being “distracting or extraneous.” Google found that a typical motion transition of around 500 ms appeared too fast—notifications would “blink” into view.

The solution adopted for Android XR uses incoming notification transitions lasting about two seconds, during which a circular badge expands into a pill shape.

Typography for One‑Meter Distance

Google Sans Flex’s optical size axis is employed to improve readability at the one‑meter distance:

• Larger counters on letters like a and e
• Dots on j and i are positioned farther from the letter body

Bold typography and increased letter spacing are also recommended. Text is measured in visual angle (degrees) rather than pixels or points, similar to how highway signs appear larger as you approach them.

Additive Display Constraints

These glasses use an additive display that can only add light; it cannot create black, which appears as 100 % transparent. Google likens this to “how a home movie projector can’t project black.”

Issues with Existing Material Components

Porting existing Material components presented two major problems:

1. Bright, opaque surfaces (paper metaphors) turned into large, bright blocks of light, causing glare and high battery consumption.
2. Halation – bright light bleeding into adjacent darker areas – made text illegible.

Design Solutions

• Surfaces use black to provide a legible “clean plate” foundation.
• A new depth system casts dark, rich shadows to convey occlusion and space.

Color Strategy

Highly saturated colors that work on phones tend to “disappear” against the real world. Consequently, Android XR UI is neutral by default to harmonize with diverse real‑world colors. Color is used sparingly to highlight buttons and important elements.

Surfaces in Glimmer are always dark, while content is always bright, establishing a high‑contrast foundation for legibility across most environments.