Mengubah aplikasi Android menjadi 3D dengan XR

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Headset XR
Kacamata XR Berkabel
Mempelajari jenis perangkat XR →

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

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

  • Kemampuan spasial: Android XR menawarkan beragam fitur spasial yang tersedia untuk aplikasi Anda, tetapi Anda tidak harus menerapkan setiap kemampuan. Terapkan secara strategis komponen yang melengkapi hierarki visual, tata letak, dan perjalanan pengguna aplikasi Anda. Pertimbangkan untuk menyertakan 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 dan beradaptasi dengan lancar ke kanvas tanpa batas dan jendela yang dapat diubah ukurannya secara bebas. Salah satu pertimbangan terpenting 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 memanfaatkan lingkungan yang menarik untuk menyempurnakan 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 mengandalkan View, tinjau bekerja dengan View di XR untuk mempelajari lebih lanjut cara memanfaatkan interoperabilitas Compose saat bekerja dengan View, atau mengevaluasi bekerja langsung dengan library Jetpack SceneCore.
  • Memublikasikan di Play Store: Untuk memverifikasi bahwa aplikasi yang ditingkatkan kualitasnya dengan XR dapat ditemukan di Play Store:

Mengonversi komponen UI 2D ke 3D

Mengikuti tips ini dapat membuat perbedaan besar dalam membuat aplikasi Anda terasa seperti 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, tempat penggabungan 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 pada jarak yang nyaman dari pengguna agar tidak terlalu dekat atau terlalu jauh.
  • Gunakan UI adaptif untuk tata letak spasial: Manfaatkan konsep UI adaptif seperti panel dan pengungkapan progresif untuk menguraikan tata letak Anda secara efektif menjadi beberapa panel spasial, sehingga mengoptimalkan presentasi informasi.
  • Gunakan orbiter untuk elemen dan pola persisten: Cadangkan orbiter untuk elemen UX persisten dan kontekstual seperti navigasi dan kontrol. Batasi penggunaan orbiter untuk menjaga kejelasan dan menghindari kekacauan.
  • Gunakan elevasi dengan bijak: Terapkan elevasi spasial ke komponen sementara yang tetap diam dan tidak di-scroll bersama konten. Hindari meninggikan area yang luas untuk mencegah ketidaknyamanan visual dan mempertahankan hierarki visual yang seimbang.

Jetpack Compose untuk XR memperkenalkan komponen baru yang mengelola peningkatan XR, sehingga Anda tidak perlu melakukannya. Misalnya, Anda dapat menggunakan SpatialPopup dan SpatialDialog untuk menggantikan versi 2D-nya. Komponen ini muncul sebagai UI 2D biasa saat UI spasial tidak tersedia, dan menampilkan UI spasial aplikasi Anda jika memungkinkan. Penggunaannya 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()
}

Meningkatkan elemen UI 2D

Jika Anda ingin meningkatkan UI dengan kontrol yang lebih terperinci, kami menyediakan SpatialElevation untuk memungkinkan Anda meningkatkan composable apa pun di aplikasi ke level 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 dalam contoh berikut.

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

Poin penting tentang kode

  • Jangan memberikan efek spasial atau meninggikan area dan bidang yang besar seperti panel bawah dan panel samping.
  • Jangan naikkan elemen UI yang dapat di-scroll dengan konten.

Memigrasikan komponen 2D ke orbiter

Orbiter adalah elemen mengambang yang biasanya berisi kontrol yang dapat digunakan pengguna untuk berinteraksi. Orbiter dapat ditambatkan ke panel spasial atau entitas lain seperti tata letak spasial. Orbiter 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 non-spasial

Kolom navigasi spasial (disesuaikan dengan XR)

Kolom samping navigasi spasial (disesuaikan dengan XR)

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

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}

Poin penting tentang pengorbit

  • Orbiter adalah komponen yang dirancang untuk melampirkan elemen UI yang ada ke panel spasial
  • Lihat panduan desain aplikasi Android XR kami untuk memverifikasi elemen mana yang akan 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, widget 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 fundamental 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 tengah 41° ruang pandang pengguna.
  • Panel tetap berada di tempatnya saat pengguna bergerak. Penambatan hanya tersedia untuk passthrough.
  • Gunakan sudut lengkung 32 dp yang direkomendasikan sistem untuk panel.
  • Target sentuh harus berukuran 56 dp dan tidak lebih kecil dari 48 dp.
  • Pertahankan rasio kontras agar mudah dibaca, 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 Ruang Rumah. Pelajari cara beralih antara Ruang Utama dan Ruang Penuh. Untuk menampilkan konten tersebut ke Ruang Penuh, Anda dapat menggunakan SpatialPanel.

Berikut adalah contoh cara melakukannya.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}

Memigrasikan UI 2D ke beberapa panel spasial

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

  • Hindari panel yang tumpang-tindih yang akan menghalangi pengguna 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 terlihat.
  • Untuk mengetahui informasi selengkapnya tentang cara mengembangkan UI spasial, lihat panduan lengkap kami.

Konten non-spasial

Konten non-spasial

Kontrol media spasial (yang disesuaikan dengan XR) dalam orbiter dan konten yang dipecah menjadi beberapa panel spasial

Kontrol media spasial (yang disesuaikan dengan XR) dalam orbiter dan konten yang dipecah menjadi beberapa panel spasial

SpatialRow {
    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()
    }
}

Menambahkan kemampuan spasial

Setelah membuat konsep dan mulai mengonversi komponen UI 2D ke 3D, Anda juga dapat mulai melihat kemampuan spasial lain yang dapat ditambahkan ke aplikasi untuk membantu menciptakan pengalaman yang lebih berbeda untuk Android XR.

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 pada 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 perlu 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 sekitar pengguna

Jika ingin menciptakan kesan imersif di aplikasi dengan mengubah lingkungan pengguna, Anda dapat melakukannya dengan lingkungan. Menambahkan lingkungan dalam kode adalah perubahan sederhana yang dapat Anda lakukan tanpa berdampak signifikan pada UI aplikasi yang ada. Untuk mengetahui informasi selengkapnya tentang cara menyiapkan lingkungan, pastikan untuk melihat panduan lengkap kami.

Menambahkan konten 3D

Konten 3D seperti model 3D dan video spasial dapat membantu menciptakan pengalaman yang lebih imersif dan menambahkan pemahaman spasial. Aplikasi Anda hanya dapat menampilkan konten 3D jika kemampuan spasial tersedia, jadi Anda harus memeriksa apakah kemampuan spasial tersedia terlebih dahulu.

Lihat panduan yang sesuai untuk menambahkan model 3D, video spasial, atau audio spasial.