Usar o Jetpack Compose no Android TV

O Compose para TV é nossa abordagem recomendada para criar interfaces do usuário do Android TV. Ela desbloqueia todos os benefícios do Jetpack Compose do Android para apps de TV, facilitando a criação de IUs bonitas e funcionais. Alguns benefícios específicos de usar o Compose para TV são:

  • Flexibilidade: o Compose pode ser usado para criar qualquer tipo de interface, de layouts simples a animações complexas. Os componentes funcionam imediatamente, mas também podem ser personalizados e estilizados para atender às necessidades do seu app.
  • Desenvolvimento simplificado e acelerado: o Compose é compatível com códigos existentes e permite que os desenvolvedores criem apps de forma mais eficiente com menos código.
  • Intuitivo: o Compose usa uma sintaxe declarativa que permite fazer mudanças na interface, depurar, entender e revisar o código.

Se você não sabe usar o kit de ferramentas do Jetpack Compose, confira o Programa de treinamentos do Compose. Muitos dos princípios de desenvolvimento do Compose para dispositivos móveis também se aplicam à TV. Consulte Por que o Compose para mais informações sobre as vantagens gerais de usar um framework de interface declarativa. Para saber mais, consulte também o repositório de exemplos do Compose para TV no GitHub (em inglês).

Compatibilidade

O Compose para TV funciona em Android TVs com o nível 21 da API ou mais recente. O uso da versão 1.0 do Compose para TV requer a versão 1.3.0 das bibliotecas androidx.compose e o Kotlin 1.7.10.

Configurar

O uso do Jetpack Compose no Android TV é semelhante ao uso do Jetpack Compose para qualquer outro projeto Android. A principal diferença é que o Compose para TV adiciona bibliotecas que oferecem componentes otimizados para a TV e facilitam a criação de interfaces do usuário personalizadas. Em alguns casos, esses componentes compartilham o mesmo nome que os outros que não são da TV, como androidx.tv.material3.Button e androidx.compose.material3.Button.

Dependências do kit de ferramentas do Jetpack Compose

Para usar o Compose para TV, é necessário incluir as dependências do kit de ferramentas do Jetpack Compose no arquivo build.gradle do app da seguinte maneira:

Kotlin

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")
}

Groovy

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

Diferenças

Use a versão de TV das APIs sempre que possível. Embora seja tecnicamente possível usar a versão para dispositivos móveis do Compose Material, ele não é otimizado para o estilo exclusivo de interações no Android TV. Além disso, misturar o Compose Material com o Compose Material do Compose para TV pode resultar em um comportamento inesperado. Por exemplo, como cada biblioteca tem o próprio objeto MaterialTheme, é possível que cores, tipografia ou formas sejam inconsistentes se as duas versões forem usadas.

A tabela a seguir descreve as diferenças de dependência entre TV e dispositivos móveis:

Dependência de TV
(androidx.tv.*)
Comparação Dependência de dispositivos móveis
(androidx.compose.*)
androidx.tv:tv-material (link em inglês) em vez de androidx.compose.material3:material3
androidx.tv:tv-foundation (link em inglês) além de androidx.compose.foundation:foundation

Leia mais

Explore estes guias para saber como criar ótimas experiências otimizadas para TV em: