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 precisão 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.
Esta lição descreve os requisitos mínimos e os detalhes de implementação para a criação de layouts eficazes em apps para TV.
Leia também Projetar para Android 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 previstas para execução em um dispositivo de TV. Esta seção explica os temas a serem usados.
Tema Leanback
A biblioteca Leanback androidx inclui Theme.Leanback, um tema para atividades de TV que fornece um estilo visual consistente. Recomendamos o uso desse tema em qualquer app de TV criado com as classes leanback androidx. Veja na amostra de código a seguir 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 de interface do usuário padrão para apps Android em smartphones e tablets, mas não é adequada a apps para TV. Se você não está usando as classes leanback androidx, aplique esse tema às atividades para TV e suprima a exibição da barra de título. O exemplo de código de um manifesto de app para TV a seguir demonstra como aplicar o 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>
Criação de layouts básicos para TV
Layouts para dispositivos de TV precisam seguir algumas orientações básicas para garantir a usabilidade e a eficácia em telas grandes. Siga estas dicas para construir layouts em paisagem 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 deixe o espaço vertical para o conteúdo.
- Crie IUs divididas em seções usando Fragments e use grupos de visualização como
GridView, em vez deListView, para usar melhor o espaço horizontal da tela. - Use grupos de visualização como
RelativeLayoutouLinearLayoutpara organizar as visualizações. Essa abordagem permite que o sistema ajuste a posição das visualizações quanto a 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 algumas exigências únicas devido à evolução dos padrões de TV e à vontade de apresentar sempre uma imagem em tela cheia para o usuário. Por isso, os dispositivos de TV podem cortar a margem externa de um layout de app de TV para garantir que todo o visor seja preenchido. Geralmente, esse comportamento é chamado de overscan.
Os elementos da tela que precisam ficar visíveis para o usuário em todos os momentos têm que ser posicionados dentro da área segura de overscan. Para garantir que os elementos da tela presentes em um layout fiquem dentro da área segura de overscan, é necessário adicionar uma margem de 5% de 48dp às bordas esquerda e direita e de 27dp às margens superior e inferior do layout.
Os elementos da tela em plano de fundo com os quais o usuário não interage diretamente não precisam ser ajustados ou cortados na área segura de overscan. Essa abordagem garante que os elementos de plano de fundo tenham a aparência correta em todas as telas.
O exemplo a seguir mostra um layout raiz que pode conter elementos de plano de fundo, além de um layout filho aninhado com uma margem de 5% e com 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 estiver usando as classes leanback androidx, como BrowseFragment ou widgets relacionados, uma vez que esses layouts já têm margens de segurança de overscan incorporadas.
Construir controles e textos usáveis
Os textos e os controles em um layout de aplicativo de TV precisam ser facilmente visíveis e navegáveis à distância. Siga estas dicas para tornar os elementos da interface do usuário 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 fontes 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"/> - Certifique-se de que todos os seus widgets de exibição sejam amplos o suficiente para serem vistos por alguém sentado a 3 metros de distância da tela (essa distância é maior para telas muito grandes). A melhor forma de fazer isso é usar o dimensionamento relacionado a layout em vez do dimensionamento absoluto e unidades de pixel independente de densidade (dip) em vez de unidades absolutas. Por exemplo, para definir a largura de um widget, use
wrap_contentem vez da medição de pixels e, para definir a margem para um widget, use valores dip em vez de px.
Para mais informações sobre pixels independentes de densidade e criação de layouts para telas maiores, consulte Compatibilidade com várias telas.
Gerenciar recursos de layout para TV
As resoluções de visores de TVs de alta definição comuns são 720 p, 1080 i e 1080 p. O layout da TV precisa ser direcionado a uma tela com 1920 x 1080 pixels e permitir que o sistema Android reduza o tamanho dos elementos do layout para 720 p, se necessário. Em geral, a redução da escala (remoção de pixels) não diminui a qualidade da apresentação do layout. No entanto, o aumento da escala pode causar a exibição de artefatos que diminuem a qualidade do layout e têm um impacto negativo na experiência do usuário no app.
Para ter os melhores resultados de imagem, se possível, ofereça-as como elementos de imagem 9-patch. Ao oferecer imagens de baixa qualidade ou pequenas nos layouts, elas aparecerão pixelizadas, distorcidas ou granuladas, o que não é uma boa experiência para o usuário. Em vez disso, use imagens de alta qualidade.
Para ver mais informações sobre a otimização de layouts e recursos para telas grandes, consulte Projetar para várias telas.
Evitar antipadrões de layout
Existem algumas abordagens para a construção de layout a serem evitadas porque não funcionam bem em dispositivos de TV e causam uma experiência ruim ao usuário. Veja algumas abordagens para interfaces do usuário que especificamente não precisam ser usadas 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. 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.
- ActionBar: apesar de essa convenção de interface do usuário ser recomendada para uso em smartphones e tablets, ela não é adequada para uma interface de TV. Em particular, o uso de um menu de opções da barra de ação (ou qualquer menu suspenso) é altamente desencorajado devido à dificuldade de navegar por um menu assim com um controle remoto.
- ViewPager: deslizar entre telas pode funcionar perfeitamente em um smartphone ou tablet, mas não tente isso em uma TV!
Para mais informações sobre como projetar layouts adequados para TV, consulte o guia Projetar para TV.
Processar bitmaps grandes
Dispositivos de TV, como qualquer outro dispositivo Android, têm uma quantidade limitada de memória. Se o layout do app for criado com imagens com resoluções muito altas ou usar muitas imagens de alta resolução na operação do app, ele poderá rapidamente atingir os limites da memória e causar erros de falta de memória. Na maioria dos casos, recomendamos que você use a biblioteca Glide para buscar, decodificar e exibir bitmaps no seu app. Para mais informações sobre como conseguir 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 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. Os anúncios não precisam tentar abrir um navegador nem direcionar para conteúdo do Google Play Store não aprovado para dispositivos do Android TV.
Observação: você pode usar a classe WebView para fazer login em serviços de mídia social.