L'SDK Android XR è ora disponibile in Anteprima per gli sviluppatori. Vorremmo sapere cosa ne pensi. Per contattarci, visita la nostra pagina di assistenza.
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Material Design fornisce componenti e layout che si adattano all'XR. Con la libreria Material 3 esistente, i componenti e i layout adattabili vengono migliorati con i comportamenti dell'interfaccia utente spaziale.
Puoi adattare l'attuale implementazione di M3 aggiungendo il wrapper EnableXrComponentOverrides. Aggiungi la libreria XR Compose Material3 alle dipendenze della tua app.
Utilizzare EnableXrComponentOverrides per adattare l'app esistente
Tutta l'interfaccia utente di Compose M3 all'interno del wrapper EnableXrComponentOverrides si adatterà ai dispositivi XR. Questo wrapper ti consente di scegliere i componenti da escludere da questo comportamento.
Aggiungi il wrapper EnableXrComponentOverrides per adattare la tua app a Material Design per XR.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Implement Material Design for XR\n\nMaterial Design provides components and layouts that adapt for XR. Using the\nexisting [Material 3 library](/jetpack/androidx/releases/compose-material3), components and [adaptive layouts](/jetpack/androidx/releases/compose-material3-adaptive) are\nenhanced with spatial UI behaviors. \nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the\nvideo](/static/videos/design/ui/xr/visual-design-ls-adapted-opt.mp4) and watch it with a video player.\n\nYou can adapt your current M3 implementation by adding the\n`EnableXrComponentOverrides` wrapper. Add the [XR Compose Material3 library](/jetpack/androidx/releases/xr-compose-material3#declaring_dependencies)\nto your app's dependencies.\n\nUse EnableXrComponentOverrides to adapt your existing app\n---------------------------------------------------------\n\nAll M3 Compose UI inside of the [`EnableXrComponentOverrides`](/reference/kotlin/androidx/xr/compose/material3/package-summary#EnableXrComponentOverrides(androidx.xr.compose.material3.XrComponentOverrideEnabler,kotlin.Function0)) wrapper will\nadapt on XR devices. This wrapper lets you choose any components you want to\nexclude from this behavior.\n\nAdd the `EnableXrComponentOverrides` wrapper to adapt your app to Material\nDesign for XR.\n\nNavigation rail\n---------------\n\nNavigation rail in any Compose layout, including [`NavigationSuiteScaffold`](/develop/ui/compose/layouts/adaptive/build-adaptive-navigation)\nwill automatically adapt to XR Orbiter. For more information, read [Material\nDesign guidelines](https://m3.material.io/components/navigation-rail/xr).\n\n\nNon-spatialized navigation rail \n\nSpatialized (XR-adapted) navigation rail\n\n\u003cbr /\u003e\n\nNavigation bar\n--------------\n\nNavigation bar in any Compose layout, including [`NavigationSuiteScaffold`](/develop/ui/compose/layouts/adaptive/build-adaptive-navigation)\nwill automatically adapt to XR orbiter. For more information, read [Material\nDesign guidelines](https://m3.material.io/components/navigation-bar/xr).\n\n\nNon-spatialized navigation bar \n\nSpatialized (XR-adapted) navigation bar\n\n\u003cbr /\u003e\n\nDialogs\n-------\n\nA `BasicAlertDialog` will adapt to XR, adding elevation to the component.\n\nLearn more about [Dialogs](https://m3.material.io/components/dialogs/xr) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized dialog \n\nSpatialized (XR-adapted) dialog\n\n\u003cbr /\u003e\n\nTop app bars\n------------\n\nA `TopAppBar` will automatically adapt to XR orbiter.\n\nLearn more about [Top app bars](https://m3.material.io/components/app-bars/xr) and [adaptive design\nguidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized top app bar \n\nSpatialized (XR-adapted) top app bar\n\n\u003cbr /\u003e\n\nList-detail layout for XR\n-------------------------\n\n[Compose Material 3 Adaptive Layouts](/jetpack/androidx/releases/compose-material3-adaptive) in XR have a 1:1 mapping where each\npane is placed inside its own XR spatial panel. Learn more about\n[`ListDetailPaneScaffold`](/develop/ui/compose/layouts/adaptive/list-detail) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized ListDetailPaneScaffold \n\nSpatialized (XR-adapted) ListDetailPaneScaffold\n\n\u003cbr /\u003e\n\nSupport pane layout for XR\n--------------------------\n\n[Compose Material 3 Adaptive Layouts](/jetpack/androidx/releases/compose-material3-adaptive) in XR have a 1:1 mapping where each\npane is placed inside its own XR spatial panel. Learn more about\n[`SupportingPaneScaffold`](/develop/ui/compose/layouts/adaptive/build-a-supporting-pane-layout) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized SupportingPaneScaffold \n\nSpatialized (XR-adapted) SupportingPaneScaffold\n\n\u003cbr /\u003e\n\nStart designing with the Material 3 Design Kit for Figma\n--------------------------------------------------------\n\n[Download the Material 3 Design Kit to get started](https://www.figma.com/community/file/1035203688168086460)\n\nSee also\n--------\n\n- [Develop UI with Jetpack Compose for XR](/develop/xr/jetpack-xr-sdk/develop-ui)\n- [Spatial UI design guidelines](/design/ui/xr/guides/spatial-ui)"]]
