تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
Compose for TV هي الطريقة الحديثة لإنشاء واجهات مستخدم لتطبيقات Android TV. تتيح لك Compose for TV الاستفادة من جميع مزايا Jetpack Compose على Android لتطبيقاتك على التلفزيون، ما يسهّل عليك إنشاء واجهات مستخدم جذابة وعملية لتطبيقك.
في ما يلي بعض المزايا المحدّدة لاستخدام Compose for TV:
المرونة: يمكن استخدام Compose لإنشاء أي نوع من واجهات المستخدم، بدءًا من التصاميم البسيطة إلى الرسوم المتحركة المعقّدة. تعمل المكوّنات فورًا، ولكن يمكن أيضًا تخصيصها وتصميمها لتناسب احتياجات تطبيقك.
تطوير مبسّط وأسرع: تتوافق Compose مع الرموز البرمجية الحالية، وتتيح للمطوّرين إنشاء التطبيقات بشكل أكثر فعالية باستخدام رموز برمجية أقل.
سهولة الاستخدام: تستخدم Compose بنية تعريفية تتيح لك إجراء تغييرات على واجهة المستخدم وتصحيح الأخطاء وفهم الرمز البرمجي ومراجعته.
إذا لم تكن معتادًا على استخدام مجموعة أدوات Jetpack Compose، يمكنك الاطّلاع على
مسار Compose التعليمي. وينطبق العديد من مبادئ تطوير تطبيقات Compose للأجهزة الجوّالة على تطبيقات التلفزيون أيضًا. يمكنك الاطّلاع على مزايا Compose للحصول على مزيد من المعلومات حول المزايا العامة لإطار عمل واجهة المستخدم التعريفية. لمزيد من المعلومات، يمكنك أيضًا الاطّلاع على مستودع نماذج Compose for TV على GitHub.
auto_awesome طلب الذكاء الاصطناعي
كيفية إضافة دعم لأجهزة Android TV
يطلب هذا الطلب إرشادات حول إضافة توافق تطبيقك مع Android TV باستخدام Jetpack Compose for TV بدلاً من 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.
استخدام الطلبات الموجَّهة إلى الذكاء الاصطناعي
تم تصميم طلبات الذكاء الاصطناعي لاستخدامها في "Gemini في استوديو Android".
تعمل Compose for TV على أجهزة Android TV التي تعمل بنظام Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) أو الإصدارات الأحدث.
يتطلّب استخدام الإصدار 1.0 من Compose for TV الإصدار 1.3.0 من مكتبات androidx.compose وKotlin 1.7.10.
الإعداد
إنّ استخدام Jetpack Compose على Android TV يشبه استخدام Jetpack Compose لأي مشروع Android آخر. يتمثّل الاختلاف الرئيسي في أنّ Compose for TV
تضيف مكتبات توفّر مكوّنات محسّنة للتلفزيون وتسهّل إنشاء
واجهات مستخدم مخصّصة للتلفزيون. في بعض الحالات، تتشارك هذه المكوّنات الاسم نفسه مع نظيراتها غير التلفزيونية، مثل androidx.tv.material3.Button وandroidx.compose.material3.Button.
تبعيات مجموعة أدوات Jetpack Compose
لاستخدام Compose for TV، عليك تضمين تبعيات مجموعة أدوات Jetpack Compose في ملف build.gradle الخاص بتطبيقك على النحو التالي:
Kotlin
dependencies{valcomposeBom=platform("androidx.compose:compose-bom:2025.05.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.05.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'}
الاختلافات
تم تصميم مكونات مواد العرض على التلفزيون لتناسب غرف المعيشة، وهي تتضمّن مؤشرات تركيز واضحة وسلوك إدخال مناسبًا لأجهزة التحكّم عن بُعد. للحصول على تفاصيل حول كيفية استخدام هذه المكوّنات المحدّدة، يُرجى الاطّلاع على أدلّة تصميم واجهة المستخدم على التلفزيون.
الشكل 1. مكوّنات نموذجية من مكتبة المواد الخاصة بالتلفزيون
استخدِم إصدار Android TV من واجهات برمجة التطبيقات متى أمكن ذلك للاستفادة من هذه الميزات.
مع أنّه من الممكن تقنيًا استخدام إصدار Compose Material للأجهزة الجوّالة،
إلا أنّه غير محسَّن لأسلوب التفاعل الفريد على Android TV. بالإضافة إلى ذلك، قد يؤدي دمج Compose Material مع Compose Material من Compose for TV إلى حدوث سلوك غير متوقّع. على سبيل المثال،
بما أنّ كل مكتبة تحتوي على عنصر MaterialTheme خاص بها، من المحتمل أن تكون الألوان أو الخطوط أو الأشكال غير متسقة إذا تم استخدام كلا الإصدارين.
يوضّح الجدول التالي الاختلافات في التبعية بين التلفزيون والأجهزة الجوّالة:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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)"]]
