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.
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 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 do AndroidX Leanback. Confira 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 estiver usando as classes AndroidX Leanback, aplique o tema NoTitleBar à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 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 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 funcione 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 dispositivos móveis Android e Android TV, poderá enfrentar alguns desafios devido à estilização. O 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 básica 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 recursos de temas
do AppCompat e também fornecem os valores específicos do Leanback.
É possível personalizar os temas do Theme.AppCompat.Leanback da mesma forma que 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
Os 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 na tela no lado esquerdo ou direito e deixe o espaço vertical para o conteúdo.
- Crie IUs 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 segundo plano 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 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 e 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 do AndroidX Leanback, como
BrowseSupportFragment
ou widgets relacionados, porque 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 de texto e controles no seu 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"/>
- Faça com que todos os widgets de exibição sejam 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 da compatibilidade de tela.
Gerenciar recursos de layout para TV
Assim como todos os outros dispositivos Android, as TVs têm tamanhos de tela diferentes e são compatíveis com várias resoluções, 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 tamanhos de tela, resoluções e densidades de pixel diferentes, defina as medidas 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 da compatibilidade de tela.
Padrões de layout a serem evitados
Existem algumas abordagens para a criação de layouts que não funcionam bem em dispositivos de TV. Confira 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 fatores de forma de dispositivos Android não são adequados para dispositivos de TV e precisam ser simplificados para a operação em uma TV.
- Usando
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. - Usando
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 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 usar 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 publicidade 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.