Mengimplementasikan Desain Material untuk XR

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 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 non-spasial

Kolom samping navigasi yang di-spasialisasi (diadaptasi untuk XR)

Kolom samping navigasi yang di-spasialisasi (diadaptasi untuk XR)

Menu navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold, akan otomatis beradaptasi dengan orbiter XR. Untuk informasi selengkapnya, baca Panduan Desain Material.

Menu navigasi non-spasial

Menu navigasi non-spasial

Menu navigasi yang di-spatialisasi (disesuaikan dengan XR)

Menu navigasi yang di-spatialisasi (disesuaikan dengan XR)

Dialog

BasicAlertDialog akan beradaptasi dengan XR, menambahkan elevasi ke komponen.

Pelajari lebih lanjut Dialog dan panduan desain adaptif.

Dialog non-spasial

Dialog non-spasial

Dialog spasial (diadaptasi XR)

Dialog spasial (diadaptasi XR)

Panel aplikasi atas

TopAppBar akan otomatis beradaptasi dengan orbiter XR.

Pelajari lebih lanjut Panel aplikasi atas dan panduan desain adaptif.

Panel aplikasi atas non-spasial

Panel aplikasi atas non-spasial

Panel aplikasi atas yang di-spasialisasi (diadaptasi XR)

Panel aplikasi atas yang di-spasialisasi (diadaptasi XR)

Tata letak daftar-detail untuk XR

Tata Letak Adaptif Compose Material 3 di XR memiliki pemetaan 1:1 dengan setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut ListDetailPaneScaffold dan panduan desain adaptif.

ListDetailPaneScaffold non-spasial

ListDetailPaneScaffold non-spasial

ListDetailPaneScaffold yang di-spasialisasi (diadaptasi XR)

ListDetailPaneScaffold yang di-spasialisasi (diadaptasi XR)

Mendukung tata letak panel untuk XR

Tata Letak Adaptif Compose Material 3 di XR memiliki pemetaan 1:1 dengan setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut SupportingPaneScaffold dan panduan desain adaptif.

SupportingPaneScaffold non-spasial

SupportingPaneScaffold non-spasial

SupportingPaneScaffold yang di-spasialisasi (diadaptasi XR)

SupportingPaneScaffold yang di-spasialisasi (diadaptasi XR)

Mulai mendesain dengan Material 3 Design Kit untuk Figma

Kolase elemen dari Kit Desain Material 3

Download Kit Desain Material 3 untuk memulai

Lihat juga