マテリアル デザインには、XR 用のコンポーネントとレイアウトが用意されています。マテリアル 3 ライブラリ、アダプティブ レイアウト、XR Compose マテリアル 3 ライブラリを使用すると、Compose アプリに空間 UI の動作を組み込むことができます。
XR Compose Material 3 ライブラリをアプリの依存関係に追加して、XR コンポーネントに Material 3 を使用するか、標準の Material 3 コンポーネントを Jetpack Compose for XR コンテナ（Orbiter、SpatialDialog、SpatialPanel など）に直接配置します。
XR コンポーネントにマテリアル 3 を使用する
androidx.xr.compose.material3 ライブラリは、一般的な空間 UI パターン（ナビゲーション レールとバー、上部アプリバー、フローティング ツールバー、ダイアログ、リストと詳細のレイアウト、ホームスペースとフルスペースを切り替える切り替えボタンなど）に対応する Material 3 for XR コンポーネントを提供します。このライブラリの空間化された Spatial* コンポーザブルは試験運用版であり、@OptIn(ExperimentalMaterial3XrApi::class) を使用してオプトインする必要があります。
LocalSpatialCapabilities.current.isSpatialUiEnabled を確認して、空間 UI が有効になっている場合は XR 用マテリアル 3 コンポーネントを、空間 UI が有効になっていない場合は標準のマテリアル 3 コンポーネントをレンダリングします。詳細については、空間機能を確認するをご覧ください。
ナビゲーション レール
SpatialNavigationRail または SpatialWideNavigationRail を使用して、空間 UI が有効になっている場合に、開始位置に揃えられた Orbiter にマテリアル 3 ナビゲーション レールを表示します。詳細については、マテリアル デザインのガイドラインをご覧ください。
空間化されていないナビゲーション レール
空間化された（XR に適応した）ナビゲーション レール
ナビゲーション バー
空間 UI が有効になっている場合は、SpatialNavigationBar または SpatialShortNavigationBar を使用して、下揃えの Orbiter にマテリアル 3 ナビゲーション バーを表示します。詳細については、マテリアル デザインのガイドラインをご覧ください。
空間化されていないナビゲーション バー
空間化された（XR に対応した）ナビゲーション バー
ダイアログ
SpatialBasicAlertDialog を使用して、空間的なエレベーションを持つ SpatialDialog 内に基本的なアラート ダイアログを表示するか、標準のマテリアル 3 ダイアログ コンテンツを SpatialDialog で直接ラップします。
詳細については、ダイアログとアダプティブ デザインのガイドラインをご覧ください。
空間化されていないダイアログ
空間化（XR 対応）ダイアログ
トップ アプリバー
空間 UI が有効になっている場合は、SpatialTopAppBar または SpatialTwoRowsTopAppBar を使用して、上揃えの Orbiter 内にマテリアル 3 のトップ アプリバーを表示します。
詳細については、トップ アプリバーとアダプティブ デザインのガイドラインをご覧ください。
空間化されていないトップ アプリバー
立体化された（XR に対応した）トップ アプリバー
XR のリストと詳細のレイアウト
空間 UI が有効になっている場合は、SpatialListDetailPaneScaffold を使用して、各ペインが独自の SpatialPanel 内に配置される Material 3 アダプティブ リストと詳細レイアウトを表示します。空間 UI が有効になっていない場合は、ListDetailPaneScaffold を使用します。詳細については、リストと詳細のレイアウトとアダプティブ デザインのガイドラインをご覧ください。
空間化されていない ListDetailPaneScaffold
空間化された（XR に対応した）ListDetailPaneScaffold
XR の補助ペイン レイアウト
空間 UI が有効になっている場合は、Subspace 内の SpatialRow 内の別々の SpatialPanel コンテナにメインペインと補助ペインを配置します。空間 UI が有効になっていない場合は、SupportingPaneScaffold を使用します。詳細については、サポート ペインとアダプティブ デザインのガイドラインをご覧ください。
空間化されていない SupportingPaneScaffold
空間化（XR 対応）された SupportingPaneScaffold
Figma 向け Material 3 デザインキットを使用してデザインを開始する
