Esta página foi traduzida pela API Cloud Translation.

Layouts no kit de ferramentas de interface do Leanback
Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Uma tela de TV normalmente é vista a cerca de 3 metros de distância e, embora seja muito maior do que a maioria outros dispositivos Android, uma tela de TV não fornece o mesmo nível de detalhes e cor como uma tela de dispositivo menor. Esses fatores exigem que você crie layouts de aplicativos com dispositivos de TV em mente para 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 seus apps para TV. Use um tema para modificar a exibição das atividades do app que foram feitos para execução em um dispositivo de TV. Esta seção explica quais temas usar.

Tema Leanback

A biblioteca androidx.Flex inclui Theme.Leanback, um tema para atividades na TV que fornece um estilo visual consistente. Usar esse tema em 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 aplicativos Android em telefones e tablets, mas não é adequado para apps de TV. Se você não estiver usando classes AndroidX AndroidX, aplique o NoTitleBar às suas atividades de TV para suprimir a exibição de uma 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 junto com um dos temas Theme.AppCompat. Com essa combinação, você pode usar atributos como a tonalidade do drawable, sem se preocupar com a versão do Android em execução no dispositivo. Se você estão desenvolvendo um app que só pode ser executado no Android TV, não use AppCompatActivity, porque os recursos ativados já estão disponíveis no Android TV ou não é relevante.

Se estiver criando um app com uma base de código compartilhada entre o Android móvel e o Android TV, você poderá executar em alguns desafios devido à aplicação de temas. AppCompatActivity e as diversas Os 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 de 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 Leanback.

Você pode personalizar os temas do Theme.AppCompat.Leanback da mesma forma que faz com qualquer outro tema tema. Por exemplo, se você deseja alterar valores específicos do Kits 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 devem seguir algumas diretrizes básicas para garantir a usabilidade e o uso eficazes 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 conteúdo.
Crie IUs divididas em seções usando fragmentos. Use grupos de visualizações como GridView em vez de ListView para usar melhor o espaço horizontal da tela.
Use grupos de visualizações como RelativeLayout ou LinearLayout para organizar as visualizações. Essa abordagem permite que o sistema ajuste a posição das visualizações ao 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 alguns requisitos únicos devido à evolução dos padrões de TV para apresentar uma imagem em tela cheia para os espectadores. Por isso, os dispositivos de TV podem cortar a borda externa de um app para garantir que toda a tela seja preenchida. Esse comportamento é geralmente chamado de overscan (link em inglês).

Posicione elementos da tela que precisam estar sempre visíveis para o usuário no intervalo seguro de overscan área Adicionar uma margem de 5% de 48 dp nas bordas esquerda e direita e de 27 dp nas partes de cima e de baixo. de um layout ajuda a garantir que os elementos da tela estejam no limite de segurança de overscan área

Não ajuste elementos da tela de fundo com os quais o usuário não interage diretamente e não use cortes os elementos para a área de segurança de overscan. Essa abordagem ajuda a garantir que os elementos da tela de fundo tenham a aparência correta em todas as telas.

O exemplo a seguir mostra um layout raiz que pode conter elementos de segundo plano e uma layout filho que tem uma margem de 5% e pode 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 o Classes AndroidX AndroidX, como BrowseSupportFragment ou widgets relacionados, pois 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 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 que fiquem claramente visíveis para alguém sentados a três metros de distância da tela. A a melhor maneira de fazer isso é usar o dimensionamento relativo ao layout em vez do dimensionamento absoluto, e unidades de pixel independente de densidade (dp) em vez de unidades absolutas. Por exemplo, para definir largura de um widget, use wrap_content em vez de uma medida em pixels e defina os para um widget, use valores dp em vez de valores px.

Para mais informações sobre pixels de densidade independente e criação de layouts para lidar com pixels tamanhos de tela, consulte Compatibilidade de tela geral do Google.

Gerenciar recursos de layout para TV

Como todos os outros dispositivos Android, as TVs têm tamanhos de tela diferentes e oferecem suporte a diferentes de alta resolução, incluindo, mas não se limitando a, 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 sua interface em diferentes tamanhos de tela, resolução e densidades de pixel, define medições de interface usando em pixels de densidade independente (dp). A densidade de pixel da tela para diferentes painéis de TV e resoluções é descrita abaixo.

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

Consulte Suporte a densidades de pixel diferentes para mais informações.

Para mais informações sobre como otimizar layouts e recursos para telas grandes, consulte Visão geral de compatibilidade de tela.

Padrões de layout a serem evitados

Algumas abordagens para criar layouts não funcionam bem em dispositivos de TV. Aqui estão algumas abordagens de interface do usuário para evitar ao desenvolver um layout para TV.

Reutilização de layouts de smartphone ou tablet:não reutilize um smartphone ou tablet app para tablet sem modificação. Os layouts criados para outros formatos de dispositivos Android não são adequado para dispositivos de TV e deve ser simplificado para a operação em uma TV.
Usar ActionBar:embora as barras de ações sejam recomendadas para o uso em telefones e tablets, elas não são apropriadas para uma interface de TV. Usar um o menu de opções da barra de ações ou qualquer menu suspenso não é recomendado para apps para TV, devido a à dificuldade de navegar por esse menu com um controle remoto.
Usando o ViewPager:deslizar entre telas pode funcionar muito bem em um smartphone ou tablet. mas não tente em uma TV!

Para mais informações sobre como projetar layouts adequados para a TV, consulte a Guia de design para TV.

Processar bitmaps grandes

Dispositivos de TV, assim como outros dispositivos Android, têm uma quantidade limitada de memória. Se você desenvolver layout do aplicativo com imagens de alta resolução ou usar muitas imagens de alta resolução na operação do aplicativo, ele pode rapidamente atingir os limites de memória e causar erros de falta de memória. Para a maioria casos, recomendamos usar o comando Glide para buscar, decodificar e exibir bitmaps no seu app. Para mais informações sobre como receber o melhor desempenho ao trabalhar com bitmaps, consulte nossas diretrizes Práticas recomendadas para gráficos do Android.

Oferecer propaganda eficaz

Para o ambiente da sala de estar, recomendamos que você use soluções de anúncios em vídeo. em tela cheia e dispensáveis em 30 segundos. Funcionalidade para publicidade no Android TV, como botões de dispensar 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 devem tentar iniciar um navegador da Web ou redirecionar para um conteúdo da Google Play Store que não seja aprovados para dispositivos Android TV.

Observação:você pode usar a classe WebView para logins em serviços de mídia social.

Outros recursos

Projetar para TV

Migrar para o Compose para TV

Layouts no kit de ferramentas de interface do Leanback Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.