Jetpack Compose auf Android TV verwenden

Compose for TV ist der moderne Ansatz für die Erstellung von Android TV-Benutzeroberflächen. Mit Compose for TV können Sie alle Vorteile von Jetpack Compose von Android für Ihre TV-Apps nutzen. Das Erstellen ansprechender und funktionaler Benutzeroberflächen für Ihre App ist dadurch viel einfacher.

Compose for TV bietet unter anderem folgende Vorteile:

  • Flexibilität: Mit Compose können Sie jede Art von Benutzeroberfläche erstellen, von einfachen Layouts bis hin zu komplexen Animationen. Die Komponenten sind sofort einsatzbereit, können aber auch an die Anforderungen Ihrer App angepasst und gestaltet werden.
  • Vereinfachte und beschleunigte Entwicklung: Compose ist mit vorhandenem Code kompatibel und ermöglicht Entwicklern, Apps mit weniger Code effizienter zu erstellen.
  • Intuitiv: Compose verwendet eine deklarative Syntax, mit der Sie Änderungen an Ihrer Benutzeroberfläche vornehmen, Ihren Code debuggen, verstehen und überprüfen können.

Wenn Sie mit dem Jetpack Compose-Toolkit nicht vertraut sind, sehen Sie sich den Compose-Lernpfad an. Viele der Entwicklungsprinzipien für Compose auf Mobilgeräten gelten auch für Fernseher. Weitere Informationen zu den allgemeinen Vorteilen eines deklarativen UI-Frameworks finden Sie unter Warum Compose?. Weitere Informationen finden Sie im Repository mit Compose for TV-Beispielen auf GitHub.

Kompatibilität

„Für TV erstellen“ funktioniert auf Android-Fernsehern mit Android 5.0 (API-Level 21) oder höher. Für die Verwendung von Version 1.0 von Compose for TV sind Version 1.3.0 der androidx.compose-Bibliotheken und Kotlin 1.7.10 erforderlich.

Einrichten

Die Verwendung von Jetpack Compose auf Android TV ähnelt der Verwendung von Jetpack Compose für jedes andere Android-Projekt. Der Hauptunterschied besteht darin, dass Compose for TV Bibliotheken mit für Fernseher optimierten Komponenten hinzufügt und das Erstellen von für Fernseher optimierten Benutzeroberflächen erleichtert. In einigen Fällen haben diese Komponenten denselben Namen wie ihre Pendants, die nicht für Fernseher gedacht sind, z. B. androidx.tv.material3.Button und androidx.compose.material3.Button.

Abhängigkeiten des Jetpack Compose-Toolkits

Wenn Sie Compose for TV verwenden möchten, fügen Sie der Datei build.gradle Ihrer App die Abhängigkeiten des Jetpack Compose-Toolkits folgendermaßen hinzu:

Kotlin

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

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

   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 {
   def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
   implementation composeBom

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

   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'
}

Unterschiede

Die Komponenten für TV-Material sind für das Wohnzimmer konzipiert, mit eindeutigen Fokusindikatoren und eingabenfreundlichem Verhalten. Weitere Informationen zur Verwendung dieser speziellen Komponenten finden Sie in den Designleitfäden für TV-UIs.

Abbildung 1: Beispielkomponenten aus der TV-Materialbibliothek

Verwenden Sie nach Möglichkeit die TV-Version der APIs, um von diesen Funktionen zu profitieren.

Es ist zwar technisch möglich, die mobile Version von „Material verfassen“ zu verwenden, sie ist aber nicht für den besonderen Interaktionsstil von Android TV optimiert. Außerdem kann die Kombination von Compose-Material mit Compose-Material aus Compose for TV zu unerwartetem Verhalten führen. Da jede Bibliothek ein eigenes MaterialTheme-Objekt hat, kann es beispielsweise zu Inkonsistenzen bei Farben, Typografie oder Formen kommen, wenn beide Versionen verwendet werden.

In der folgenden Tabelle werden die Unterschiede bei Abhängigkeiten zwischen TV und Mobilgeräten beschrieben:

TV-Abhängigkeit
(androidx.tv.*)
Vergleich Mobile Abhängigkeit
(androidx.compose.*)
androidx.tv:tv-material anstelle von androidx.compose.material3:material3

Weitere Informationen

  • TV-Designleitfäden
    Eine Übersicht über dedizierte TV-Komponenten zum Erstellen von Benutzeroberflächen mit Links zu relevanten Entwicklerressourcen.

  • Material Catalog-Beispiel für Fernseher
    Eine Katalog-App, die zeigt, wie die Prinzipien von Material Design mit Compose for TV implementiert werden.

  • JetStream-Beispiel
    Eine Medienstreaming-App, die die Verwendung von TV Compose mit einer typischen Material App und einer realen Architektur veranschaulicht.

  • Einführung in Compose for TV
    In diesem Codelab wird Schritt für Schritt gezeigt, wie Sie eine Videoplayer-App mit einem Katalog-Browser-Bildschirm und einem Detailbildschirm erstellen.

Weitere Informationen

In diesen Leitfäden erfahren Sie, wie Sie für folgende Geräte eine optimale Nutzererfahrung auf dem Fernseher schaffen: