Navegação na TV

Os dispositivos de TV oferecem um conjunto limitado de controles de navegação para apps. A criação de um esquema de navegação eficiente para o app de TV depende da compreensão desses controles limitados e das limitações dos usuários ao operar o app. Conforme você cria o app Android para TV, preste atenção especial em como o usuário navega usando botões do controle remoto em vez de uma tela de toque.

Princípios

O objetivo é que a navegação pareça natural e familiar sem dominar a interface do usuário ou desviar a atenção do conteúdo. Os princípios a seguir ajudam a definir uma linha de base para uma experiência do usuário consistente e intuitiva em apps de TV.

Controladores

Os controladores vêm em vários estilos, de um controle remoto minimalista a controladores de jogos complexos. Todos os controles incluem um botão direcional (D-pad) e botões de seleção, Início e voltar. Outros botões variam de acordo com o modelo.

Botão direcional
O método de navegação principal na TV é pelo botão direcional, que inclui botões de hardware direcionais para cima, para baixo, para a esquerda e para a direita. O botão direcional transfere o foco de um objeto para o objeto mais próximo na direção do botão pressionado.

Botão de seleção
Seleciona o item na tela com foco.

Botão Início
Leva o usuário para a tela inicial do sistema.

Botão Voltar
Oferece aos usuários uma maneira de retornar à visualização anterior.

Botão do microfone
Invoca o Google Assistente ou a entrada de texto por voz.

Navegação com o botão direcional

Em um dispositivo de TV, os usuários navegam usando um botão direcional ou teclas de seta. Esse tipo de controle limita a movimentação para cima, para baixo, para a esquerda e para a direita. Para criar um app excelente e otimizado, você precisa oferecer um esquema de navegação em que o usuário possa aprender rapidamente a navegar pelo app usando esses controles limitados.

A estrutura do Android processa a navegação direcional entre elementos de layout automaticamente, então, normalmente, não é preciso fazer nada extra para o app. Ainda assim, teste a navegação com um controlador D-pad para detectar problemas.

Siga estas orientações para testar se o sistema de navegação do app funciona bem com um botão direcional em um dispositivo de TV:

• Confirme se um usuário com controlador de botão direcional pode navegar para todos os controles visíveis na tela.
• Para listas de rolagem com foco, confirme se o D-pad e os botões para cima e para baixo rolam na lista e se o botão de seleção seleciona um item na lista. Confira se os usuários podem selecionar um elemento na lista e se ela ainda rola quando um elemento é selecionado.
• Confirme se a mudança entre controles é simples e previsível.

Modificar a navegação direcional

A estrutura do Android aplica um esquema de navegação direcional baseado na posição relativa de elementos focalizáveis nos layouts. Teste o esquema de navegação gerado no app usando um botão direcional. Após o teste, se você decidir que quer que os usuários se movimentem pelos layouts de maneira específica, poderá definir navegação direcional explícita para os controles.

O exemplo de código a seguir mostra como definir o próximo controle a receber foco para um objeto de layout TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

A tabela a seguir lista todos os atributos de navegação para widgets da interface do usuário do Android:

Para usar um desses atributos de navegação explícitos, defina o valor para o android:id de outro widget no layout. Defina a ordem da navegação como um ciclo para que o último controle direcione o foco de volta para o primeiro.

Oferecer foco e seleção claros

O sucesso de um esquema de navegação de app em dispositivos de TV depende da facilidade de um usuário em determinar qual elemento de interface do usuário está em foco. Se você não oferecer uma indicação clara do item com foco (e, portanto, em que item o usuário pode agir), os usuários podem se frustrar rapidamente e sair do app. Pelo mesmo motivo, é importante ter sempre um item em foco em que um usuário pode agir imediatamente após o início do app ou a sempre que ele estiver inativo.

No layout e na implementação do app, use cores, tamanhos, animações ou uma combinação desses atributos para ajudar os usuários a determinar as ações que podem ser tomadas em seguida. Use um esquema uniforme para indicar o foco no aplicativo.

O Android oferece Recursos de lista de estado de drawables para implementar realces para controles com foco e selecionados. O exemplo de código a seguir demonstra como ativar o comportamento visual para um botão indicar que o usuário navegou para o controle e selecionou-o em seguida:

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
button.xml

A amostra de código XML de layout a seguir aplica o drawable de lista de estados anterior a um Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Não deixe de oferecer preenchimento suficiente dentro dos controles selecionáveis e focalizáveis para que os realces em torno deles sejam claramente visíveis.

Navegação com o botão Voltar

Para garantir a consistência entre os apps na plataforma, verifique se o comportamento do botão Voltar segue estas diretrizes.

Usar o comportamento previsível do botão Voltar

Para criar uma experiência de navegação simples e previsível, quando o usuário pressionar o botão Voltar do controle remoto, leve-o ao destino anterior.

Se o usuário navegar de um item de menu para um card no meio da página e pressionar o botão Voltar, o resultado vai depender de o app usar a navegação superior ou a navegação à esquerda:

• O app usa a navegação superior:role rapidamente até a parte de cima da página e ative o foco no menu.
• O app usa a navegação à esquerda:ative o menu do lado esquerdo e foque no item de menu ativo no momento.

Confira se o botão Voltar não está bloqueado por telas de confirmação ou faz parte de um loop infinito.

O que não fazer:
Evite o bloqueio de saída. Permita que os usuários saiam do app sem confirmação.

O que não fazer:
Nunca entre no loop infinito de fechar e abrir o menu. O ideal é que pressionar o botão Voltar saia do app. Não mostre um botão de saída no menu, a menos que seja um caso especial, como um perfil para crianças.

Não mostrar um botão para cima ou para trás

Ao contrário dos dispositivos portáteis, o botão Voltar do controle remoto é usado para navegar para trás em uma TV. Não é necessário mostrar um botão Voltar virtual na tela:

O que não fazer:

Mostrar um botão Cancelar, se necessário

Se as únicas ações visíveis forem de confirmação, destrutivas ou de compra, é recomendável ter um botão Cancelar que retorne ao destino anterior:

O que fazer:

Implementar a navegação de retorno

A estrutura do Android geralmente processa bem a navegação de retorno, assim como faz para o botão direcional. Se você usar o componente de navegação, poderá oferecer suporte a vários gráficos de navegação. Ocasionalmente, talvez seja necessário implementar algum comportamento personalizado, como fazer com que o botão Voltar redefina o foco para o início de uma lista longa.

ComponentActivity, a classe de base de FragmentActivity e AppCompatActivity, permite controlar o comportamento do botão Voltar usando OnBackPressedDispatcher, que você pode recuperar chamando getOnBackPressedDispatcher().

Para mais informações, consulte Oferecer navegação de retorno personalizada.

Controles de reprodução na TV

A reprodução de vídeo é um dos recursos mais importantes da TV. É importante que os players de vídeo em apps no Android TV se comportem da mesma maneira. Consulte as diretrizes de controles de reprodução para TV.

Navegação na guia Ao vivo

Além de obedecer aos requisitos de qualidade do app de TV, os apps com um feed de TV ao vivo integrado à guia Ao vivo também precisam atender aos requisitos de reprodução simples e retorno direto, conforme descrito nas seções a seguir.

Reprodução simples

A reprodução simples se aplica ao comportamento no app após qualquer link direto de canal ao vivo ou linear do Google TV e do Android TV.

Quando um usuário clica em um link direto, as seguintes regras são aplicadas:

• Sem atrasos:os usuários precisam ser direcionados diretamente para a reprodução do canal sem bloquear ou atrasar telas, como fluxos de login ou inscrição ou vídeos de marca.
• Exceção de inicialização a frio:se o link direto iniciar o carregamento do app de destino a partir de uma inicialização a frio, o atraso de inicialização será permitido. Vídeos ou animações de marca de inicialização do app também são permitidos nesse caso.
• Exceção de atraso de carregamento:se a sintonia do canal levar alguns segundos, a exibição da marca será permitida. A duração precisa ser apenas o tempo necessário para carregar o canal.

Se o usuário tiver feito logout ou não estiver inscrito, você poderá bloquear a reprodução de um canal pago para concluir um fluxo de login ou inscrição.

Retorno direto

Quando os usuários abrem um app de um link direto na guia Ao vivo e pressionam o botão Voltar, eles precisam retornar à guia Ao vivo com um único clique, independentemente do tempo decorrido. Esse comportamento de retorno direto é obrigatório para todos os links diretos da guia Ao vivo no Google TV e no Android TV.

Os links diretos da guia Ao vivo são diferenciados por um parâmetro de link direto anexado: ?exit_on_back=[true|false]. Os apps precisam analisar esse parâmetro para determinar se o app foi aberto na guia Ao vivo. Se exit_on_back for true, os apps precisarão implementar o comportamento de retorno direto.

Se o usuário pressionar qualquer botão que não seja o botão Voltar como o primeiro botão pressionado após o link direto, o requisito de retorno direto não será aplicado, e apenas o comportamento padrão do botão Voltar será necessário.

Por exemplo, suponha que, depois de seguir um link direto, o usuário pressione o botão de seleção do botão direcional, que mostra uma sobreposição de controles. O usuário espera que a sobreposição desapareça e pressione o botão Voltar. Como o primeiro botão pressionado após seguir o link direto foi o botão de seleção do botão direcional, o requisito de retorno direto não será aplicado. Em vez disso, a lógica normal da backstack do app será aplicada.

Pressionamentos repetidos do botão Voltar precisam levar o usuário à raiz do app e, em seguida, de volta ao Google TV ou Android TV, sem loops infinitos. Para mais informações, consulte a seção Comportamento previsível do botão Voltar behavior.

Arquitetura de navegação

Uma arquitetura de navegação bem definida ajuda os usuários a entender onde eles estão no app e como acessar diferentes conteúdos. Considere os seguintes aspectos do design de navegação.

Destino inicial fixo

A primeira tela que o usuário vê ao abrir o app na tela de início também é a última tela que o usuário vê quando retorna à tela de início depois de pressionar o botão Voltar.

Links diretos simulam a navegação manual

Seja por um link direto ou navegando manualmente até um destino específico, os usuários podem usar o botão Voltar para navegar até o destino inicial.

O link direto para um app de outro app simula a navegação manual. Por exemplo, se o usuário acessar diretamente uma página de detalhes no app Moviestar do Google TV e pressionar o botão Voltar, ele será levado à página inicial do app Moviestar.

Caminho claro para todos os elementos focalizáveis

Permita que os usuários naveguem pela interface com uma direção clara. Se não houver um caminho direto para acessar um controle, considere realocá-lo.

O que fazer:
Coloque controles, como a ação de pesquisa mostrada aqui, em locais que não se sobreponham a outros elementos clicáveis.

O que não fazer:
Evite layouts que contenham controles em locais de difícil acesso. Acessar a ação de pesquisa mostrada aqui pode ser difícil com o botão direcional.

Eixos

Projete o layout para aproveitar os eixos horizontal e vertical. Atribua uma função específica a cada direção, tornando a navegação rápida em grandes hierarquias.

O que fazer:
As categorias podem ser percorridas no eixo vertical, e os itens em cada categoria podem ser navegados no eixo horizontal.

O que não fazer:
Evite hierarquias de layout complexas e aninhadas.