Criar layouts para TV

Normalmente, a tela de uma TV é vista a aproximadamente três metros de distância e, embora seja muito maior do que a maioria das outras telas de dispositivos Android, uma tela de TV não oferece o mesmo nível de detalhe e cor que uma tela de dispositivo menor. Esses fatores exigem que você crie layouts de apps pensando em dispositivos de TV para criar uma experiência do usuário útil e agradável.

Este guia descreve os requisitos mínimos e os detalhes de implementação para criar layouts eficazes para apps para TV.

Para mais informações, leia Como projetar para TV.

Usar temas de layouts para TV

Os temas do Android podem oferecer uma base para layouts de apps para TV. Use um tema para modificar a exibição das atividades do app que precisam ser executadas em um dispositivo de TV. Esta seção explica quais temas usar.

Tema Leanback

A biblioteca Leanback androidx inclui Theme.Leanback, um tema para atividades de TV que fornece um estilo visual consistente. Recomendamos que você use esse tema para qualquer app para TV criado com as classes Leanback Leanback. O exemplo de código a seguir mostra como aplicar esse tema a uma atividade:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

Tema NoTitleBar

A barra de título é um elemento padrão da interface do usuário para apps Android em smartphones e tablets, mas não é adequada para apps de TV. Se você não estiver usando classes do AndroidX Leanback, aplique o tema NoTitleBar às suas atividades de TV para suprimir a exibição de uma barra de título. O exemplo de código de um manifesto de app para TV a seguir demonstra como aplicar esse tema para remover a exibição de uma barra de título:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

Temas AppCompat

Em apps para dispositivos móveis Android, é muito comum usar AppCompatActivity com um dos temas Theme.AppCompat. Essa combinação permite usar recursos como a tonalidade de drawable sem se preocupar com a versão do Android em execução no dispositivo. Se você estiver desenvolvendo um app que só é executado no Android TV, não é necessário usar AppCompatActivity, porque os recursos ativados já estão disponíveis no Android TV ou não são relevantes.

Se você estiver criando um app com uma base de código compartilhada entre o Android para dispositivos móveis e o Android TV, poderá se deparar com alguns desafios devido aos temas. AppCompatActivity e os vários widgets AppCompat exigem que você use Theme.AppCompat, enquanto os fragmentos Leanback esperam que você use FragmentActivity e Theme.Leanback.

Se você precisar usar a mesma atividade base para dispositivos móveis Android e o Android TV, ou se quiser usar visualizações personalizadas com base em widgets AppCompat, como AppCompatImageView, use os temas Theme.AppCompat.Leanback. Esses temas oferecem todos os temas de AppCompat e também fornecem os valores específicos do Leanback.

Você pode personalizar temas Theme.AppCompat.Leanback da mesma forma que faz com qualquer outro tema. Por exemplo, se você quiser mudar valores específicos para OnboardingSupportFragment do Leanback, faça algo semelhante ao seguinte:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Criação de layouts básicos para TV

Os layouts para dispositivos de TV precisam seguir algumas diretrizes básicas para garantir a usabilidade e a eficácia em telas grandes. Siga estas dicas para criar layouts otimizados para telas de TV:

  • Construa layouts com orientação de paisagem. Telas de TV sempre exibem no modo paisagem.
  • Coloque controles de navegação no lado esquerdo ou direito da tela e reserve o espaço vertical para o conteúdo.
  • Use fragmentos para criar IUs divididas em seções. Use grupos de visualizações como GridView em vez de ListView para usar melhor o espaço horizontal da tela.
  • Use grupos de visualizações, como RelativeLayout ou LinearLayout, para organizar as visualizações. Essa abordagem permite que o sistema ajuste a posição das visualizações de acordo com tamanho, alinhamento, proporção e densidade de pixels de uma tela de TV.
  • Adicione margens suficientes entre controles de layout para evitar uma interface do usuário aglomerada.

Overscan

Layouts para TV têm alguns requisitos exclusivos devido à evolução dos padrões de TV e à vontade de apresentar sempre uma imagem em tela cheia para os espectadores. Por esse motivo, os dispositivos de TV podem cortar a borda externa de um layout de app para garantir que toda a tela seja preenchida. Geralmente, esse comportamento é chamado de overscan.

Posicione os elementos da tela que precisam estar sempre visíveis para o usuário na área segura de overscan. Adicionar uma margem de 5% de 48 dp às bordas esquerda e direita e de 27 dp nas bordas superior e inferior a um layout ajuda a garantir que os elementos da tela no layout estejam dentro da área segura de overscan.

Não ajuste os elementos da tela de fundo com que o usuário não interage diretamente nem os corte na área segura de overscan. Essa abordagem ajuda a garantir que os elementos da tela de segundo plano estejam corretos em todas as telas.

O exemplo abaixo mostra um layout raiz que pode conter elementos de segundo plano e um layout filho aninhado com margem de 5% e que pode conter elementos na área segura de overscan:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >

   <!-- Screen elements that can render outside the overscan safe area go here -->

   <!-- Nested RelativeLayout with overscan-safe margin -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan safe area go here -->

   </RelativeLayout>
</RelativeLayout>

Cuidado:não aplique margens de overscan ao layout se você estiver usando as classes do AndroidX Leanback, como BrowseFragment ou widgets relacionados, porque esses layouts já têm margens de segurança de overscan incorporadas.

Criar controles e textos utilizáveis

Siga estas dicas para tornar o texto e os controles do app de TV mais fáceis de ver à distância:

  • Quebre o texto em pequenas partes que os usuários possam visualizá-los rapidamente.
  • Use textos claros em fundo escuro. Esse estilo é mais fácil de ver em uma TV.
  • Evite fontes leves ou com traços muito estreitos ou muito largos. Use fontes sans-serif simples e suavizamento para aumentar a legibilidade.
  • Use tamanhos de fonte padrão do Android:
    <TextView
          android:id="@+id/atext"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:singleLine="true"
          android:textAppearance="?android:attr/textAppearanceMedium"/>
    
  • Deixe todos os widgets de visualização grandes o suficiente para serem claramente visíveis para alguém sentado a 3 metros de distância da tela. A melhor maneira de fazer isso é usando o dimensionamento relativo a layout em vez do dimensionamento absoluto e unidades de pixel independente de densidade (dp) em vez de unidades absolutas. Por exemplo, para definir a largura de um widget, use wrap_content em vez da medida de pixels e, para definir a margem de um widget, use valores dp em vez de valores px.

Para saber mais sobre pixels independentes de densidade e criar layouts para lidar com telas maiores, consulte Visão geral da compatibilidade da tela.

Gerenciar recursos de layout para TV

Como todos os outros dispositivos Android, as TVs têm diferentes tamanhos de tela e oferecem suporte a diferentes resoluções, incluindo, mas não se limitando a, 720p, 1080p e 4K. Verifique se o app oferece suporte a diferentes tamanhos de tela.

Diferentes tamanhos e resoluções de tela têm diferentes densidades de pixel. Para preservar a aparência da interface em diferentes tamanhos, resoluções e densidades de tela, defina as medições da interface usando pixels de densidade independente (dp, na sigla em inglês) em vez de pixels. A densidade de pixels da tela para diferentes resoluções de painel de TV está descrita abaixo.

Resolução do painel Densidade de pixels da tela
720p tvdpi
1080 xhdpi
4K xxxhdpi
Consulte Suporte a densidades de pixel diferentes para mais informações.

Para saber mais sobre a otimização de layouts e recursos para telas grandes, consulte Visão geral de compatibilidade de tela.

Padrões de layout a serem evitados

Existem algumas abordagens para criar layouts que não funcionam bem em dispositivos de TV. Veja algumas abordagens de interface do usuário que precisam ser evitadas ao desenvolver um layout para TV.

  • Reutilização de layouts de smartphone ou tablet: não reutilize um app para smartphone ou tablet sem modificações. Os layouts criados para outros formatos de dispositivos Android não são adequados para dispositivos de TV e precisam ser simplificados para a operação.
  • Usar ActionBar: embora as barras de ação sejam recomendadas para uso em smartphones e tablets, elas não são adequadas para uma interface de TV. O uso de um menu de opções da barra de ações ou qualquer menu suspenso não é recomendado para apps de TV, devido à dificuldade de navegar por esse menu com um controle remoto.
  • Usar ViewPager:deslizar entre telas pode funcionar muito bem em um smartphone ou tablet, mas não tente fazer isso em uma TV.

Para saber mais sobre como projetar layouts adequados para TV, consulte o guia Design para TV.

Processar bitmaps grandes

Dispositivos de TV, assim como outros dispositivos Android, têm uma quantidade limitada de memória. Se você criar o layout do app com imagens de alta resolução ou usar muitas imagens de alta resolução na operação, ele poderá rapidamente atingir os limites da memória e causar erros de falta de memória. Na maioria dos casos, recomendamos usar a biblioteca Glide para buscar, decodificar e mostrar bitmaps no seu app. Para saber mais sobre como ter o melhor desempenho ao trabalhar com bitmaps, consulte nossas Práticas recomendadas de gráficos para Android.

Oferecer propaganda eficaz

Para o ambiente da sala de estar, recomendamos usar soluções de anúncios em vídeo que sejam exibidas em tela cheia e possam ser dispensadas em até 30 segundos. A funcionalidade para publicidade no Android TV, como botões de dispensar e cliques, precisa ser acessível usando o botão direcional em vez de toque.

O Android TV não oferece um navegador da Web. Seus anúncios não podem tentar abrir um navegador da Web ou redirecionar para conteúdo da Google Play Store não aprovado para dispositivos Android TV.

Observação:você pode usar a classe WebView para fazer login em serviços de mídias sociais.