El SDK de Android XR ahora está disponible en la Versión preliminar para desarrolladores. Deseamos obtener tus comentarios. Visita nuestra página de asistencia para comunicarte con nosotros.
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Material Design proporciona componentes y diseños que se adaptan a XR. Con la biblioteca de Material 3 existente, los componentes y los diseños adaptables se mejoran con comportamientos de IU espaciales.
Puedes adaptar tu implementación actual de M3 agregando el wrapper EnableXrComponentOverrides. Agrega la biblioteca Material3 de XR Compose a las dependencias de tu app.
Usa EnableXrComponentOverrides para adaptar tu app existente
Toda la IU de Compose de M3 dentro del wrapper EnableXrComponentOverrides se adaptará en dispositivos XR. Este wrapper te permite elegir los componentes que deseas excluir de este comportamiento.
Agrega el wrapper EnableXrComponentOverrides para adaptar tu app a Material Design para XR.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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)"]]
