Mengubah aplikasi Android menjadi 3D dengan XR

​​

Aplikasi Android seluler 2D atau layar besar Anda berfungsi secara default di Android XR, ditampilkan sebagai panel 2D di dalam ruang 3D. Anda dapat menambahkan fitur XR imersif untuk meningkatkan aplikasi Android 2D yang ada, dengan mentransisikan dari pengalaman layar datar ke lingkungan 3D dinamis.

Pertimbangkan prinsip-prinsip penting ini saat menghadirkan aplikasi Android ke XR.

  • Kemampuan spasial: Android XR menawarkan berbagai fitur spasial yang tersedia untuk aplikasi Anda, tetapi Anda tidak perlu menerapkan setiap kemampuan. Terapkan secara strategis hal-hal yang melengkapi hierarki visual, tata letak, dan perjalanan pengguna aplikasi Anda. Pertimbangkan untuk menggabungkan lingkungan kustom dan beberapa panel untuk menciptakan pengalaman yang benar-benar imersif. Lihat panduan desain UI spasial untuk menentukan integrasi elemen spasial yang optimal.
  • UI Adaptif: XR memberi Anda fleksibilitas untuk mendesain UI yang luas yang beradaptasi dengan lancar ke kanvas tanpa batas dan jendela yang dapat diubah ukurannya secara bebas. Salah satu pertimbangan yang paling penting adalah menggunakan panduan desain layar besar kami untuk mengoptimalkan tata letak aplikasi Anda untuk lingkungan yang luas ini. Meskipun aplikasi Anda saat ini hanya untuk perangkat seluler, Anda masih dapat menggunakan lingkungan yang menarik untuk meningkatkan pengalaman pengguna, tetapi UI yang dioptimalkan untuk perangkat layar besar adalah salah satu cara terbaik untuk mengoptimalkan aplikasi Anda untuk Android XR.
  • Framework UI: Sebaiknya buat UI Anda dengan Jetpack Compose untuk XR. Jika aplikasi Anda saat ini mengandalkan View, tinjau bekerja dengan View di XR untuk mempelajari lebih lanjut cara memanfaatkan interoperabilitas Compose saat bekerja dengan View, atau mengevaluasi cara bekerja langsung dengan library Jetpack SceneCore.
  • Memublikasikan di Play Store: Untuk memastikan aplikasi yang ditingkatkan XR dapat ditemukan di Play Store: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Tips untuk mengonversi komponen UI 2D menjadi 3D

Mengikuti tips ini dapat memberikan perbedaan besar dalam membuat aplikasi Anda merasa telah dioptimalkan untuk XR.

  • Prioritaskan kompatibilitas layar besar: Pastikan UI aplikasi Anda mematuhi prinsip desain layar besar untuk membantu memastikan keterbacaan teks dan konten yang optimal di lingkungan XR yang luas.
  • Gunakan fitur spasial secara strategis: Identifikasi momen penting dalam perjalanan pengguna aplikasi Anda yang menggabungkan fitur spasial akan meningkatkan pengalaman dan memanfaatkan kemampuan unik platform.
  • Tempatkan panel spasial dengan mempertimbangkan kenyamanan pengguna: Saat mendesain tata letak dengan panel spasial, posisikan panel tersebut pada jarak yang nyaman dari pengguna untuk menghindari perasaan kewalahan atau terlalu dekat.
  • Gunakan UI adaptif untuk tata letak spasial: Gunakan konsep UI adaptif seperti panel dan pengungkapan progresif untuk menguraikan tata letak Anda secara efektif menjadi beberapa panel spasial, yang mengoptimalkan presentasi informasi.
  • Gunakan orbiter untuk elemen dan pola persisten: Simpan orbiter untuk elemen UX persisten dan kontekstual seperti navigasi dan kontrol. Batasi penggunaan orbiter untuk mempertahankan kejelasan dan menghindari kekacauan.
  • Gunakan elevasi dengan bijak: Terapkan elevasi spasial ke komponen sementara yang tetap diam dan tidak di-scroll bersama konten. Hindari mengangkat area yang luas untuk mencegah ketidaknyamanan visual dan mempertahankan hierarki visual yang seimbang.
  • Mem-build dengan Desain Material: Jika mem-build dengan alfa terbaru komponen Desain Material dan tata letak adaptif, Anda dapat menambahkan wrapper "EnableXrComponentOverrides" untuk memilih ikut serta dalam perubahan XR di aplikasi Anda. Baca dokumentasi Desain Material untuk XR kami untuk mempelajari lebih lanjut.

Jetpack Compose untuk XR memperkenalkan komponen baru yang mengelola peningkatan XR sehingga Anda tidak perlu melakukannya. Misalnya, Anda dapat menggunakan SpatialPopup dan SpatialDialog untuk mengganti versi 2D-nya. Komponen ini muncul sebagai UI 2D standar saat UI spasial tidak tersedia, dan menampilkan UI spasial aplikasi Anda jika memungkinkan. Menggunakannya semudah membuat perubahan satu baris untuk mengganti elemen UI 2D yang sesuai.

Mengonversi dialog menjadi SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

Mengonversi pop-up menjadi SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

Elemen UI 2D yang ditingkatkan

Jika Anda ingin meningkatkan UI dengan kontrol yang lebih terperinci, kami menyediakan SpatialElevation untuk memungkinkan Anda meningkatkan composable apa pun di aplikasi ke tingkat di atas panel spasial pada sumbu Z yang Anda tetapkan dengan SpatialElevationLevel. Hal ini membantu menarik perhatian pengguna, menciptakan hierarki yang lebih baik, dan meningkatkan keterbacaan, seperti yang ditunjukkan pada contoh berikut.

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

Poin penting tentang kode

  • Jangan melakukan spasialisasi atau mengangkat area dan bidang besar seperti sheet bawah dan sheet samping.
  • Jangan naikkan elemen UI yang dapat di-scroll dengan konten.

Memigrasikan komponen 2D ke orbiter

Orbiter adalah elemen mengambang yang berisi kontrol untuk konten dalam panel spasial. Fitur ini memungkinkan konten memiliki lebih banyak ruang dan memberi pengguna akses cepat ke fitur tanpa menghalangi konten utama.

Kolom samping navigasi non-spasial
Kolom samping navigasi yang di-spatialisasi (diadaptasi untuk XR)

Kode contoh berikut menunjukkan cara memigrasikan komponen UI 2D ke orbiter.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

Poin penting tentang orbiter

  • Orbiter adalah komponen yang dirancang untuk melampirkan elemen UI yang ada ke panel spasial
  • Lihat panduan desain aplikasi Android XR untuk memverifikasi elemen mana yang harus dimigrasikan untuk orbiter, dan pola yang harus dihindari.
  • Sebaiknya sesuaikan hanya beberapa komponen navigasi seperti kolom samping navigasi, panel aplikasi atas, atau panel aplikasi bawah.
  • Orbiter tidak muncul jika UI spasial tidak diaktifkan. Misalnya, aplikasi tersebut tidak akan muncul di Ruang Utama atau di perangkat seperti ponsel, tablet, dan perangkat foldable.

Memigrasikan komponen 2D ke panel Spasial

Panel spasial adalah elemen penyusun dasar UI aplikasi Android XR.

Panel berfungsi sebagai penampung untuk elemen UI, komponen interaktif, dan konten imersif. Saat mendesain, Anda dapat menambahkan komponen seperti orbiter untuk kontrol pengguna, dan meningkatkan elemen UI secara spasial untuk menarik perhatian ke interaksi tertentu.

Poin penting tentang kode

  • Lihat Panduan desain aplikasi Android XR untuk memverifikasi elemen mana yang akan dimigrasikan ke panel, dan pola yang harus dihindari.
  • Ikuti praktik terbaik untuk penempatan panel spasial:
    • Panel harus muncul di tengah 1,5 m dari mata pengguna.
    • Konten harus muncul di bagian tengah 41° dari bidang pandang pengguna.
  • Panel tetap berada di tempat saat pengguna berpindah. Penyematan hanya tersedia untuk passthrough.
  • Gunakan sudut membulat 32 dp yang direkomendasikan sistem untuk panel.
  • Target sentuh harus berukuran 56 dp dan tidak lebih kecil dari 48 dp.
  • Pertahankan rasio kontras untuk keterbacaan, terutama jika Anda menggunakan latar belakang transparan.
  • Ikuti Prinsip Warna desain Android dan gunakan sistem warna Desain Material untuk menerapkan tema gelap dan terang untuk aplikasi Anda.
  • Gunakan API panel spasial dengan elemen UI yang ada.

Memigrasikan UI 2D ke satu panel spasial

Secara default, aplikasi Anda ditampilkan dengan satu panel di Home Space. Pelajari cara bertransisi antara Ruang Utama dan Ruang Penuh. Untuk memindahkan konten tersebut ke Ruang Penuh, Anda dapat menggunakan SpatialPanel.

Berikut adalah contoh cara melakukannya.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

Memigrasikan UI 2D ke beberapa panel spasial

Anda dapat menggunakan satu panel spasial untuk UI aplikasi, atau Anda dapat memigrasikan UI 2D ke beberapa panel spasial. Jika memilih untuk menggunakan beberapa panel untuk UI aplikasi, Anda dapat memosisikan dan memutar panel (analog dengan menata UI dalam 2D). Anda akan memulai dengan visi desain yang jelas untuk hal yang ingin dicapai, lalu Anda dapat menggunakan Spatial UI Layout API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) dan pengubah subspace untuk memosisikan dan memutar panel. Ada beberapa pola utama yang sebaiknya Anda hindari saat menerapkan beberapa panel.

  • Hindari panel tumpang-tindih yang akan memblokir pengguna agar tidak melihat informasi penting.
  • Hindari membuat pengguna kewalahan dengan panel.
  • Hindari menempatkan panel di penempatan yang tidak nyaman atau tidak terlihat. Contoh: panel yang ditempatkan di belakang pengguna sulit untuk dilihat.
  • Untuk mengetahui informasi selengkapnya tentang cara mengembangkan UI spasial, lihat panduan lengkap kami.
Konten non-spasial
Kontrol media yang di-spatialisasi (diadaptasi XR) dalam orbiter dan konten yang dibagi menjadi beberapa panel spasial
SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

Memeriksa kemampuan spasial

Saat Anda memutuskan apakah akan menampilkan elemen UI tertentu, hindari memeriksa perangkat atau mode XR tertentu. Memeriksa perangkat atau mode, bukan kemampuan, dapat menyebabkan masalah saat kemampuan di perangkat tertentu berubah seiring waktu. Sebagai gantinya, gunakan LocalSpatialCapabilities.current.isSpatialUiEnabled untuk langsung memeriksa kemampuan spasialisasi yang diperlukan seperti yang ditunjukkan dalam contoh berikut. Pendekatan ini memastikan aplikasi Anda beradaptasi dengan benar ke berbagai pengalaman XR tanpa memerlukan update setiap kali perangkat baru muncul atau kemampuan berubah.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

Menggunakan lingkungan untuk mengubah lingkungan pengguna

Jika ingin menciptakan perasaan imersi di aplikasi dengan mengubah lingkungan pengguna, Anda dapat melakukannya dengan lingkungan. Menambahkan lingkungan dalam kode adalah perubahan sederhana yang dapat Anda lakukan tanpa memengaruhi UI aplikasi yang ada secara signifikan. Untuk informasi selengkapnya tentang menetapkan lingkungan, pastikan untuk melihat panduan lengkap kami.

Menambahkan model 3D

Konten 3D dapat membantu menciptakan pengalaman yang lebih imersif dan menambahkan pemahaman spasial. Seperti kemampuan spasial dan 3D lainnya, aplikasi Anda hanya dapat menampilkan model 3D saat konten 3D diaktifkan, jadi sebaiknya pastikan aplikasi Anda masih memberikan pengalaman yang luar biasa tanpa objek 3D yang Anda tambahkan.

Menambahkan model 3D dengan SceneViewer

Jika Anda ingin menampilkan model 3D kepada pengguna, ada beberapa cara untuk menangani masalah tersebut. Jika Anda memiliki glTF yang siap digunakan di server, cara paling mudah adalah menggunakan SceneViewer XR. Anda dapat melakukannya dengan membuat Intent eksplisit, yang akan meluncurkan aplikasi SceneViewer XR di perangkat. Hal ini akan memungkinkan pengguna melihat objek dan memindahkan serta mengubah ukurannya dengan bebas di lingkungan mereka.

Menambahkan model 3D langsung dengan entitas Volume

Jika Anda menginginkan kontrol lebih besar atas hal-hal seperti posisi model 3D, ukuran relatif, atau animasi terperinci, Anda dapat memuat resource glTF langsung di aplikasi. Setelah model 3D dimuat, Anda dapat menggunakan composable Volume untuk menggabungkan entity model glTF dan menerapkan pengubah subspace untuk mengontrol cara ditampilkannya. Dengan menggunakan Volume, Anda dapat menempatkan model 3D secara deklaratif secara relatif terhadap UI spasial Anda. Untuk mengetahui informasi selengkapnya tentang cara menampilkan model 3D di aplikasi, lihat Membuat, mengontrol, dan mengelola entity.