display-glasses-with-jetpack-compose-glimmer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Glossary

术语表

Term	Definition
Intelligent Eyewear	All-day wear, hands-free devices that provide access to information. Equipped with speakers, a camera, and a microphone. Some are audio-only (audio glasses), and some also have a display (display glasses).
Display Glasses	Audio glasses with the addition of a small, private display for glanceable visuals that harmonize with audio output.
Jetpack Compose Glimmer	A Compose UI toolkit for building augmented Android XR experiences, optimized for display glasses. It provides components, theming, and behaviors for transparent displays.
Projected Activity (Glasses Activity)	An Android `Activity` that runs on a host device (phone) but its UI and interactions are projected to a connected, intelligent eyewear device (audio or display glasses).
Projected Device	An XR device connected to an Android-powered device (host). Host projects the application content to the Projected device and let users interact with it.
GlimmerTheme	The root provider for styling tokens, including GlimmerColors, GlimmerTypography, and GlimmerShapes.
Additive Display	A display technology where black (#000000) is rendered as 100% transparent. UI is built by adding light to the environment. Display glasses have an additive display.
Augmented Experiences	Android XR experiences that enhance a user's focus and presence in the real world. They are lightweight and additive, helping users while they are on-the-go
Visual Angle	A unit of measurement for perceived size in XR. The minimum readable text size is 0.6 degrees (approx. 18sp at 1 m).

术语	定义
Intelligent Eyewear（智能眼镜）	可全天佩戴的免手持设备，支持信息访问。配备扬声器、摄像头和麦克风。部分仅支持音频（音频眼镜），部分还带有显示屏（显示眼镜）。
Display Glasses（显示眼镜）	在音频眼镜基础上增加了小型私密显示屏，可呈现与音频输出协调的 glanceable（一瞥即可获取的）视觉内容。
Jetpack Compose Glimmer	用于构建增强型Android XR体验的Compose UI工具包，针对显示眼镜优化。提供适用于透明显示屏的组件、主题和交互行为。
Projected Activity (Glasses Activity)（投影式Activity/眼镜Activity）	在主机设备（手机）上运行，但UI和交互会投射到连接的智能眼镜设备（音频或显示眼镜）的Android `Activity` 。
Projected Device（投影设备）	与Android主机设备连接的XR设备。主机将应用内容投射到投影设备，供用户与之交互。
GlimmerTheme	样式令牌的根提供者，包含GlimmerColors、GlimmerTypography和GlimmerShapes。
Additive Display（加法显示技术）	一种显示技术，黑色（#000000）会渲染为100%透明。UI通过向环境添加光线构建。显示眼镜采用加法显示技术。
Augmented Experiences（增强体验）	提升用户在现实世界中专注力和沉浸感的Android XR体验。这类体验轻量化且具有叠加性，可在用户移动时提供帮助。
Visual Angle（视角）	XR中感知尺寸的测量单位。最小可读文本尺寸为0.6度（约等于1米距离下的18sp）。

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.

移动项目必须以
```
compileSdk
```
37或更高版本为目标。如果
```
compileSdk
```
低于37，请将其提升至37。
确保使用为智能眼镜创建首个Activity中的最新库依赖。

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.

禁止： 使用
```
MaterialTheme
```
或Material Components。
必须： 使用
```
GlimmerTheme
```
和Jetpack Compose Glimmer组件。

必须： 使用

androidx.xr.glimmer:glimmer-google-fonts

中的

createGoogleSansFlexTypography()

作为

GlimmerTheme

的

Typography

值，确保组件间应用一致的排版样式。

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.

未详述特定硬件设备型号或其独特功能。
Elevation（阴影高度）： 不支持标准Material 3阴影或elevation修饰符。必须使用Jetpack Compose Glimmer中的
```
ShadowScope
```
或
```
Depth
```
令牌。
最小尺寸： 可读文本的绝对最小尺寸为18sp（0.6°）。任何更小的文本都无法通过可读性检查。
字重： 避免使用"Thin"或"Hairline"字重；它们会在叠加式AR镜片上产生闪烁和锯齿问题。

1. Set up dependencies

1. 设置依赖

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. Always keep this button in a highly visible location, such as an overlay Floating Action Button (FAB) or 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.

配置投影式Activity： 首先，你需要为应用创建一个新的投影式Activity。如果项目中还没有，请参考为智能眼镜创建首个Activity。使用[references/projectedcontext-source.md]在投影设备上启动眼镜投影式Activity。确保在应用清单中指定
```
android:requiredDisplayCategory
```
属性为
```
xr_projected
```
，告知系统该Activity将使用投影上下文来访问连接设备的硬件。
移动应用集成： 如果项目包含现有移动应用，必须创建一个专门用于渲染Glimmer UI的眼镜Activity。详细配置请参考为智能眼镜创建首个Activity。如果还没有启动眼镜Activity的方法，请在现有移动应用UI中添加一个标有"在眼镜上启动"的按钮，通过
```
ProjectedContext
```
在眼镜上启动眼镜Activity。请始终将此按钮放在显眼位置，例如悬浮操作按钮（FAB）或顶部导航栏，确保用户能发现投影功能。如果未连接眼镜，请禁用该按钮。不要在手机上启动眼镜Activity，仅在显示眼镜上启动。如果有合理场景可自动启动眼镜Activity而无需显式按钮，则可以这样做。
UI库： 检查项目是否包含
```
androidx.xr.glimmer:glimmer
```
库，如果没有则必须添加。请参考声明Jetpack Compose Glimmer依赖获取最新依赖版本。
主题设置： 所有Glimmer组件必须包裹在
```
GlimmerTheme
```
可组合项中，确保令牌解析正确。
强制黑色背景： 显示眼镜采用加法显示技术。背景中的任何非黑色都会遮挡现实世界。必须始终在投影式Activity的根容器上设置纯黑色背景（
```
Modifier.background(Color.Black)
```
）。
字体： 默认字体为Google Sans Flex。除非另有指定，否则使用
```
androidx.xr.glimmer.googlefonts
```
库和默认样式。使用
```
createGoogleSansFlexTypography
```
创建带有Google Sans Flex配置的
```
Typography
```
实例，并通过
```
GlimmerTheme
```
提供该实例。配置请参考[references/glimmersansflextypography-source.md]。
硬件功能： 不同类型的智能眼镜设备具有不同功能。如需在运行时检查这些功能，请参考在运行时检查智能眼镜的设备功能。
硬件权限： 如需请求麦克风和摄像头等硬件权限，请参考为智能眼镜请求硬件权限。
硬件访问： 如需使用眼镜摄像头、传感器或访问手机硬件，请参考使用投影上下文访问智能眼镜的硬件。

2. Minimize and translate the UI

2. 简化并适配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.

针对显示眼镜，使用Jetpack Compose Glimmer框架的组件构建UI。
使用深度来传达元素优先级和层级结构。
从下往上设计，尽量减少对现实世界的遮挡。始终将UI底部对齐到眼镜显示屏。
一次展示一项内容： 优先保证用户对现实世界的感知。一次仅展示一项主要信息（例如使用
```
Stack
```
），以最小化对用户视野的遮挡。避免同时显示多个卡片。
颜色对比度： 使用HCT色彩空间确保前景和背景之间至少有70%的色调差异。计算指标请参考[references/material-hct-source.md]。

3. Map input controls

3. 映射输入控件

Map app interactions, such as tap and swipe, to the available hardware controls on the glasses, such as the touchpad.
Inputs are more 1-dimensional; users typically 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

将应用交互（如点击和滑动）映射到眼镜的可用硬件控件（如触控板）。
输入更偏向一维；用户通常一次仅进行一项控制输入。
避免嵌套滚动控件。
Jetpack Compose Glimmer组件专为标准输入方法设计，例如眼镜触控板上的点击或滑动。
使用系统返回键关闭临时状态或详情视图。
如需为眼镜UI添加输入、焦点、点击和滑动功能，请参考Jetpack Compose Glimmer中的焦点处理。
- 如需详细了解硬件输入，请参考显示眼镜的硬件控件

4. Build with Jetpack Compose Glimmer

4. 使用Jetpack Compose Glimmer构建应用

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

Jetpack Compose Glimmer是用于在显示眼镜上构建增强体验的UI工具包。

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.

Glimmer主题： 针对眼镜优化的简化主题，确保最佳可见性。
预兼容输入： 默认支持点击和滑动。
预构建组件： 提供经过优化的可组合项，如
```
Card
```
、
```
ListItem
```
、
```
Button
```
等。

Focus Management in Glimmer

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.

Jetpack Compose Glimmer使用一维焦点搜索。
滚动容器的焦点移动是连续的，而按钮行等元素的焦点移动是离散的。
如需让系统自动设置初始焦点，必须在Activity的
```
onCreate
```
方法中将
```
isInitialFocusOnFocusableAvailable
```
标志设置为
```
true
```
。实现详情请参考Jetpack Compose Glimmer中的焦点处理。

Implementing Glimmer Styles

实现Glimmer样式

Glimmer styles are accessed through the

GlimmerTheme

object. Use references/glimmertheme-source.md for reference.

Category	Token	Value / Role
Color	primary	#9BBFFF (Focal color)
Color	secondary	#4C88E9 (Focal color)
Color	surface	#262626 (Transparent base - renders as transparent)
Color	outline	#606460 (3.dp border color)
Shape	Standard	`RoundedCornerShape(36.dp)`
Shape	Small	`RoundedCornerShape(12.dp)`

Glimmer样式可通过

GlimmerTheme

对象访问。参考请使用[references/glimmertheme-source.md]。

类别	令牌	值/作用
颜色	primary	#9BBFFF（焦点色）
颜色	secondary	#4C88E9（焦点色）
颜色	surface	#262626（透明基底 - 渲染为透明）
颜色	outline	#606460（3.dp边框色）
形状	Standard	`RoundedCornerShape(36.dp)`
形状	Small	`RoundedCornerShape(12.dp)`

Typography Scale (Google Sans Flex)

排版比例（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
```
).

Style Name	Size / Line-Height	Weight Axis	Width	Roundness	Optical size
Title Large	30.sp / 36.sp	725	100	100	9
Title Medium	24.sp / 32.sp	725	100	100	9
Title Small	20.sp / 28.sp	725	100	100	9
Body Large	30.sp / 36.sp	520	100	100	9
Body Medium	24.sp / 32.sp	520	100	100	9
Body Small	20.sp / 28.sp	520	100	100	9
Caption	18.sp / 28.sp	650	100	100	9

严格默认规则： 创建Glimmer UI时必须使用Google Sans Flex，除非明确指定自定义品牌字体。 可变字体设置： 由于Google Sans Flex是可变字体，必须配置以下轴参数：

Roundness（圆角度，
ROND
）：始终设置为
```
100f
```
，以呈现标志性的圆角外观。
Width（宽度，
wdth
）：设置为
```
100f
```
。
Optical Size（光学尺寸，
opsz
）：设置为
```
9f
```
。
Weight（字重，
wght
）：针对不同角色使用特定值（标题：
```
725f
```
，正文：
```
520f
```
，说明文字：
```
650f
```
）。

样式名称	尺寸/行高	字重轴	宽度	圆角度	光学尺寸
Title Large	30.sp / 36.sp	725	100	100	9
Title Medium	24.sp / 32.sp	725	100	100	9
Title Small	20.sp / 28.sp	725	100	100	9
Body Large	30.sp / 36.sp	520	100	100	9
Body Medium	24.sp / 32.sp	520	100	100	9
Body Small	20.sp / 28.sp	520	100	100	9
Caption	18.sp / 28.sp	650	100	100	9

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:

Level	Usage
level1	Standard rest state for cards and persistent background UI.
level2	Standard focus/pressed state for buttons and interactive cards.
ExtraSmall	4.dp

使用阴影在显示眼镜上模拟深度，通过不同的强调层级建立层次感。Jetpack Compose Glimmer控件使用带有5种预设

DepthEffectLevels

的

DepthEffect

。参考请使用[references/deptheffect-source.md]和[references/deptheffectlevels-source.md]。

部分示例：

层级	用途
level1	卡片和持久背景UI的标准静止状态。
level2	按钮和交互式卡片的标准焦点/按下状态。
ExtraSmall	4.dp

Implementing Jetpack Compose Glimmer Components

实现Jetpack Compose Glimmer组件

Cards

卡片（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.

卡片是Glimmer中基于表面的基础容器，用于将相关内容（如文本、图片、图标和操作）分组到单个焦点区域。它们在眼镜环境中建立清晰的深度平面（Z轴），为文本、图片和图标提供稳定背景。切勿在列表项（ListItem）中嵌入卡片。

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.

表面层级： 卡片设计为放置在基底表面或列表中。如果提供了
```
onClick
```
lambda，卡片在获得焦点时会自动提供视觉反馈。
交互性：
- 如果整个卡片作为单个触发点（例如媒体项或设置项）：则提供
```
onClick
```
  lambda以启用焦点效果。
- 否则： 如果卡片包含多个内部交互元素（如独立按钮或开关），请将
```
onClick
```
  设为
```
null
```
  ，避免焦点冲突。

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)

如需创建Glimmer卡片组件，请阅读：

开发者指南： Jetpack Compose Glimmer：卡片
API源代码： 使用[references/card-source.md]。
实现示例： 使用[references/card-samples-source.md]（基础卡片和交互式卡片用法）。

Buttons

按钮（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.

按钮是Glimmer中离散操作的主要触发控件。它们针对显示眼镜的焦点模型进行了专门优化，当通过触控板或其他方法将焦点移至按钮时，会添加焦点高亮。

Core Implementation Logic

核心实现逻辑

There are two types of buttons to choose from in Glimmer:
- Standard buttons (Required text label with optional leading or trailing icons). Use this when there is more space in the UI, or when the meaning of the button isn't clear without text.
- Icon buttons (icon only). Only use icon buttons when the icon is clearly understandable.
Both icon and standard buttons have default and toggle variants:
- Default (use for single actions like "buy" or "navigate")
- Toggle (use for things with selected states like mute buttons)

Glimmer中有两种按钮类型可供选择：
- 标准按钮（必须包含文本标签，可选择添加前置或后置图标）。当UI中有较多空间，或按钮含义无文本则不明确时使用。
- 图标按钮（仅含图标）。仅当图标含义清晰易懂时使用。
图标按钮和标准按钮均有默认和切换变体：
- 默认（用于单一操作，如"购买"或"导航"）
- 切换（用于具有选中状态的操作，如静音按钮）

Technical Documentation Links

技术文档链接

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

Developer Guidance: Jetpack Compose Glimmer: Buttons
API Source Code: Use references/button-source.md.
Implementation Samples: Use references/button-samples-source.md.

如需创建Glimmer按钮组件，请阅读：

开发者指南： Jetpack Compose Glimmer：按钮
API源代码： 使用[references/button-source.md]。
实现示例： 使用[references/button-samples-source.md]。

Title Chips

标题芯片（Title Chips）

Chips are a pill-shaped, specialized labeling component designed to sit above a

Card

or a group of content to provide a title. Use title chips to display concise information like a short title, a name, or a status.

芯片是一种药丸形状的专用标签组件，设计用于放置在

Card

或一组内容上方，作为标题。使用标题芯片显示简洁信息，如短标题、名称或状态。

Guidelines and usage

指南与用法

Spatial Spacing: When using a standalone
```
TitleChip
```
above content, you must use
```
TitleChipDefaults.AssociatedContentSpacing
```
(8.dp) to maintain the visual hierarchy.
Interactivity: Title chips are purely for informational purposes, they cannot be targeted or activated for navigation.
Layout Always center text in a title chip. Never let the title chip go to two lines, and truncate extra words. Keep the label to three words or less.

空间间距： 当在内容上方使用独立的
```
TitleChip
```
时，必须使用
```
TitleChipDefaults.AssociatedContentSpacing
```
（8.dp）以维持视觉层级。
交互性： 标题芯片仅用于展示信息，无法被选中或激活以进行导航。
布局： 始终将标题芯片中的文本居中。切勿让标题芯片换行，多余文字需截断。标签长度控制在三个单词以内。

Technical Documentation Links

技术文档链接

If you are creating a Glimmer Title Chip component, read the:

Developer Guidance: Jetpack Compose Glimmer: Title Chips
API Source Code: Use references/titlechip-source.md.
Implementation Samples: Use references/titlechip-samples-source.md. (Title Chips above group content)

如需创建Glimmer标题芯片组件，请阅读：

开发者指南： Jetpack Compose Glimmer：标题芯片
API源代码： 使用[references/titlechip-source.md]。
实现示例： 使用[references/titlechip-samples-source.md]（内容组上方的标题芯片）。

Icons

图标（Icons）

Icons are visual symbols used to represent concepts, actions, or status in a concise way. In Glimmer, icons and icon buttons are optimized for the XR environment, providing clear visibility on additive displays and gaze-responsive feedback for interactive elements.

图标是用于简洁表示概念、操作或状态的视觉符号。在Glimmer中，图标和图标按钮针对XR环境进行了优化，在加法显示技术下具有清晰可见性，并为交互元素提供响应凝视的反馈。

Guidelines and usage

指南与用法

Sizing: Use predefined
```
IconSizes
```
(e.g., Standard, Large) to ensure icons remain legible and meet the minimum touch target requirements for the XR environment.
Interactivity:
- If an icon serves as a trigger: Then you must use an
```
IconButton
```
  to provide the automatic visual feedback and required tap-target padding.
- ELSE: Use a standalone
```
Icon
```
  for non-interactive indicators or status symbols.
Contrast: NEVER use pure black (#000000) for icon tints; always use themed colors or standard Glimmer content colors to ensure the icon is visible against dark or real-world backgrounds.
Icon Library The default icon library is Material Symbols with 600 weight, Rounded, Unfilled, unless otherwise specified.

尺寸： 使用预定义的
```
IconSizes
```
（如Standard、Large）确保图标保持可读性，并满足XR环境的最小触摸目标要求。
交互性：
- 如果图标作为触发点：则必须使用
```
IconButton
```
  以提供自动视觉反馈和所需的点击目标内边距。
- 否则： 使用独立的
```
Icon
```
  作为非交互式指示器或状态符号。
对比度： 切勿使用纯黑色（#000000）作为图标色调；始终使用主题颜色或标准Glimmer内容颜色，确保图标在深色或现实世界背景下可见。
图标库： 默认图标库为Material Symbols，字重600，圆角、未填充样式，除非另有指定。

Technical Documentation Links

技术文档链接

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

Developer Guidance: Jetpack Compose Glimmer: Icons
API Source Code (Icon): Use references/icon-source.md.
API Source Code (IconButton): Use references/iconbutton-source.md.
API Source Code (IconSizes): Use references/iconsizes-source.md.

如需创建Glimmer图标组件，请阅读：

开发者指南： Jetpack Compose Glimmer：图标
API源代码（Icon）： 使用[references/icon-source.md]。
API源代码（IconButton）： 使用[references/iconbutton-source.md]。
API源代码（IconSizes）： 使用[references/iconsizes-source.md]。

Lists

列表（Lists）

Lists are containers that allow you to navigate between and see multiple items on glasses. If your use case works with only seeing one item in the list at a time, use a Glimmer Stack. Use lists with a Title Chip when the list items are similar in type. Also use a Glimmer Stack if the items are of different types.

列表是允许用户在眼镜上导航和查看多个项的容器。如果你的使用场景适合一次仅查看列表中的一项，请使用Glimmer Stack。当列表项类型相似时，结合标题芯片使用列表。如果项类型不同，请使用Glimmer Stack。

Guidelines and usage

指南与用法

ListItem Slots: Use the
```
ListItem
```
composable for rows. It provides predefined slots. Use references/listitem-source.md for reference.
Visual Consistency: When building lists of similar items, always use a consistent background color (typically
```
GlimmerTheme.colors.surface
```
) and corner radius (standard 36.dp) for every item. Don't vary these unless you are visually grouping different types of content.
Integrated Title Chips: Glimmer Lists support integrated title chips. IF you need a section header within a list: THEN enable the integrated title chip rather than adding a standalone
```
TitleChip
```
to maintain spatial consistency.
Vertical Arrangement: ALWAYS use
```
verticalArrangement = Arrangement.spacedBy(20.dp)
```
for
```
VerticalList
```
to ensure visual separation between items on the glasses display.
Be sure to use the default 20 dp spacing between list items unless otherwise specified.

ListItem插槽： 使用
```
ListItem
```
可组合项创建行，它提供了预定义插槽。参考请使用[references/listitem-source.md]。
视觉一致性： 构建相似项的列表时，始终为每个项使用一致的背景色（通常为
```
GlimmerTheme.colors.surface
```
）和圆角半径（标准36.dp）。除非要视觉上分组不同类型的内容，否则不要更改这些设置。
集成标题芯片： Glimmer列表支持集成标题芯片。如果需要在列表中添加节标题：则启用集成标题芯片，而非添加独立的
```
TitleChip
```
，以维持空间一致性。
垂直排列： 对
```
VerticalList
```
必须使用
```
verticalArrangement = Arrangement.spacedBy(20.dp)
```
，确保眼镜显示屏上的项之间有视觉分隔。
除非另有指定，请确保列表项之间使用默认的20 dp间距。

Technical Documentation Links

技术文档链接

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

API Source Code (List): Use references/list-source.md.
API Source Code (ListItem): Use references/listitem-source.md.
API Source Code (ListState): Use references/liststate-source.md.

如需创建Glimmer列表组件，请阅读：

API源代码（List）： 使用[references/list-source.md]。
API源代码（ListItem）： 使用[references/listitem-source.md]。
API源代码（ListState）： 使用[references/liststate-source.md]。

Stacks

堆叠（Stacks）

A stack is a collapsed list that only displays one piece of content at a time, in a stacked visual, such as a card. If it is useful to show more than one item at a time, use the Glimmer List control. Don't use a title chip with a stack. If the items are of different types use a stack to show them. If the items are of the same type, use a list.

堆叠是一种折叠式列表，一次仅显示一项内容，以堆叠视觉呈现（如卡片）。如果需要同时显示多项内容，请使用Glimmer List控件。不要将标题芯片与堆叠一起使用。如果项类型不同，使用堆叠展示；如果项类型相同，使用列表。

Guidelines and usage

指南与用法

Layout tips

Stacks accept variable height items.
Align your stack control with the bottom of the display.
The stack control must be 66 dp taller than the tallest item in the stack, allowing room for the scrim and minimizing movement when navigating between items.
Clipping and Layering: To ensure that items behind the top item are correctly clipped and hidden, you must apply the
```
.itemDecoration(CardDefaults.shape)
```
modifier to the
```
Card
```
(or relevant container) inside every
```
item
```
block.
Depth Shadows: To maintain spatial separation and element priority, utilize Glimmer's
```
ShadowScope
```
,
```
DepthEffect
```
, or prescribed
```
DepthEffectLevels
```
for depth plane scaling.

布局技巧

堆叠支持可变高度的项。
将堆叠控件与显示屏底部对齐。
堆叠控件必须比堆叠中最高的项高66 dp，为遮罩留出空间，并最小化项之间导航时的移动。
裁剪与分层： 为确保顶层项后方的项被正确裁剪和隐藏，必须对每个
```
item
```
块内的
```
Card
```
（或相关容器）应用
```
.itemDecoration(CardDefaults.shape)
```
修饰符。
深度阴影： 为维持空间分隔和元素优先级，请使用Glimmer的
```
ShadowScope
```
、
```
DepthEffect
```
或指定的
```
DepthEffectLevels
```
进行深度平面缩放。

Technical Documentation Links

技术文档链接

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

API Source Code (Stack): Use references/stack-source.md.
API Source Code (StackState): Use references/stackstate-source.md.
API Source Code (StackItemScope): Use references/stackitemscope-source.md.

如需创建Glimmer堆叠组件，请阅读：

API源代码（Stack）： 使用[references/stack-source.md]。
API源代码（StackState）： 使用[references/stackstate-source.md]。
API源代码（StackItemScope）： 使用[references/stackitemscope-source.md]。

Text

文本（Text）

In Jetpack Compose Glimmer, the

Text

component builds off the Compose text component, and lets you set various text properties. Be sure to choose a style from the

GlimmerTheme

for your text. Modify the theme for your application if you want custom typography.

在Jetpack Compose Glimmer中，

Text

组件基于Compose文本组件构建，允许你设置各种文本属性。请务必从

GlimmerTheme

中选择文本样式。如需自定义排版，请修改应用主题。

Essential Constraint: Glimmer Text versus Material Text

关键约束：Glimmer文本与Material文本

On transparent Display Glasses (additive displays), standard Material

Text

resolves to dark foreground tokens which render as transparent and invisible. Glimmer

Text

intelligently manages theme color matching. When no manual color override is specified, Glimmer

Text

automatically defaults to the content color provided by the nearest Glimmer surface.

Don't: Use Material Text
Do: Use Glimmer Text

在透明显示眼镜（加法显示技术）上，标准Material

Text

会解析为深色前景令牌，渲染为透明且不可见。Glimmer

Text

可智能管理主题颜色匹配。当未手动指定颜色覆盖时，Glimmer

Text

会自动默认使用最近的Glimmer表面提供的内容颜色。

禁止： 使用Material Text
必须： 使用Glimmer Text

Surface

表面（Surface）

Surface

is a fundamental building block in Glimmer. Use references/surface-source.md for reference.

A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. Use it if you need to build a custom component.

Surface

是Glimmer中的基础构建块。参考请使用[references/surface-source.md]。

表面代表组件（如按钮和卡片）的独特视觉区域或"物理"边界。如需构建自定义组件，请使用它。

5. Integrate with system UI

5. 与系统UI集成

For a detailed breakdown of notifications on intelligent eyewear, see Understand notification behavior for intelligent eyewear and learn how to Start a glasses activity on display glasses from a notification.

如需详细了解智能眼镜的通知机制，请参考了解智能眼镜的通知行为，并学习如何从通知启动显示眼镜上的眼镜Activity。