display-glasses-with-jetpack-compose-glimmer

Builds Android XR display glasses apps using the Jetpack Compose Glimmer UI toolkit.

2|Updated Jun 21, 2026
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill display-glasses-with-jetpack-compose-glimmer-iskenkenya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: display-glasses-with-jetpack-compose-glimmer
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/android/xr/display-glasses-with-jetpack-compose-glimmer
Command: npx skills add https://github.com/IsKenKenYa/skills --skill display-glasses-with-jetpack-compose-glimmer-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires androidx.xr.glimmer:glimmer, androidx.xr.glimmer:glimmer-google-fonts, and includes references (resource) components.

What problem does it solve? Building UI for display glasses is fundamentally different from phone apps: additive displays render black as transparent, standard Material components become invisible, and input is one-dimensional via a touchpad. This Skill guides you through creating projected Android XR experiences that follow the Glimmer design system so your app is legible and usable on eyewear. ## Core Features & Use Cases - Projected Activity Setup: Configure a Glasses Activity with ProjectedContext, xr_projected display category, and a "Launch on Glasses" entry point from an existing mobile app. - Glimmer Component Implementation: Build Cards, Buttons, Title Chips, Icons, Lists, Stacks, Text, and Surfaces with correct theming via GlimmerTheme, backed by API source code and sample references. - Design Constraint Enforcement: Apply mandatory rules such as pure black backgrounds, Google Sans Flex typography with variable font axes, 18sp minimum text size, 70% HCT color contrast, and depth effects via DepthEffectLevels. - Use Case: You have an existing Android app and want to extend it to display glasses. The Skill walks you through adding the Glimmer dependency, creating a projected activity, and building a bottom-aligned card UI that works with the glasses touchpad. ## Quick Start Use the display-glasses-with-jetpack-compose-glimmer skill to add a Glimmer-based glasses activity to my Android project with a card list UI.

Frequently Asked Questions about display-glasses-with-jetpack-compose-glimmer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an Android app for display glasses with Jetpack Compose?

Use the Jetpack Compose Glimmer toolkit with a Projected Activity that renders UI on connected eyewear. Add the androidx.xr.glimmer:glimmer dependency, wrap all UI in GlimmerTheme, and set a pure black background since additive displays render black as transparent.

What is Jetpack Compose Glimmer and when should I use it?

Jetpack Compose Glimmer is a Compose UI toolkit optimized for display glasses with transparent additive displays. Use it when building Android XR augmented experiences for eyewear instead of Material components, which resolve to dark tokens that appear invisible on transparent displays.

Can I use MaterialTheme or Material components on display glasses?

No. Material components and MaterialTheme are not supported on display glasses because their dark foreground tokens render as transparent on additive displays. You must use GlimmerTheme and Glimmer components like Glimmer Text, Card, and Button instead.

What are the minimum text size and typography requirements for glasses UI?

The absolute minimum readable text size is 18sp (0.6 degrees visual angle). You must use Google Sans Flex via createGoogleSansFlexTypography with ROND set to 100f, width 100f, optical size 9f, and role-specific weights such as 725 for titles and 520 for body text.

How does input and focus work on display glasses?

Input is one-dimensional through the glasses touchpad using tap and swipe gestures. Glimmer uses one-dimensional focus search, and you must set isInitialFocusOnFocusableAvailable to true in onCreate so the system assigns initial focus automatically.

Why is my UI invisible or unreadable on display glasses?

Common causes include using Material Text instead of Glimmer Text, missing the mandatory black background on the root container, or insufficient contrast. Ensure at least 70% tone difference in the HCT color space and never use pure black for icon tints.