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 uma tela de 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.
Usar temas de layouts para TV
Os temas do Android podem fornecer uma base para layouts nos apps de TV. Use um tema para modificar a exibição das atividades do app que estão previstas para execução em um dispositivo de TV. Esta seção explica quais temas usar.
Tema Leanback
A biblioteca androidx.leanback descontinuada inclui Theme.Leanback,
um tema para atividades de TV que oferece um estilo visual consistente para apps do kit de ferramentas de interface do Leanback. Use esse tema em qualquer app de TV criado com as classes AndroidX Leanback. 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 AndroidX Leanback, aplique o
NoTitleBar tema às atividades para TV e suprima a exibição da barra de título. O exemplo de código a seguir
de um manifesto de app para TV demonstra como aplicar este 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 do AppCompat
Em apps Android para dispositivos móveis, é muito comum usar
AppCompatActivity
com um dos temas Theme.AppCompat. Essa combinação permite usar recursos
como a coloração de elementos drawable sem se preocupar com a versão do Android em execução no dispositivo. Se você
estiver desenvolvendo um app que é executado apenas no Android TV, não use
AppCompatActivity, porque os recursos que ele ativa 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á encontrar
alguns desafios devido à aplicação de temas. AppCompatActivity e os vários
widgets AppCompat exigem o uso de Theme.AppCompat, enquanto os
fragmentos do kit de ferramentas de interface do Leanback esperam que você use
FragmentActivity
e Theme.Leanback.
Se você precisar usar a mesma atividade de base para o Android para dispositivos móveis e o Android TV ou quiser usar
visualizações personalizadas com base em AppCompat widgets como
AppCompatImageView,
use os temas Theme.AppCompat.Leanback. Esses temas oferecem toda a aplicação de temas
do AppCompat e também fornecem os valores específicos do Leanback.
Você pode personalizar os temas Theme.AppCompat.Leanback da mesma forma que faz com qualquer outro
tema. Por exemplo, se você quiser mudar valores específicos do
kit de ferramentas de interface do Leanback
OnboardingSupportFragment,
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
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 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 deixe o espaço vertical para o conteúdo.
- Crie interfaces do usuário divididas em seções usando fragmentos. Use grupos de visualização como
GridViewem vez deListViewpara 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 para apresentar 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 para garantir que todo o visor seja preenchido. 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 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 48 dp às bordas esquerda e direita e de 27 dp às margens superior e inferior do layout.
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 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
AndroidX Leanback, como
BrowseSupportFragment
ou widgets relacionados, uma vez que esses layouts já têm margens de segurança de overscan incorporadas.
Criar controles e textos usá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 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"/>
- Deixe todos os widgets de visualização grandes o suficiente para serem vistos por alguém
sentado a 3 metros de distância da tela. A melhor forma de fazer isso é usar o dimensionamento relacionado 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_contentem vez da medição de pixels e, para definir a margem para um widget, use valores dp em vez de px.
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, entre outras, 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ção e densidades de pixel, defina as medições da interface usando pixels de densidade independente (dp) em vez de pixels. A densidade de pixels da tela para diferentes resoluções de painel de TV é descrita abaixo.
| Resolução do painel | Densidade de pixels da tela |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Para mais informações 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 a construção de layout que não funcionam bem em dispositivos de TV. Confira algumas abordagens de interface do usuário a serem evitadas 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
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ção ou qualquer menu suspenso é altamente desencorajado para apps de TV devido à dificuldade de navegar por um menu assim com um controle remoto. - Uso de
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
Os dispositivos de TV, como outros dispositivos 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 Glide biblioteca 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 rede social.