What's included in Jetpack Compose Glimmer

Applicable XR devices
This guidance helps you build experiences for these types of XR devices.
Learn about XR device types →
AI Glasses
Learn about XR device types →

Jetpack Compose Glimmer is built on Jetpack Compose and includes composables, components, behaviors, and a theme that are designed for AI glasses with a display. With Glimmer, you can build native UI for AI glasses using Compose, bringing your app experiences to life with less code, powerful tools, and intuitive Kotlin APIs.

Jetpack Compose Glimmer composables

Jetpack Compose Glimmer provides @Composable functions tailored for AI glasses displays, such as Text, Button, and ListItem. Here are some unique characteristics of Jetpack Compose Glimmer composables:

  • Simplified styling: The Surface components, for example, default to black or transparent backgrounds for optical display optimization.
  • Optimized color defaults: Jetpack Compose Glimmer calculates content color based on background color by default, so developers rarely need to manually set text colors, enhancing legibility without any additional work.

  • Differentiated focus: Focus is indicated using outline-based visual feedback instead of the ripple effect, which promotes clear visibility.

    Figure 1. Three focus states in Jetpack Compose Glimmer, which are differentiated using outline-based visual feedback.

  • Optimized Elevation: Jetpack Compose Glimmer uses limited box-shadows for visual separation

    Figure 2. Five levels of elevation in Jetpack Compose Glimmer, which are differentiated using limited box-shadows.

Jetpack Compose Glimmer components

Jetpack Compose Glimmer features its own set of custom-designed components, similar to the components in Jetpack Compose, but specifically optimized for the unique visual and interactive demands of AI glasses. Jetpack Compose Glimmer components are customizable with Jetpack Compose Glimmer's theme and build on lower-level Compose features to support user input methods like tap and swipe by default.

To learn more about using a specific component, see the following guides:

If one of these high-level components doesn't work for your use case, you can use a surface to build a custom component. Surfaces are the most-basic building block in Jetpack Compose Glimmer—a blank canvas for any specific, custom designs or interactions that you want to build.

Jetpack Compose Glimmer modifiers

Modifiers in Jetpack Compose Glimmer function identically to Compose modifiers, allowing you to augment composables by customizing their layout, appearance, and behavior. Jetpack Compose Glimmer might introduce specific modifiers or apply unique defaults for glasses-specific visual feedback and performance.

Jetpack Compose Glimmer depth

Jetpack Compose Glimmer components use depth to represent hierarchy, which helps to visually distinguish elements that display above (on top of) other cards. Depth on AI glasses is the combination of placement in z-space and shadows. For most high-level components, such as list items, depth is automatically applied based on focus state. When a component is focused, it gains depth; when it loses focus, it returns to its normal state. However for working with custom components, you can use the depth parameter on Modifier.surface, or Modifier.depth.

Jetpack Compose Glimmer's theme

Jetpack Compose Glimmer features a dedicated theming system for AI glasses. Jetpack Compose Glimmer's theme implements a simplified and optimized palette of colors, typography, and shapes. This promotes maximum visibility and conciseness for AI glasses. All Jetpack Compose Glimmer components are designed for automatic integration with AI glasses' specific input methods. Jetpack Compose Glimmer's theme is exposed using the GlimmerTheme class.

Like other themes in Jetpack Compose, GlimmerTheme includes several subsystems: colors, shapes, typography, and icons (symbolography). Jetpack Compose Glimmer's theme also includes Jetpack Compose Glimmer components that you can customize.

Colors

Jetpack Compose Glimmer's color system includes seven colors in its optimized palette, designed for maximum visibility and conciseness on AI glasses displays where black values don't render.

Figure 3. An overview of the colors in GlimmerTheme.

Note that "On ..." colors are not exposed through GlimmerTheme. These colors are automatically calculated by the system based on the background color.

These colors are exposed through GlimmerTheme.colors.primary, with values for each color role as described in the following table:

Color Role

Defaults

primary

#A8C7FA

secondary

#4C88E9

positive

#4CE995

negative

#F57084

surface

#000000

outline

#606460

outlineVariant

#42434A

Note that while surface, outline and outlineVariant are marked as customizable, we strongly recommend that you don't customize these values.

Shapes

Jetpack Compose Glimmer's shape system defines a set of standard corner treatments and geometric forms for components, designed to create a consistent and minimalist visual language on AI glasses UIs, with all shapes exposed through GlimmerTheme.shapes.

Figure 4. An example of large, medium, and small shapes in Jetpack Compose Glimmer.

Typography

Jetpack Compose Glimmer's typography system includes six typography styles for legibility and conciseness on AI glasses displays. These styles are designed to maximize contrast and improve text readability through bolder weights, wider letter spacing, and appropriate line heights. These styles are exposed through GlimmerTheme.typography.

Figure 5. An example of Jetpack Compose Glimmer's six typography styles.

Icons

Jetpack Compose Glimmer's icon system is designed to coherently integrate with the simplified visual language of AI glasses UIs, often leveraging rounded forms like Material Symbols Rounded for optimal readability.