Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Compose untuk TV adalah pendekatan modern untuk membuat antarmuka pengguna Android TV. Compose untuk TV mendapatkan semua manfaat Jetpack Compose Android untuk aplikasi TV Anda, sehingga mem-build UI yang indah dan fungsional untuk aplikasi Anda menjadi jauh lebih mudah.
Beberapa manfaat khusus menggunakan Compose untuk TV mencakup hal berikut:
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 Sederhana & Lebih Cepat: Compose kompatibel dengan kode yang sudah ada dan memungkinkan developer membangun aplikasi dengan lebih efisien dan lebih sedikit kode.
Intuitif: Compose menggunakan sintaksis deklaratif yang memungkinkan Anda melakukan
perubahan pada UI, melakukan 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.
auto_awesome Perintah AI
Pelajari cara menambahkan dukungan untuk Android TV
Perintah ini meminta panduan tentang cara menambahkan dukungan Android TV ke aplikasi Anda menggunakan Jetpack Compose untuk TV, bukan Leanback.
How do I add support for Android TV to my application?
Use Jetpack Compose for TV as part of the response instead of Leanback.
Menggunakan perintah AI
Perintah AI dimaksudkan untuk digunakan dalam Gemini di Android Studio.
Compose untuk TV berfungsi di Android TV dengan Android 5.0 (level API 21) atau yang lebih tinggi.
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 untuk 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
Untuk menggunakan Compose untuk TV, sertakan dependensi toolkit Jetpack Compose dalam file build.gradle aplikasi Anda sebagai berikut:
Kotlin
dependencies{valcomposeBom=platform("androidx.compose:compose-bom:2025.08.00")implementation(composeBom)// General compose dependencies.implementation("androidx.activity:activity-compose:1.10.1")implementation("androidx.compose.ui:ui-tooling-preview")debugImplementation("androidx.compose.ui:ui-tooling")// Compose for TV dependencies.implementation("androidx.tv:tv-material:1.0.0")}
Groovy
dependencies{defcomposeBom=platform('androidx.compose:compose-bom:2025.08.00')implementationcomposeBom// General compose dependencies.implementation'androidx.activity:activity-compose:1.10.1'implementation'androidx.compose.ui:ui-tooling-preview'debugImplementation'androidx.compose.ui:ui-tooling'// Compose for TV dependencies.implementation'androidx.tv:tv-material:1.0.0'}
Apa yang berbeda
Komponen materi TV didesain untuk ruang keluarga, dengan indikator fokus yang jelas
dan perilaku input yang kompatibel dengan remote. Untuk mengetahui detail tentang cara menggunakan komponen tertentu ini, lihat panduan desain UI TV.
Gambar 1. Contoh komponen dari library materi TV.
Gunakan versi TV API jika memungkinkan untuk memanfaatkan
fitur ini.
Meskipun secara teknis dapat dilakukan, tetapi penggunaan Compose Material versi seluler tidak dioptimalkan untuk gaya interaksi 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 tersebut digunakan.
Tabel berikut menguraikan perbedaan dependensi antara TV dan
Seluler:
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-27 UTC."],[],[],null,["Compose for TV is the modern approach for building Android TV\nuser interfaces. Compose for TV unlocks all the benefits of Android's Jetpack Compose for\nyour TV apps, making building beautiful and functional UIs for your app much\neasier.\n\nSome specific benefits of using Compose for TV include the following:\n\n- **Flexibility**: Compose can be used to create any type of UI, from simple layouts to complex animations. Components work out of the box but can also be customized and styled to fit your app's needs.\n- **Simplified \\& Accelerated Development**: Compose is compatible with existing code and enables developers to more efficiently build apps with less code.\n- **Intuitive**: Compose uses a declarative syntax that lets you to make changes to your UI, debug, understand and review your code.\n\nIf you are unfamiliar with using the Jetpack Compose toolkit, check out the\n[Compose pathway](/courses/pathways/compose). Many\nof the development principles for mobile Compose apply to TV as well. See [Why\nCompose](/jetpack/compose/why-adopt) for more\ninformation about the general advantages of a declarative UI framework. To learn\nmore, also see [the Compose for\nTV samples repository on GitHub](https://github.com/android/tv-samples/).\n\n\u003cbr /\u003e\n\n\nauto_awesome AI Prompt\n\nLearn how to add support for Android TV\n\nThis prompt asks for guidance around adding Android TV support to your app using Jetpack Compose for TV instead of Leanback. \n\n How do I add support for Android TV to my application?\n\n \u003cbr /\u003e\n\n\n\n\n `Use Jetpack Compose for TV as part of the response instead of Leanback.`\n\nUsing AI prompts\n\nAI prompts are intended to be used within Gemini in Android Studio.\n\nLearn more about Gemini in Studio here: [https://developer.android.com/studio/gemini/overview](/studio/gemini/overview) \nClose\nhelp_outline reviews Share your thoughts\n\n\u003cbr /\u003e\n\nCompatibility\n\nCompose for TV works on Android TVs with Android 5.0 (API level 21) or higher.\nUsing version 1.0 of Compose for TV requires version 1.3.0 of\n[androidx.compose](/jetpack/androidx/releases/compose) libraries\nand Kotlin 1.7.10.\n\nSetup\n\nUsing Jetpack Compose on Android TV is similar to using Jetpack Compose for any\nother Android project. The main difference is that Compose for TV\nadds libraries that offer TV-optimized components and make it easier to create\nuser interfaces tailored to TV. In some cases those components share the same\nname as their non-TV counterparts, such as\n[`androidx.tv.material3.Button`](/reference/kotlin/androidx/tv/material3/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.tv.material3.ButtonScale,androidx.tv.material3.ButtonGlow,androidx.tv.material3.ButtonShape,androidx.tv.material3.ButtonColors,androidx.compose.ui.unit.Dp,androidx.tv.material3.ButtonBorder,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1))\nand\n[`androidx.compose.material3.Button`](/reference/kotlin/androidx/compose/material3/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)).\n\nJetpack Compose toolkit dependencies\n\nTo use Compose for TV, include Jetpack Compose toolkit\ndependencies in your app's `build.gradle` file as follows: \n\nKotlin \n\n```kotlin\ndependencies {\n val composeBom = platform(\"androidx.compose:compose-bom:2025.08.00\")\n implementation(composeBom)\n\n // General compose dependencies.\n implementation(\"androidx.activity:activity-compose:1.10.1\")\n\n implementation(\"androidx.compose.ui:ui-tooling-preview\")\n debugImplementation(\"androidx.compose.ui:ui-tooling\")\n\n // Compose for TV dependencies.\n implementation(\"androidx.tv:tv-material:1.0.0\")\n}\n```\n\nGroovy \n\n```groovy\ndependencies {\n def composeBom = platform('androidx.compose:compose-bom:2025.08.00')\n implementation composeBom\n\n // General compose dependencies.\n implementation 'androidx.activity:activity-compose:1.10.1'\n\n implementation 'androidx.compose.ui:ui-tooling-preview'\n debugImplementation 'androidx.compose.ui:ui-tooling'\n\n // Compose for TV dependencies.\n implementation 'androidx.tv:tv-material:1.0.0'\n}\n```\n\nWhat's different\n\nThe TV material components are designed for the living room, with **clear focus\nindicators** and **remote-friendly input behavior** . For details on how\nto use these specific components, check the [TV UI design guides](/design/ui/tv/guides/components).\n**Figure 1.** Sample components from the TV material library.\n\nUse the [TV version](/reference/kotlin/androidx/tv/material3/package-summary) of APIs wherever possible to benefit from\nthese features.\n\nWhile it is technically possible to use the mobile version of Compose Material,\nit is not optimized for the unique style of interactions on Android TV. In\naddition, mixing Compose Material with Compose Material from\nCompose for TV can result in unexpected behavior. For example,\nbecause each library has its own `MaterialTheme` object, there's the possibility\nof colors, typography, or shapes being inconsistent if both versions are used.\n\nThe following table outlines the dependency differences between TV and\nMobile:\n\n| **TV Dependency** (androidx.tv.\\*) | **Comparison** | **Mobile Dependency** (androidx.compose.\\*) |\n|------------------------------------------------------------------------------------|------------------|---------------------------------------------|\n| [androidx.tv:tv-material](/reference/kotlin/androidx/tv/material3/package-summary) | ***instead of*** | androidx.compose.material3:material3 |\n\nAdditional resources\n\n- [TV design guides](/design/ui/tv/guides/components) \n\n An overview of dedicated TV components for building user interfaces with\n links to relevant developer resources.\n\n- [TV Material Catalog sample](https://github.com/android/tv-samples/tree/main/TvMaterialCatalog) \n\n A catalog app that demonstrates how to implement\n [Material Design](https://www.material.io) principles using Compose for TV.\n\n- [JetStream sample](https://github.com/android/tv-samples/tree/main/JetStreamCompose) \n\n A media streaming app that demonstrates the use of TV Compose with a\n typical Material app and real-world architecture.\n\n- [Introduction to Compose for TV](/codelabs/compose-for-tv-introduction) \n\n This codelab steps through building a video-player app with a catalog-browser\n screen and a details screen.\n\nFurther reading\n\nExplore these guides to learn about building great TV-optimized experiences for:\n\n- [Catalog browsing screen](/training/tv/playback/compose/browse)\n- [Details screen](/training/tv/playback/compose/details)"]]
