Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Desain Material menyediakan komponen dan tata letak yang beradaptasi untuk XR. Dengan menggunakan
library Material 3 yang ada, komponen dan tata letak adaptif
akan ditingkatkan dengan perilaku UI spasial.
Anda dapat menyesuaikan penerapan M3 saat ini dengan menambahkan wrapper EnableXrComponentOverrides. Tambahkan library XR Compose Material3
ke dependensi aplikasi Anda.
Menggunakan EnableXrComponentOverrides untuk menyesuaikan aplikasi yang ada
Semua UI Compose M3 di dalam wrapper EnableXrComponentOverrides akan
beradaptasi di perangkat XR. Wrapper ini memungkinkan Anda memilih komponen yang ingin
dikecualikan dari perilaku ini.
Tambahkan wrapper EnableXrComponentOverrides untuk menyesuaikan aplikasi Anda dengan Desain
Material untuk XR.
Kolom samping navigasi
Kolom samping navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold,
akan otomatis beradaptasi dengan XR Orbiter. Untuk informasi selengkapnya, baca Panduan
Desain Material.
Kolom samping navigasi non-spasial
Kolom samping navigasi yang di-spasialisasi (diadaptasi untuk XR)
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 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)"]]
