Cómo usar Jetpack Compose en Android TV

Compose para TV es nuestro enfoque recomendado para compilar interfaces de usuario de Android TV. Desbloquea todos los beneficios de Jetpack Compose de Android para tus apps para TV, lo que facilita mucho la compilación de IUs atractivas y funcionales para tu app. Algunos beneficios específicos de usar Compose para TV son los siguientes:

• Flexibilidad: Compose se puede usar para crear cualquier tipo de IU, desde diseños simples hasta animaciones complejas. Los componentes funcionan de inmediato, pero también se pueden personalizar y adaptar a las necesidades de tu app.
• Desarrollo simplificado y acelerado: Compose es compatible con el código existente y permite a los desarrolladores compilar apps de manera más eficiente con menos código.
• Intuitivo: Compose usa una sintaxis declarativa que te permite realizar cambios en la IU, depurar, comprender y revisar el código.

Si nunca usaste el kit de herramientas de Jetpack Compose, consulta la ruta de aprendizaje de Compose. Muchos de los principios de desarrollo de Compose para dispositivos móviles también se aplican a la TV. Consulta Por qué Compose para obtener más información sobre las ventajas generales de un framework de IU declarativo. Si deseas obtener más información, también consulta el repositorio de muestras de Compose para TV en GitHub.

Compatibilidad

Compose para TV funciona en Android TV con nivel de API 21 o versiones posteriores. El uso de la versión 1.0 de Compose para TV requiere la versión 1.3.0 de las bibliotecas androidx.compose y Kotlin 1.7.10.

Configuración

El uso de Jetpack Compose en Android TV es similar a usar Jetpack Compose para cualquier otro proyecto de Android. La principal diferencia es que Compose para TV agrega bibliotecas que ofrecen componentes optimizados para TV y facilitan la creación de interfaces de usuario personalizadas para TV. En algunos casos, esos componentes comparten el mismo nombre que aquellos que no son de TV, como androidx.tv.material3.Button y androidx.compose.material3.Button.

Dependencias del kit de herramientas de Jetpack Compose

Si deseas usar Compose para TV, debes incluir las dependencias del kit de herramientas de Jetpack Compose en el archivo build.gradle de tu app de la siguiente manera:

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

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

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

   // Compose for TV dependencies
   val tvCompose = "1.0.0-alpha10"
   implementation("androidx.tv:tv-foundation:$tvCompose")
   implementation("androidx.tv:tv-material:$tvCompose")
}

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

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

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

   // Compose for TV dependencies
   def tvCompose = '1.0.0-alpha10'
   implementation 'androidx.tv:tv-foundation:$tvCompose'
   implementation 'androidx.tv:tv-material:$tvCompose'
}

¿Qué cambió?

Usa la versión para TV de las APIs siempre que sea posible. Si bien es técnicamente posible usar la versión de Compose Material para dispositivos móviles, no está optimizada para el estilo único de interacciones en Android TV. Además, combinar Compose Material con Compose Material a partir de Compose para TV puede generar un comportamiento inesperado. Por ejemplo, como cada biblioteca tiene su propio objeto MaterialTheme, existe la posibilidad de que los colores, la tipografía o las formas sean inconsistentes si se usan ambas versiones.

En la siguiente tabla, se describen las diferencias de dependencia entre la TV y los dispositivos móviles:

Lecturas adicionales

Explora estas guías para aprender a crear excelentes experiencias optimizadas para TV:

• Pantalla de navegación por catálogos
• Pantalla de detalles