Uma tela de TV normalmente é vista a cerca de três metros de distância e, embora seja muito maior do que a maioria das telas de dispositivos Android, uma tela de TV não oferece o mesmo nível de detalhes e cor que uma tela de dispositivo menor. Esses fatores exigem que você crie layouts de apps pensando em dispositivos de TV, a fim de criar uma experiência do usuário útil e agradável.
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 androidx.androidx inclui Theme.Leanback, um tema para atividades de TV que oferece um estilo visual consistente. Use esse tema para qualquer app de TV criado
com as classes do AndroidX AndroidX. 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 de interface do usuário padrão para apps Android em smartphones e tablets, mas não é adequada para apps para 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 do 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 do drawable sem se preocupar com a versão do Android em execução no dispositivo. Se você
estiver desenvolvendo um app para execução somente no Android TV, não use
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á enfrentar alguns desafios devido à aplicação de temas. O AppCompatActivity e os diversos widgets AppCompat exigem que você use 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 base para dispositivos móveis Android e 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 YouTube TV.
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 ao
OnboardingSupportFragment do kit de ferramentas de interface do YouTube,
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 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 salve o espaço vertical para o conteúdo.
- Crie IUs divididas em seções usando fragmentos. Use grupos de visualizações como
GridViewem vez deListViewpara usar melhor o espaço horizontal da tela. - Use grupos de visualizações como
RelativeLayoutouLinearLayoutpara organizar as visualizações. Essa abordagem permite que o sistema ajuste a posição das visualizações em relação 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
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. Esse comportamento geralmente é chamado de overscan.
Posicione os elementos da tela que precisam estar sempre visíveis para o usuário dentro da área segura de overscan. A adição de uma margem de 5% de 48 dp nas bordas esquerda e direita e de 27 dp nas bordas superior e inferior de um layout ajuda a garantir que os elementos da tela no layout estejam dentro da área de segurança de overscan.
Não ajuste os elementos da tela de segundo plano com os quais o usuário não interage diretamente e não os corte na área segura de overscan. Essa abordagem ajuda a garantir que os elementos da tela de segundo plano 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 e um layout filho aninhado com uma margem de 5% e que possa 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 estiver usando as
classes do AndroidX AndroidX, como
BrowseSupportFragment
ou widgets relacionados, porque esses layouts já incorporam margens de segurança de overscan.
Criar controles e textos utilizáveis
Siga estas dicas para facilitar a visualização do texto e dos controles do 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 os 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"/> - Torne todos os widgets de visualização grandes o suficiente para serem visíveis a alguém sentado a três metros de distância da tela. A
melhor maneira de fazer isso é usar o dimensionamento relacionado a layout em vez de 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 medida de pixels. Para definir a margem de um widget, use valores dp em vez de px.
Para mais informações sobre pixels de densidade independente e criação de layouts para 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 tamanhos de tela diferentes e oferecem suporte a resoluções diferentes, incluindo, entre outras, 720p, 1080p e 4K. Confira 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 em diferentes tamanhos de tela, resolução e densidades de pixels, defina as medidas da interface usando pixels de densidade independente (dp, na sigla em inglês) em vez de pixels. A densidade de pixel da tela para diferentes resoluções do painel da TV é descrita abaixo.
| Resolução do painel | Densidade de pixel da tela |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Para saber mais sobre como otimizar 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. Estas são algumas abordagens de interface do usuário que devem 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. Layouts criados para outros formatos de dispositivos Android não são adequados para TVs e precisam ser simplificados para a operação em uma TV.
- Usar
ActionBar:embora as barras de ações 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 de qualquer menu suspenso não é recomendado para apps para TV devido à dificuldade de navegar por esse menu com um controle remoto. - Com o uso de
ViewPager:deslizar entre telas pode funcionar muito bem em um smartphone ou tablet, mas não tente fazer 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, assim como outros dispositivos Android, têm uma quantidade limitada de memória. Se você criar o layout do app com imagens de resolução muito alta ou usar muitas imagens de alta resolução na operação do app, ele poderá rapidamente atingir os limites de memória e causar erros de falta de memória. Na maioria dos casos, recomendamos o uso da 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 anúncios em vídeo que sejam exibidas em tela cheia e possam ser dispensadas em 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 do toque.
O Android TV não oferece um navegador da Web. Os anúncios não podem tentar abrir um navegador da Web nem 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.