O SDK do Android XR agora está disponível na prévia para desenvolvedores. Queremos saber sua opinião Acesse nossa página de suporte para entrar em contato.
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O Material Design oferece componentes e layouts que se adaptam a XR. Usando a
biblioteca Material 3, os componentes e os layouts adaptáveis são
aprimorados com comportamentos espaciais da interface.
É possível adaptar sua implementação atual do M3 adicionando o
wrapper EnableXrComponentOverrides. Adicione a biblioteca XR Compose Material3
às dependências do app.
Usar EnableXrComponentOverrides para adaptar seu app atual
Toda a interface do Compose M3 dentro do wrapper EnableXrComponentOverrides será
adaptada em dispositivos XR. Esse wrapper permite escolher os componentes que você quer
excluir desse comportamento.
Adicione o wrapper EnableXrComponentOverrides para adaptar seu app ao Material
Design para XR.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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)"]]
