Menggunakan Jetpack Compose di Android TV

Compose untuk TV adalah pendekatan modern untuk mem-build antarmuka pengguna Android TV. Compose untuk TV mendapatkan semua manfaat Jetpack Compose Android untuk aplikasi TV Anda, sehingga mem-build UI yang menarik dan fungsional untuk aplikasi Anda menjadi lebih mudah.

Beberapa manfaat khusus menggunakan Compose untuk TV meliputi:

  • Fleksibilitas: Compose dapat digunakan untuk membuat jenis UI apa pun, mulai dari tata letak sederhana hingga animasi yang kompleks. Komponen dapat langsung difungsikan, tetapi juga dapat disesuaikan dan ditata agar sesuai dengan kebutuhan aplikasi Anda.
  • Pengembangan yang Disederhanakan & Dipercepat: Compose kompatibel dengan kode yang sudah ada dan memungkinkan developer membuat aplikasi dengan lebih efisien dengan lebih sedikit kode.
  • Intuitif: Compose menggunakan sintaksis deklaratif yang memungkinkan Anda membuat perubahan pada UI, men-debug, memahami, dan meninjau kode.

Jika Anda tidak terbiasa menggunakan toolkit Jetpack Compose, lihat jalur Compose. Banyak prinsip pengembangan untuk Compose seluler juga berlaku untuk TV. Lihat Mengapa Compose untuk mengetahui informasi selengkapnya tentang keuntungan umum framework UI deklaratif. Untuk mempelajari lebih lanjut, lihat juga repositori contoh Compose untuk TV di GitHub.

Kompatibilitas

Compose untuk TV berfungsi di Android TV dengan Android 5.0 (level API 21) atau yang lebih baru. Penggunaan Compose untuk TV versi 1.0 memerlukan library androidx.compose versi 1.3.0 dan Kotlin 1.7.10.

Penyiapan

Menggunakan Jetpack Compose di Android TV mirip dengan menggunakan Jetpack Compose untuk project Android lainnya. Perbedaan utamanya adalah Compose untuk TV menambahkan library yang menawarkan komponen yang dioptimalkan untuk TV dan mempermudah pembuatan antarmuka pengguna yang disesuaikan dengan TV. Terkadang, komponen tersebut memiliki nama yang sama dengan komponen non-TV, seperti androidx.tv.material3.Button dan androidx.compose.material3.Button.

Dependensi toolkit Jetpack Compose

Agar dapat menggunakan Compose untuk TV, sertakan dependensi toolkit Jetpack Compose dalam file build.gradle aplikasi Anda sebagai berikut:

Kotlin

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
   implementation(composeBom)

   // General compose dependencies.
   implementation("androidx.activity:activity-compose:1.9.0")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies.
   implementation("androidx.tv:tv-foundation:1.0.0-alpha10")
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Groovy

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
   implementation composeBom

   // General compose dependencies.
   implementation 'androidx.activity:activity-compose:1.9.0'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies.
   implementation 'androidx.tv:tv-foundation:1.0.0-alpha10'
   implementation 'androidx.tv:tv-material:1.0.0-beta01'
}

Yang berbeda

Gunakan versi TV API jika memungkinkan. Meskipun secara teknis dapat dilakukan, tetapi penggunaan Compose Material versi seluler tidak dioptimalkan untuk gaya interaksi yang unik di Android TV. Selain itu, menggabungkan Compose Material dengan Compose Material dari Compose untuk TV dapat menyebabkan perilaku yang tidak terduga. Misalnya, karena setiap library memiliki objek MaterialTheme sendiri, ada kemungkinan warna, tipografi, atau bentuk menjadi tidak konsisten jika kedua versi digunakan.

Tabel berikut menguraikan perbedaan dependensi antara TV dan Seluler:

Dependensi TV
(androidx.tv.*)
Perbandingan Dependensi Perangkat Seluler
(androidx.compose.*)
androidx.tv:tv-material bukan androidx.compose.material3:material3
androidx.tv:tv-foundation selain juga androidx.compose.foundation:foundation

Referensi tambahan

  • Contoh Katalog Material TV
    Aplikasi katalog yang menunjukkan cara menerapkan prinsip Desain Material menggunakan Compose untuk TV.

  • Contoh JetStream
    Aplikasi streaming media yang menunjukkan penggunaan TV Compose dengan aplikasi Material standar dan arsitektur dunia nyata.

  • Pengantar Compose untuk TV
    Codelab ini menjalankan langkah-langkah dalam membangun aplikasi pemutar video dengan layar browser katalog dan layar detail.

Bacaan lebih lanjut

Jelajahi panduan ini untuk mempelajari cara membuat pengalaman hebat yang dioptimalkan bagi TV untuk: