Build Glanceable UIs for Android XR Glasses with Glimmer
Step-by-step guide to creating glanceable UIs for Android XR display glasses using Jetpack Compose Glimmer, including setup, components, and best practices.
Android XR display glasses, including the newly launched XREAL AURA, require interfaces that stay out of the way while remaining readable against real-world light. Jetpack Compose Glimmer solves this by providing a purpose-built Compose toolkit for optical see-through displays.
Unlike phone or headset UIs, glasses displays are additive: they can only add light and cannot create true black. Standard Material components produce poor contrast and visual noise in this environment. Glimmer defaults to dark surfaces, high-contrast text, outline focus indicators, and simplified shapes so content stays glanceable.
This guide shows how to add Glimmer to a project, apply the theme, and assemble a simple list-and-button UI suitable for display glasses. For emulator setup on XR devices, see our Android XR emulators in Studio Rabbit 2 guide.
Why Glimmer exists for display glasses
Display glasses project content at roughly one meter perceived depth while the wearer continues looking at the physical world. Interfaces must prioritize essential information, limit density, and fade when no longer relevant.
Glimmer handles several glasses-specific constraints:
- Dark or transparent surfaces so the real world remains visible
- Bold typography with increased letter spacing for legibility at small visual angles
- Outline-based focus instead of ripples
- Limited elevation and shadows suited to additive displays
- Pre-built components (buttons, lists, title chips, cards) that respect these rules
You can still customize primary and secondary colors for branding, but the base theme keeps content readable across varying lighting.
Add the Glimmer dependency
Glimmer is an AndroidX library. In your module-level build.gradle.kts (or Groovy equivalent), add:
dependencies {
implementation("androidx.xr.glimmer:glimmer:1.0.0-alpha22")
// Optional: Google Sans Flex typography
implementation("androidx.xr.glimmer:glimmer-google-fonts:1.0.0-alpha22")
}
Use the latest alpha listed in the AndroidX release notes. Target Android 15 (API 35) or higher and include the XR SDK components needed for your device type.
If you work with AI coding agents, the Android CLI skill installs guidance for this toolkit:
android skills add display-glasses-with-jetpack-compose-glimmer
Wrap your UI in GlimmerTheme
Apply the theme at the root of any glasses-targeted activity or projected experience. Do not mix MaterialTheme or Material 3 components inside Glimmer surfaces.
import androidx.xr.glimmer.GlimmerTheme
import androidx.xr.glimmer.googlefonts.createGoogleSansFlexTypography
@Composable
fun GlassesApp() {
GlimmerTheme(
typography = createGoogleSansFlexTypography()
) {
// Your glanceable content here
ShoppingListScreen()
}
}
The theme supplies colors, shapes, typography, and spacing defaults. Surfaces default to black or transparent backgrounds, and content colors are calculated automatically for contrast.
Build a simple glanceable screen
A practical starting point is a title chip plus a short list of actions. Glimmer provides TitleChip, List, ListItem, and Button composables optimized for the form factor.
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.List
import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.TitleChip
import androidx.xr.glimmer.Text
@Composable
fun ShoppingListScreen() {
Column {
TitleChip(text = "Shopping List")
List {
items(listOf("Milk", "Bread", "Eggs")) { item ->
ListItem(
headlineContent = { Text(item) },
supportingContent = { Text("Tap to check off") }
)
}
}
Button(onClick = { /* handle */ }) {
Text("Add item")
}
}
}
Focus is indicated with outlines rather than ripples. Elevation uses limited shadows so hierarchy remains clear without fighting the additive display. For more complex layouts, start from the bottom and keep the number of simultaneous elements low.
Preview and test
Android Studio supports composable previews for Glimmer UI. You can also create an XR glasses virtual device in Device Manager to simulate the optical see-through experience.
On hardware such as XREAL AURA, enable developer options, connect via USB-C, and deploy as you would any Android app. The Compute Puck handles processing while the glasses display the projected content.
Design tips for all-day wear
Keep interactions short. Show information only when needed and remove it promptly. Prefer high-contrast, bold text and rounded shapes. Avoid dense grids or phone-style navigation patterns.
Use depth (z-order plus subtle shadows) to communicate priority rather than color alone. Test in varied lighting because real-world backgrounds change constantly.
If you also need world-anchored content, combine Glimmer UI with ARCore Geospatial APIs available for Android XR. For full spatial panels and 3D models on headsets or wired glasses, explore the broader Jetpack XR SDK and SceneCore components.
Conclusion
Jetpack Compose Glimmer gives Android developers a familiar Compose surface that respects the constraints of display glasses. Start with the theme, use the provided components, and keep content minimal. With XREAL AURA and other Android XR devices shipping, these patterns let you extend useful mobile features into glanceable, always-available experiences without overwhelming the wearer.
Sources
Share this story
