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 dirancang untuk membantu Anda mempelajari, membuat, dan menyiapkan aplikasi untuk Android XR.

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

Dimensi ketiga adalah dimensi 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 membuat pengalaman XR imersif menggunakan alat pengembangan Android modern seperti Kotlin dan Compose.

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

Tur 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 berukuran kecil yang dapat ditata dengan berbagai cara untuk menciptakan pengalaman pengguna yang intuitif, apa pun jenis perangkat yang digunakan pengguna. Faktanya, Androidify kompatibel dengan Android XR tanpa modifikasi apa pun pada aplikasi.

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

Aplikasi yang tidak memiliki penanganan khusus untuk Android XR dapat melakukan multitasking di jendela berukuran sesuai dan berfungsi seperti di layar besar. Oleh karena itu, Androidify sudah memiliki semua fitur di Android XR tanpa perlu melakukan pekerjaan tambahan. Namun, kami tidak ingin berhenti di situ, jadi kami memutuskan untuk melakukan upaya lebih dan membuat aplikasi yang dirancang khusus untuk XR guna memberikan pengalaman yang menyenangkan kepada pengguna XR kami.

Mengenal 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 Rumah, beberapa aplikasi dapat dijalankan berdampingan sehingga pengguna dapat melakukan multitasking di berbagai jendela. Dalam hal ini, Ruang Rumah sangat mirip dengan jendela desktop di perangkat Android layar besar, tetapi di ruang virtual.

Di Ruang Penuh, aplikasi tidak memiliki batas ruang dan dapat menggunakan fitur spasial lengkap Android XR, seperti UI spasial dan mengontrol lingkungan virtual.

Meskipun mungkin tampak menarik untuk membuat aplikasi Anda hanya berjalan di Ruang Penuh, pengguna mungkin ingin melakukan multitasking dengan aplikasi Anda, sehingga 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. Kami mulai dengan memikirkan penampungan: cara mengatur dan mengelompokkan elemen UI kami di subruang, baik dengan menampilkan batas secara jelas maupun dengan menyiratkan batas secara halus. Kami juga belajar untuk menggunakan semua ukuran elemen UI spasial, yang dimaksudkan untuk menyesuaikan dan bergerak sebagai respons terhadap pengguna. Seperti yang kami lakukan dengan Androidify, buat dengan tata letak adaptif, sehingga Anda dapat membagi tata letak menjadi beberapa bagian untuk UI spasial.

Memulai desain dengan Ruang Rumah

Untungnya, Android XR memungkinkan Anda memulai dengan aplikasi seperti yang ada saat ini untuk Ruang Rumah, sehingga kami 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 class, dan jumlah kamera untuk memberikan lebih banyak opsi foto. Mengikuti model ini, kami juga harus mengadaptasi tata letak kamera untuk perangkat headset. Kami juga perlu melakukan penyesuaian untuk teks agar berfungsi dengan baik untuk memperhitungkan jarak UI dengan pengguna.

Mendesain untuk perubahan yang lebih besar ke Ruang Penuh

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

Androidify menggunakan penampungan visual, atau panel, untuk mengelompokkan fitur dengan latar belakang dan garis luar, 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 untuk pemisahan yang mudah. Untuk memutuskan cara mengadaptasi desain seluler untuk panel spasial, coba hapus permukaan mulai dari permukaan yang paling belakang, lalu bergerak maju. Lihat berapa banyak latar belakang yang dapat Anda hapus dan apa yang tersisa. Setelah kami melakukan latihan ini untuk Androidify, yang tersisa adalah garis bergelombang Android berwarna hijau besar. Garis bergelombang tidak hanya berfungsi sebagai momen dan latar belakang branding, tetapi juga sebagai anchor untuk konten di ruang 3D.

Menetapkan anchor ini memudahkan untuk membayangkan bagaimana elemen dapat bergerak di sekitarnya, dan bagaimana kami dapat menggunakan kedekatan untuk memisahkan dan menerjemahkan pengalaman pengguna lainnya.

Tips desain lainnya untuk membantu aplikasi Anda menjadi spasial

• Biarkan elemen tidak tertampung: Pisahkan komponen dan berikan ruang (spasial) yang nyata. Saatnya memberi ruang bernapas bagi elemen UI tersebut.
• Hapus permukaan: Sembunyikan latar belakang, lihat pengaruhnya terhadap desain Anda.
• Beri motivasi dengan gerakan: Bagaimana Anda menggunakan transisi di aplikasi Anda? Gunakan karakter tersebut untuk membayangkan aplikasi Anda masuk ke VR.
• Pilih anchor: Jangan biarkan pengguna Anda tersesat di ruang. Gunakan elemen yang membantu mengumpulkan atau menempatkan UI.

Untuk mengetahui lebih lanjut pola desain UI XR, lihat Mendesain untuk Android XR di Android Developers.

Dasar-dasar UI spasial

Setelah membahas pengalaman Ivy dalam mengadaptasi 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. Faktanya, tata letak spasial sangat mirip dengan tata letak 2D menggunakan baris, kolom, dan spacer:

Elemen ini disusun dalam SpatialRows dan SpatialColumns

Elemen spasial yang ditampilkan di sini adalah SpatialPanel composable, 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 subruang harus berada dalam Subruang, dan dimodifikasi 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 Modifier: objek ini mengontrol parameter seperti ukuran dan posisi.

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

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

Memulai pengembangan XR

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

Kami 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, kami 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, kami mengidentifikasi dua elemen SpatialPanel: satu panel tempat kartu video berada di sebelah kanan, dan satu panel yang berisi UI utama. Terakhir, ada Orbiter yang dilampirkan ke 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)
      }
   }
}

Kami cukup menggunakan kembali komponen VideoPlayer 2D dari tata letak reguler ke SpatialPanel tanpa perubahan tambahan. Berikut adalah tampilannya secara mandiri:

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

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

Kami memberi panel ini ResizePolicy, yang memberi panel beberapa handel di dekat tepi yang memungkinkan pengguna mengubah ukuran panel. Panel ini juga memiliki MovePolicy, yang memungkinkan pengguna menyeretnya.

Menempatkannya di Subruang yang sama membuat keduanya independen satu sama lain, sehingga kami menjadikan panel VideoPlayer sebagai turunan dari panel konten utama. Hal ini membuat panel VideoPlayer bergerak saat panel konten utama diseret 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 kami 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, kami menggunakan composable SpatialRow dan SpatialColumn untuk membuat tata letak yang sesuai dengan ruang tampilan yang direkomendasikan, dengan menggunakan kembali komponen dari tata letak Sedang.

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. Layar ini juga menggunakan transisi 3D yang sebenarnya saat melihat input yang digunakan, membalik gambar di ruang.

Memublikasikan ke Google Play Store

Setelah aplikasi siap untuk XR dengan tata letak spasial, kami melanjutkan untuk merilisnya ke 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" />

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

Saat mengupload rilis, kami tidak memerlukan langkah khusus untuk merilis untuk XR: aplikasi yang sama didistribusikan seperti biasa kepada pengguna di jalur seluler dan kepada pengguna di perangkat XR. Namun, Anda dapat memilih untuk menambahkan screenshot khusus XR dari 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 buat pengalaman Anda sendiri hari ini

Androidify adalah contoh bagus tentang cara membuat aplikasi Jetpack Compose 2D yang ada menjadi spasial. Hari ini, kami menunjukkan proses lengkap pengembangan UI spasial untuk Androidify, 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.

Semoga postingan blog ini membantu Anda memahami cara menghadirkan 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.
• Unduh emulator Android XR dan coba aplikasi Anda sendiri.