It's happening now, watch the livestream.

Criar navegação para 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 dos limites da percepção do usuário ao operar o app. Conforme você cria o app Android para TVs, preste atenção especial em como o usuário realmente navega pelo app usando botões do controle remoto em vez de uma tela de toque.

Esta lição explica os requisitos mínimos para a criação de esquemas de navegação de apps para TV e como aplicar esses requisitos ao app.

Ativar a navegação D-pad

Em um dispositivo de TV, os usuários navegam com controles em um dispositivo de controle remoto usando um teclado direcional (D-pad) 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 de trabalho do Android trata a navegação direcional entre elementos de layout automaticamente, então, normalmente, não é preciso fazer nada extra para o app. Você precisa testar a navegação com um controlador D-pad para detectar problemas na navegação. Siga estas orientações para testar se o sistema de navegação do app funciona bem com um D-pad em um dispositivo de TV:

  • Confirme se um usuário com controlador D-pad pode navegar para todos os controles visíveis na tela.
  • Para listas de rolagem com foco, confirme se o D-pad e as teclas para cima e para baixo rolam na lista e se a tecla Enter 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.

Modificação da navegação direcional

A estrutura de trabalho do Android aplica um esquema de navegação direcional baseado na posição relativa de elementos focalizáveis nos layouts. É necessário testar o esquema de navegação gerado no app usando um controlador D-pad. 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.

Observação: você só precisa usar esses atributos para modificar a ordem da navegação se a ordem padrão aplicada pelo sistema não funcionar bem.

A amostra de código a seguir mostra como definir o próximo controle para 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:

Atributo Função
nextFocusDown Define a próxima exibição a receber foco quando o usuário navega para baixo.
nextFocusLeft Define a próxima exibição a receber foco quando o usuário navega para a esquerda.
nextFocusRight Define a próxima exibição a receber foco quando o usuário navega para a direita.
nextFocusUp Define a próxima exibição a receber foco quando o usuário navega para cima.

Para usar um dos atributos de navegação explícitos, defina o valor para o código (valor android:id) de outro widget no layout. É necessário definir 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 na tela. Se você não oferecer indicações claras de itens com foco (e, portanto, em que item o usuário pode agir), ele pode rapidamente se frustrar e sair do app. Pela mesma razão, é importante sempre ter um item em foco no qual um usuário pode agir imediatamente após o início do app ou a qualquer momento em que estiver ocioso.

O layout e a implementação do app precisam usar cores, tamanhos, animações ou uma combinação desses atributos para ajudar os usuários a determinar facilmente 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 -->
    <?xml version="1.0" encoding="utf-8"?>
    <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>
    

A amostra de código XML de layout a seguir aplica o drawable de lista de estado 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.

Para mais recomendações sobre como projetar seleção e foco eficientes para o app para TV, consulte Padrões para TV.