Samsung Galaxy XR telah hadir, didukung oleh Android XR. Postingan blog ini adalah bagian dari Android XR Spotlight Week, tempat kami menyediakan berbagai referensi—postingan blog, video, kode contoh, dan lainnya—yang semuanya dirancang untuk membantu Anda mempelajari, membangun, dan menyiapkan aplikasi untuk Android XR.

Dengan peluncuran Samsung Galaxy XR , perangkat pertama yang didukung oleh Android XR kini resmi hadir. Pengguna kini dapat menikmati banyak aplikasi favorit mereka dari Play Store dalam dimensi yang benar-benar baru: dimensi ketiga!

Dimensi ketiga adalah ruang yang luas, dengan banyak ruang untuk aplikasi Anda juga. Mulai hari ini menggunakan alat yang sesuai untuk aplikasi Anda. Misalnya, Anda dapat menggunakan Jetpack XR SDK untuk membangun pengalaman XR imersif menggunakan alat pengembangan Android modern seperti Kotlin dan Compose.

Dalam postingan blog ini, kami akan menceritakan perjalanan kami sendiri saat menghadirkan keunikan aplikasi Androidify kesayangan kami ke XR, dan kami juga akan membahas dasar-dasar yang diperlukan untuk menghadirkan aplikasi Anda ke XR.

Tur melalui Androidify

Androidify adalah aplikasi open source yang memungkinkan Anda membuat bot Android, menggunakan beberapa teknologi terbaru seperti Gemini, CameraX, Navigation 3, dan tentu saja, Jetpack Compose. Androidify awalnya didesain agar terlihat bagus di ponsel, perangkat foldable, dan tablet dengan membuat tata letak adaptif.

Androidify terlihat bagus di berbagai faktor bentuk

Pilar utama tata letak adaptif adalah composable yang dapat digunakan kembali. Jetpack Compose membantu Anda membuat komponen UI kecil yang dapat ditata dengan berbagai cara untuk menciptakan pengalaman pengguna yang intuitif, apa pun jenis perangkat yang digunakan pengguna. Bahkan, Androidify kompatibel dengan Android XR tanpa modifikasi apa pun pada aplikasi.

Androidify beradaptasi dengan XR menggunakan tata letak responsif layar besarnya tanpa perubahan kode

Aplikasi yang tidak memiliki penanganan khusus untuk Android XR dapat melakukan multi-tugas di jendela berukuran sesuai dan berfungsi seperti di layar besar. Oleh karena itu, Androidify sudah memiliki fitur lengkap di Android XR tanpa perlu pekerjaan tambahan. Namun, kami tidak ingin berhenti di situ, jadi kami memutuskan untuk melakukan upaya ekstra dan membuat aplikasi yang berbeda untuk XR guna menghadirkan pengalaman yang menyenangkan bagi pengguna XR kami.

Menentukan arah di XR

Mari kita bahas konsep dasar utama untuk Android XR, dimulai dengan dua mode yang dapat digunakan untuk menjalankan aplikasi: Ruang Rumah dan Ruang Penuh.

Di Ruang Utama, beberapa aplikasi dapat dijalankan berdampingan sehingga pengguna dapat melakukan multitasking di berbagai jendela. Dalam hal ini, sangat mirip dengan mode jendela desktop di perangkat Android layar besar, tetapi di ruang virtual.

Dalam Ruang Penuh, aplikasi tidak memiliki batas ruang dan dapat memanfaatkan fitur spasial penuh Android XR, seperti UI spasial dan mengontrol lingkungan virtual.

Meskipun mungkin terasa menarik untuk membuat aplikasi Anda berjalan hanya di Ruang Penuh, pengguna mungkin ingin melakukan multi-tasking dengan aplikasi Anda, jadi mendukung keduanya akan meningkatkan pengalaman pengguna.

Mendesain untuk dimensi baru Androidify

Aplikasi yang menyenangkan dimulai dengan desain yang bagus. Ivy Knight, Senior Design Advocate di Android DevRel, mengambil tugas untuk mengambil desain yang ada untuk Androidify dan membuat desain baru untuk XR. Silakan, Ivy!

Mendesain untuk XR memerlukan pendekatan yang unik, tetapi sebenarnya masih memiliki banyak kesamaan dengan desain seluler. Kita mulai dengan memikirkan pembatasan: cara mengatur dan mengelompokkan elemen UI kita dalam subruang, baik dengan menunjukkan batas secara jelas maupun dengan menyiratkan batas secara halus. Kita juga mempelajari cara menggunakan semua ukuran elemen UI spasial, yang dimaksudkan untuk menyesuaikan dan bergerak sebagai respons terhadap pengguna. Seperti yang kami lakukan dengan Androidify, bangun dengan tata letak adaptif, sehingga Anda dapat memecah tata letak menjadi beberapa bagian untuk UI spasial.

Memulai desain dengan Ruang Beranda

Untungnya, Android XR memungkinkan Anda memulai dengan aplikasi seperti saat ini untuk Ruang Utama, sehingga kita dapat bertransisi ke desain XR yang diperluas hanya dengan menambahkan toolbar jendela dan tombol transisi Ruang Penuh.

Kami juga mempertimbangkan kemungkinan fitur hardware dan cara pengguna berinteraksi dengannya. Tata letak seluler untuk Androidify beradaptasi di berbagai posisi, ukuran kelas, dan jumlah kamera untuk memberikan lebih banyak opsi foto. Mengikuti model ini, kami juga harus menyesuaikan tata letak kamera untuk perangkat headset. Kami juga perlu melakukan penyesuaian agar teks berfungsi untuk memperhitungkan kedekatan UI dengan pengguna.

Mendesain untuk peralihan yang lebih besar ke Ruang Penuh

Ruang Penuh adalah perubahan terbesar, tetapi memberi kami ruang kreatif paling besar untuk menyesuaikan desain. 

Androidify menggunakan pembatasan visual, atau panel, untuk mengelompokkan fitur dengan latar belakang dan garis batas, seperti panel "Ambil atau pilih foto". Kami juga menggunakan komponen seperti panel aplikasi teratas untuk membuat penampungan alami dengan membingkai panel lainnya. Terakhir, penampungan intrinsik disarankan oleh kedekatan elemen tertentu dengan elemen lainnya, seperti tombol bawah "Mulai transformasi", yang berada di dekat panel "Pilih warna bot saya".

Panel spasial dibuat agar mudah dipisahkan. Untuk memutuskan cara menyesuaikan desain seluler Anda untuk panel spasial, coba hapus permukaan mulai dari permukaan yang paling belakang, lalu bergerak ke depan. Lihat berapa banyak latar belakang yang dapat Anda hapus dan apa yang tersisa. Setelah kami melakukan latihan ini untuk Androidify, yang tersisa adalah garis Android hijau besar. Garis bergelombang tidak hanya berfungsi sebagai momen branding dan latar belakang, tetapi juga sebagai penanda untuk konten dalam ruang 3D.

Dengan menetapkan titik jangkar ini, kita dapat lebih mudah membayangkan bagaimana elemen dapat bergerak di sekitarnya, dan bagaimana kita dapat menggunakan kedekatan untuk memecah dan menerjemahkan pengalaman pengguna lainnya.

Tips desain lainnya untuk membantu aplikasi Anda menjadi spasial

• Biarkan komponen tidak terikat: Pisahkan komponen dan berikan ruang (spasial) yang nyata. Sekarang saatnya memberi ruang kosong pada elemen UI tersebut.
• Menghapus permukaan: Sembunyikan latar belakang, lihat pengaruhnya terhadap desain Anda.
• Memotivasi dengan gerakan: Bagaimana Anda menggunakan transisi di aplikasi Anda? Gunakan karakter tersebut untuk membayangkan aplikasi Anda ditampilkan dalam VR.
• Pilih penanda: Jangan biarkan pengguna Anda tersesat di ruang. Memiliki elemen yang membantu mengumpulkan atau mendasari UI.

Untuk mengetahui informasi selengkapnya tentang pola desain UI XR, lihat Desain untuk Android XR di Android Developers.

Dasar-dasar UI spasial

Setelah membahas pengalaman Ivy dalam menyesuaikan pola pikirnya saat mendesain Androidify untuk XR, mari kita bahas pengembangan UI spasial. Mengembangkan UI spasial dengan Jetpack XR SDK akan terasa familiar jika Anda terbiasa menggunakan alat dan library Android modern. Anda akan menemukan konsep yang sudah Anda kenal, seperti membuat tata letak dengan Compose. Sebenarnya, tata letak spasial sangat mirip dengan tata letak 2D yang menggunakan baris, kolom, dan pengatur jarak:

Elemen ini disusun dalam SpatialRows dan SpatialColumns

Elemen spasial yang ditampilkan di sini adalah composable SpatialPanel, yang memungkinkan Anda menampilkan konten 2D seperti teks, tombol, dan video.

  Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

 SpatialPanel adalah composable subruang. Composable Subspace harus berada dalam Subspace, dan diubah oleh objek SubspaceModifier. Subruang dapat ditempatkan di mana saja dalam hierarki UI aplikasi Anda, dan hanya dapat berisi composable Subruang. Objek SubspaceModifier juga sangat mirip dengan objek Pengubah: objek ini mengontrol parameter seperti ukuran dan pemosisian.

Orbiter dapat dilampirkan ke SpatialPanel dan bergerak bersama konten yang dilampirkannya. Atribut ini sering digunakan untuk memberikan kontrol kontekstual tentang konten yang dilampirkan, sehingga konten menjadi fokus utama. Banner ini dapat ditempatkan di salah satu dari empat sisi konten, pada jarak yang dapat dikonfigurasi.

Ada banyak lagi elemen UI spasial, tetapi ini adalah elemen utama yang kami gunakan untuk membuat tata letak spasial untuk Androidify.

Mulai mengembangkan XR

Mari kita mulai dengan penyiapan project. Kami menambahkan dependensi Jetpack XR Compose, yang dapat Anda temukan di halaman dependensi Jetpack XR.

Kita menambahkan kode untuk tombol yang mengalihkan pengguna ke Ruang Penuh, dimulai dengan mendeteksi kemampuan untuk melakukannya:

  @Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Kemudian, kita membuat komponen tombol baru yang menggunakan ikon Perluas Konten ke tata letak yang ada, dan memberinya perilaku onClick:

  @Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

Sekarang, mengklik tombol tersebut hanya akan menampilkan tata letak Sedang di Ruang Penuh. Kita dapat memeriksa kemampuan spasial dan menentukan apakah UI spasial dapat ditampilkan – dalam hal ini, kita akan menampilkan tata letak spasial baru:

  @Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

Menerapkan desain untuk Layar Utama

Mari kita kembali ke desain spasial untuk Layar Utama di Ruang Penuh untuk memahami cara penerapannya.

Di sini, kita mengidentifikasi dua elemen SpatialPanel: satu panel tempat kartu video berada di sebelah kanan, dan satu panel yang berisi UI utama. Terakhir, ada Orbiter yang terpasang di bagian atas. Mari kita mulai dengan panel pemutar video:

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Kita cukup menggunakan kembali komponen VideoPlayer 2D dari tata letak biasa ke dalam SpatialPanel tanpa perubahan tambahan. Berikut tampilannya jika berdiri sendiri:

Panel konten utama mengikuti cerita yang sama: kami menggunakan kembali konten panel sedang dalam SpatialPanel.

  SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Kita memberi panel ini ResizePolicy, yang memberi panel beberapa tuas di dekat tepi yang memungkinkan pengguna mengubah ukuran panel. Selain itu, ada MovePolicy, yang memungkinkan pengguna menariknya.

Menempatkannya di Subspace yang sama membuatnya tidak saling bergantung, jadi kami menjadikan panel VideoPlayer sebagai turunan dari panel konten utama. Hal ini membuat panel VideoPlayer bergerak saat panel konten utama ditarik melalui hubungan induk-turunan.

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

Begitulah cara kita membuat layar pertama.

Melanjutkan ke layar lainnya

Saya juga akan membahas beberapa layar lainnya secara singkat, dengan menyoroti pertimbangan khusus yang dibuat untuk setiap layar.

Di sini, kita menggunakan composable SpatialRow dan SpatialColumn untuk membuat tata letak yang sesuai dengan ruang tampilan yang direkomendasikan, dengan menggunakan kembali komponen dari tata letak Medium.

Layar Hasil di Ruang Penuh: Bot yang dibuat dengan perintah: topi bisbol merah, kacamata hitam aviator, kaus biru muda, celana pendek kotak-kotak merah dan putih, sandal jepit hijau, dan memegang raket tenis.

Layar hasil menampilkan kutipan pelengkap menggunakan efek feathering, sehingga kutipan tersebut dapat memudar di dekat tepi layar. Fitur ini juga menggunakan transisi 3D yang sebenarnya saat melihat input yang digunakan, membalikkan gambar di ruang.

Memublikasikan ke Google Play Store

Setelah aplikasi siap untuk XR dengan tata letak spasial, kami merilisnya di Play Store. Ada satu perubahan penting terakhir yang kami lakukan pada file AndroidManifest.xml aplikasi:

  <!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Tindakan ini memungkinkan Play Store mengetahui bahwa aplikasi ini memiliki fitur yang dirancang khusus untuk XR, dengan menampilkan badge yang memberi tahu pengguna bahwa aplikasi dibuat dengan mempertimbangkan XR:

Saat mengupload rilis, kita tidak memerlukan langkah khusus untuk merilis XR: aplikasi yang sama didistribusikan seperti biasa kepada pengguna di jalur seluler dan pengguna di perangkat XR. Namun, Anda dapat memilih untuk menambahkan screenshot khusus XR aplikasi Anda, atau bahkan mengupload pratinjau imersif aplikasi Anda menggunakan aset video spasial. Di perangkat Android XR, Play Store akan otomatis menampilkannya sebagai pratinjau 3D imersif, sehingga pengguna dapat merasakan kedalaman dan skala konten Anda sebelum menginstal aplikasi.

Mulai bangun pengalaman Anda sendiri sekarang

Androidify adalah contoh bagus tentang cara menspasialisasi aplikasi Jetpack Compose 2D yang ada. Hari ini, kami menunjukkan seluruh proses pengembangan UI spasial untuk Androidify, mulai dari desain hingga kode hingga publikasi. Kami memodifikasi desain yang ada agar berfungsi dengan paradigma spasial, menggunakan composable SpatialPanel dan Orbiter untuk membuat tata letak spasial yang ditampilkan saat pengguna memasuki Ruang Penuh, dan terakhir, merilis versi baru aplikasi ke Play Store.

Kami harap postingan blog ini membantu Anda memahami cara membawa aplikasi Anda sendiri ke Android XR. Berikut beberapa link lainnya yang dapat membantu Anda:

• Lihat kode sumber untuk Androidify, dan buat bot Anda sendiri menggunakan Androidify di Google Play.
• Mulai menggunakan dokumentasi developer kami dan pelajari lebih lanjut Jetpack Compose untuk XR.
• Download emulator Android XR dan coba aplikasi Anda sendiri.