Criar layouts para TV

Normalmente, uma tela de TV é vista aproximadamente a três metros de distância e, apesar de ser maior do que a maioria dos visores de dispositivos Android, ela não oferece o mesmo nível de detalhes e cores de um dispositivo menor. Esses fatores exigem a criação de layouts de apps que considerem dispositivos de TV para poder criar uma experiência útil e agradável ao usuário na sala de estar.

Princípios básicos de layout

Os layouts para dispositivos de TV precisam seguir algumas diretrizes básicas para garantir que sejam utilizáveis e eficazes em telas grandes. Siga estas dicas para criar layouts otimizados para telas de TV:

  • Construa layouts com orientação de paisagem. As telas de TV sempre são exibidas no modo paisagem.
  • Coloque controles de navegação no lado esquerdo ou direito da tela e deixe o espaço vertical para o conteúdo.
  • Use dimensionamento responsivo e relativo (como unidades dp e sp) para que as interfaces do usuário sejam dimensionadas de maneira limpa em diferentes resoluções de tela.
  • Adicione margens e preenchimento suficientes entre os controles de layout para evitar uma interface do usuário aglomerada.

Overscan

Os layouts para TV têm alguns requisitos exclusivos devido à evolução dos padrões de TV para apresentar uma imagem em tela cheia aos 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 ficar visíveis para o usuário em todos os momentos dentro da área segura de overscan. Adicionar uma margem de 5% de 48 dp às bordas esquerda e direita e de 27 dp às margens superior e inferior de 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 em plano de fundo com os quais o usuário não interage diretamente e não corte os elementos na área segura de overscan. Essa abordagem ajuda a garantir que os elementos da tela em plano de fundo pareçam corretos em todas as telas.

Criar texto e controles utilizáveis

Siga estas dicas para facilitar a visualização do texto e dos controles no app de TV à 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 que tenham traços muito estreitos e muito largos. Use fontes sem serifa e suavização para aumentar a legibilidade.
  • Deixe todos os widgets de visualização grandes o suficiente para serem claramente visíveis para alguém sentado a três metros da tela. Use unidades de pixel independente de densidade (dp) em vez de unidades de pixel absolutas e unidades de pixel escalonáveis (sp) para tipografia.

Para mais informações sobre pixels independentes de densidade e criação de layouts para telas maiores, consulte Visão geral de compatibilidade de tela.

Gerenciar recursos de layout para TV

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

Tamanhos e resoluções de tela diferentes têm densidades de pixel diferentes. Para preservar a aparência da interface do usuário em tamanhos de tela, resoluções e densidades de pixel, defina as medidas da interface do usuário usando pixels independentes de densidade (dp). A densidade de pixel da tela para diferentes resoluções de painel de TV é descrita na tabela a seguir:

Resolução do painel Densidade de pixel da tela
720p tvdpi
1080p xhdpi
4K xxxhdpi

Consulte Suporte a densidades de pixel diferentes e a Visão geral de compatibilidade de tela para mais informações.

Padrões de layout a serem evitados

Há algumas abordagens para criar layouts que não funcionam bem em dispositivos de TV. Evite os seguintes padrões de interface do usuário ao desenvolver um layout para TV:

  • Reutilização de layouts de smartphones ou tablets: não reutilize layouts de um app para smartphones ou tablets sem modificação. Layouts criados para outros fatores de formato de dispositivos Android não são adequados para dispositivos de TV e precisam ser simplificados para a operação em uma TV.
  • Uso de barras de ação ou menus de smartphones: as barras de ação e os menus suspensos não são adequados para uma interface de TV devido à dificuldade de navegar por esses menus com um controle remoto.
  • Uso de navegação apenas por deslizamento: deslizar entre telas pode funcionar perfeitamente em um smartphone ou tablet, mas não tente gestos de deslizar em uma TV em que os usuários dependem de um controle remoto D-pad.

Para mais informações sobre como projetar layouts adequados para TV, consulte Projetar para TV.

Processar bitmaps grandes

Os dispositivos de TV têm memória limitada. Se o layout do app usar imagens com resoluções muito altas, ele poderá rapidamente atingir os limites da memória e causar erros de falta de memória. Use bibliotecas eficientes de carregamento e decodificação de imagens (como Coil ou Glide) para buscar, decodificar e exibir bitmaps no app.

Para mais informações sobre como conseguir o melhor desempenho ao trabalhar com bitmaps, consulte Práticas recomendadas de gráficos para Android.

Oferecer propaganda eficaz

Para o ambiente da sala de estar, recomendamos usar soluções de propaganda de vídeo exibidas em tela cheia e descartáveis em 30 segundos. A funcionalidade para propaganda no Android TV, como botões de descarte e cliques, precisa ser acessível usando o D-pad em vez do toque.

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