Display Glasses With Jetpack Compose Glimmer

Glossary

Prerequisites

• Mobile project must target compileSdk 37 or higher. If the compileSdk is lower than 37, increase the compileSdk to 37.
• Ensure you are using the latest library dependencies from Create your first activity for intelligent eyewear.

Core Constraints

• Don't: Use MaterialTheme or Material Components.
• Do: Use GlimmerTheme and Jetpack Compose Glimmer Components.
• Do: Use createGoogleSansFlexTypography() from androidx.xr.glimmer:glimmer-google-fonts as the Typography value for GlimmerTheme to ensure that consistent typography is applied throughout the components.

Limitations

• Specific hardware device models or their unique capabilities are not detailed.
• Elevation: Standard Material 3 shadow or elevation modifiers are not supported. You must use ShadowScope or Depth tokens from Jetpack Compose Glimmer.
• Minimum Size: The absolute minimum size for readable text is 18sp (0.6°). Anything smaller will fail legibility checks.
• Text Weight: Avoid "Thin" or "Hairline" weights; they cause shimmering and aliasing on additive AR lenses.

1. Set up dependencies

• Setup Projected Activity: First, you need to create a new projected activity for your app. If the project doesn't already have one, see Create your first activity for intelligent eyewear. Use references/projectedcontext-source.md to launch the Glasses Projected activity on the Projected Device. Ensure that you specify xr_projected for the android:requiredDisplayCategory attribute in app manifest to tell the system that this activity will use a projected context to access hardware from a connected device.
• Mobile App Integration: If the project contains an existing mobile app, you must create a new Glasses Activity dedicated to rendering Glimmer UI. For detailed configuration, heavily reference Create your first activity for intelligent eyewear. If there isn't already a method to launch the Glasses Activity, add a button to the existing mobile app UI labeled "Launch on Glasses" that uses ProjectedContext to launch the Glasses Activity on the glasses. Place the 'Launch on Glasses' button as a screen-level FloatingActionButton, in the TopAppBar, or in the top navigation bar to ensure users discover the projection capability. If the glasses aren't connected, disable the button. Don't launch the Glasses Activity on the phone, only on the display glasses. If it makes sense to automatically launch the Glasses Activity without an explicit launch button, then do so.
• UI Library: Identify if the project has the androidx.xr.glimmer:glimmer library, if not it must be added to the project. See Declaring Jetpack Compose Glimmer Dependencies to fetch the latest dependency version.
• Theming: All Glimmer components must be wrapped within the GlimmerTheme composable to ensure correct token resolution.
• Mandatory black background: Display glasses use additive displays. Any non-black color in the background blocks the real world. You must always set a pure black background (Modifier.background(Color.Black)) on the root container of your Projected Activity.
• Font: The default font is Google Sans Flex. Use androidx.xr.glimmer.googlefonts library with the default type styles unless otherwise specified. Use createGoogleSansFlexTypography to create a Typography instance with the Google Sans Flex configuration. Provide this Typography instance as normal through GlimmerTheme. Use references/glimmersansflextypography-source.md for configuration.
• Hardware Capabilities: Different types of intelligent eyewear devices have different capabilities. To check for these at runtime, see the Check device capabilities at runtime for intelligent eyewear.
• Hardware Permissions: To request hardware permissions like the microphone and camera, see the Request hardware permissions for intelligent eyewear.
• Hardware Access: To use the glasses camera, sensors, or access the phone's hardware, see the Use a projected context to access hardware on intelligent eyewear.

2. Minimize and translate the UI

• For display glasses, build UI using components from the Jetpack Compose Glimmer framework.
• Use depth to communicate element priority and hierarchy.
• Design from the bottom up, trying to minimize how much of the real world you cover. Always bottom align UI to the glasses display.
• One Thing at a Time: Prioritize the user's awareness of the real world. Show only one primary piece of information at a time (for example, using a Stack) to minimize obstruction of the user's field of view. Avoid multiple simultaneous cards.
• Color Contrast: Ensure at least a 70% tone difference between foreground and background using the HCT color space. For calculation metrics, use references/material-hct-source.md.

3. Map input controls

• Map app interactions, such as tap and swipe, to the available hardware controls on the glasses, such as the touchpad.
• Inputs are one-dimensional; users must make one control input at a time.
• Avoid nesting scrolling controls.
• Jetpack Compose Glimmer components are designed to work with standard input methods, such as a tap or swipe on the glasses' touchpad.
• Use System Back to dismiss temporary states or detailed views.
• To add input, focus, tap, swipe to your Glasses UI, follow Focus in Jetpack Compose Glimmer.
  • For a detailed breakdown of hardware inputs, see Hardware Controls for display glasses

4. Build with Jetpack Compose Glimmer

Jetpack Compose Glimmer is the UI toolkit for building augmented experiences on display glasses.

Key Features

• Glimmer Theming: A simplified glasses-specific theme for optimal visibility.
• Pre-compatible Input: Supports tap and swipe by default.
• Pre-built Components: Provides optimized composables like Card, ListItem, Button, etc.

Focus Management in Glimmer

• Jetpack Compose Glimmer uses a one-dimensional focus search.
• Focus movement is continuous for scrollable containers and discrete for elements like a row of buttons.
• To enable the system to automatically set initial focus, you must set the isInitialFocusOnFocusableAvailable flag to true in your activity's onCreate method. For more information on how to implement, see Focus in Jetpack Compose Glimmer.

Implementing Glimmer Styles

Glimmer styles are accessed through the GlimmerTheme object. Use references/glimmertheme-source.md for reference.

Typography Scale (Google Sans Flex)

Strict default: When creating Glimmer UI you must use Google Sans Flex unless a custom brand typeface is explicitly specified. Variable Font Settings: As Google Sans Flex is a variable font, you must configure the following axes:

• Roundness (ROND): Always set to 100f for the signature rounded appearance.
• Width (wdth): Set to 100f.
• Optical Size (opsz): Set to 9f.
• Weight (wght): Use specific values for different roles (Title: 725f, Body: 520f, Caption: 650f).

Depth Levels

Simulate depth on display glasses using shadows to establish a sense of hierarchy through varying levels of emphasis. The Jetpack Compose Glimmer controls use DepthEffect with 5 preset DepthEffectLevels. Use references/deptheffect-source.md and references/deptheffectlevels-source.md for reference.

Some examples:

Implementing Jetpack Compose Glimmer Components

Cards

Cards are a fundamental surface-based container in Glimmer used to group related content, such as text, images, icons and actions into a single focal point. They establish a clear depth plane (Z-axis) in the Glasses environment, providing a stable background for text, images, and icons. Never embed a card within a List Item.

Core Implementation Logic

• Surface Hierarchy: Cards are designed to sit on a base surface or within a list. They provide an automatic visual feedback when focused if an onClick lambda is provided.
• Interactivity:
  • IF the entire Card serves as a single trigger (e.g., a media item or a setting): THEN provide an onClick lambda to enable focus effects.
  • ELSE: Leave onClick as null if the Card contains multiple internal interactive elements (like separate buttons or switches) to avoid focus contention.

Technical Documentation Links

If you are creating a Glimmer Card component, read the:

• Developer Guidance: Jetpack Compose Glimmer: Cards
• API Source Code: Use references/card-source.md.
• Implementation Samples: Use references/card-samples-source.md. (Basic and Interactive Card usage)

Buttons

Buttons are the primary triggers for discrete actions in Glimmer. They are specifically optimized for the display glasses focus model, where a focus highlight is added when focus is moved to the button using the touchpad or other methods.