Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Compose cho TV là phương pháp hiện đại để xây dựng giao diện người dùng Android TV. Compose cho TV giúp tận dụng toàn bộ lợi ích của Jetpack Compose của Android cho các ứng dụng truyền hình, giúp bạn dễ dàng xây dựng giao diện người dùng đẹp có đầy đủ chức năng cho ứng dụng.
Sau đây là một số lợi ích cụ thể của việc sử dụng Compose cho TV:
Tính linh hoạt: Bạn có thể dùng Compose để tạo mọi loại giao diện người dùng, từ bố cục đơn giản cho đến ảnh động phức tạp. Các thành phần có thể sử dụng được ngay, nhưng cũng có thể được tuỳ chỉnh và định kiểu cho phù hợp với nhu cầu của ứng dụng.
Đơn giản hoá và tăng tốc quá trình phát triển: Compose tương thích với mã nguồn hiện có và cho phép nhà phát triển xây dựng ứng dụng hiệu quả hơn với ít mã hơn.
Trực quan: Compose sử dụng cú pháp khai báo cho phép bạn thay đổi giao diện người dùng, gỡ lỗi, hiểu và xem lại mã.
Nếu bạn chưa hiểu rõ về cách sử dụng bộ công cụ Jetpack Compose, hãy tham khảo Lộ trình tìm hiểu Compose. Nhiều nguyên tắc phát triển cho Compose trên thiết bị di động cũng áp dụng cho TV. Xem bài viết Tại sao nên dùng Compose để biết thêm thông tin về những ưu điểm chung của khung giao diện người dùng khai báo. Để tìm hiểu thêm, hãy xem kho lưu trữ mẫu Compose cho TV trên GitHub.
auto_awesome Câu lệnh AI
Tìm hiểu cách thêm tính năng hỗ trợ cho Android TV
Lời nhắc này yêu cầu hướng dẫn về cách thêm tính năng hỗ trợ Android TV vào ứng dụng bằng Jetpack Compose cho TV thay vì 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.
Sử dụng lời nhắc AI
Câu lệnh AI được dùng trong Gemini trong Android Studio.
Compose cho TV hoạt động trên Android TV chạy Android 5.0 (API cấp 21) trở lên.
Để sử dụng phiên bản 1.0 của Compose cho TV, bạn phải sử dụng phiên bản 1.3.0 của thư viện androidx.compose và Kotlin 1.7.10.
Thiết lập
Jetpack Compose trên Android TV có cách sử dụng tương tự như Jetpack Compose cho mọi dự án Android khác. Điểm khác biệt chính là Compose cho TV sẽ có thêm các thư viện cung cấp các thành phần được tối ưu hoá cho TV và giúp cho việc tạo giao diện người dùng dành riêng cho TV dễ dàng hơn. Trong một số trường hợp, các thành phần đó có cùng tên với các thành phần có chức năng tương đương nhưng không dành cho TV, chẳng hạn như androidx.tv.material3.Button và androidx.compose.material3.Button.
Các phần phụ thuộc của bộ công cụ Jetpack Compose
Để sử dụng Compose cho TV, hãy đưa các phần phụ thuộc của bộ công cụ Jetpack Compose vào tệp build.gradle của ứng dụng như sau:
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'}
Điểm khác biệt
Các thành phần Material trên TV được thiết kế cho phòng khách, với chỉ báo tiêu điểm rõ ràng và hành vi nhập liệu thân thiện với điều khiển từ xa. Để biết thông tin chi tiết về cách sử dụng các thành phần cụ thể này, hãy xem hướng dẫn thiết kế giao diện người dùng cho TV.
Hình 1. Các thành phần mẫu trong thư viện Material cho TV.
Hãy sử dụng phiên bản TV của API bất cứ khi nào có thể để tận dụng các tính năng này.
Mặc dù về mặt kỹ thuật, bạn có thể sử dụng phiên bản Compose Material cho thiết bị di động, nhưng phiên bản này không được tối ưu hoá cho kiểu tương tác riêng biệt trên Android TV. Ngoài ra, việc kết hợp Compose Material với Compose Material từ Compose cho TV có thể dẫn đến hành vi ngoài dự kiến. Ví dụ: vì mỗi thư viện có đối tượng MaterialTheme riêng nên có thể màu sắc, kiểu chữ hoặc hình dạng có thể không nhất quán nếu sử dụng cả hai phiên bản.
Bảng sau đây trình bày những điểm khác biệt về phần phụ thuộc giữa TV và Thiết bị di động:
Phần phụ thuộc TV
(androidx.tv.*)
So sánh
Phần phụ thuộc trên Thiết bị di động
(androidx.compose.*)
Hướng dẫn thiết kế cho TV
Thông tin tổng quan về các thành phần chuyên dụng cho TV để tạo giao diện người dùng, kèm theo đường liên kết đến các tài nguyên liên quan dành cho nhà phát triển.
Mẫu JetStream
Một ứng dụng phát trực tuyến nội dung nghe nhìn minh hoạ cách sử dụng TV Compose với một ứng dụng Material điển hình và cấu trúc thực tế.
Giới thiệu về Compose cho TV
Lớp học lập trình này hướng dẫn từng bước cách tạo một ứng dụng trình phát video có màn hình duyệt danh mục và màn hình hiển thị thông tin chi tiết.
Tài liệu đọc thêm
Hãy khám phá những hướng dẫn này để tìm hiểu cách tạo ra trải nghiệm tuyệt vời được tối ưu hoá cho TV:
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-21 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-21 UTC."],[],[],null,["# Use Jetpack Compose on Android TV\n\nCompose 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----------------------\n\n### Learn 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\n### Using 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-------------\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-----\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------------------------------------\n\nTo use Compose for TV, include Jetpack Compose toolkit\ndependencies in your app's `build.gradle` file as follows: \n\n### Kotlin\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\n### Groovy\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----------------\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\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---------------\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)"]]
