Cómo agregar compatibilidad con la navegación de teclado

Además de los métodos de entrada de software, como los teclados en pantalla, Android admite la conexión de teclados físicos al dispositivo. Un teclado ofrece un modo conveniente para ingresar texto y una forma para que los usuarios naveguen e interactúen con tu app. Aunque la mayoría de los dispositivos portátiles, como los teléfonos, usan el tacto como modo principal de interacción, las tablets y otros dispositivos similares son populares, y a muchos usuarios les gusta conectarles accesorios de teclado.

A medida que más dispositivos con Android ofrecen este tipo de experiencia, es importante que optimices tu app para que admita la interacción a través de un teclado. En este documento, se describe cómo mejorar la navegación con un teclado.

Prueba tu app

Es posible que los usuarios ya puedan navegar por tu app con un teclado, porque el sistema Android habilita la mayoría de los comportamientos necesarios de forma predeterminada.

Todos los widgets interactivos que proporciona el framework de Android, como Button y EditText, son enfocables. Esto significa que los usuarios pueden navegar con dispositivos de control, como un pad direccional o un teclado, y cada widget se ilumina o cambia de apariencia cuando obtiene el foco de entrada.

Para probar tu app, realiza el siguiente procedimiento:

  1. Instala tu app en un dispositivo que ofrezca un teclado de hardware.

    Si no tienes un dispositivo de hardware con un teclado, conecta un teclado Bluetooth o USB.

    También puedes hacer lo siguiente para usar Android Emulator:

    1. En el Administrador de AVD, haz clic en New Device o selecciona un perfil existente y haz clic en Clone.
    2. En la ventana que aparece, asegúrate de que estén habilitadas las opciones Keyboard y DPad.
  2. Si quieres probar tu app, usa solo la tecla Tab para navegar por la IU. Asegúrate de que cada control de la IU reciba el foco como se espera.

    Busca cualquier instancia en la que el enfoque se mueva de manera inesperada.

  3. Vuelve a comenzar desde el principio de tu app y navega por la IU con controles de dirección, como las teclas de flecha del teclado. Desde cada elemento enfocable de tu IU, presiona Arriba, Abajo, Izquierda y Derecha.

    Busca cualquier instancia en la que el enfoque se mueva de manera inesperada.

Si encuentras alguna instancia en la que la navegación con la tecla Tab o los controles de dirección no hacen lo que esperabas, especifica en qué lugar del diseño debe estar el foco, como se explica en las siguientes secciones.

Cómo controlar la navegación de pestañas

Cuando un usuario navega por tu app con la tecla Tab del teclado, el sistema pasa el foco de entrada entre los elementos según el orden en el que aparecen en el diseño. Si usas un diseño relativo, por ejemplo, y el orden de los elementos en la pantalla es diferente del orden del archivo, es posible que debas especificar manualmente el orden del foco.

Por ejemplo, en el siguiente diseño, dos botones están alineados en el lado derecho y un campo de texto se alinea a la izquierda del segundo botón. Para pasar el enfoque del primer botón al campo de texto y, luego, al segundo botón, el diseño debe definir explícitamente el orden del enfoque para cada uno de los elementos enfocables con el atributo android:nextFocusForward.

<androidx.constraintlayout.widget.ConstraintLayout ...>
    <Button
        android:id="@+id/button1"
        android:nextFocusForward="@+id/editText1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
    <Button
        android:id="@+id/button2"
        android:nextFocusForward="@+id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        ... />
    <EditText
        android:id="@id/editText1"
        android:nextFocusForward="@+id/button2"
        app:layout_constraintBottom_toBottomOf="@+id/button2"
        app:layout_constraintRight_toLeftOf="@id/button2
        ...  />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Ahora, en lugar de que el enfoque se mueva de button1 a button2 y, luego, editText1, se moverá correctamente según la apariencia de la pantalla: de button1 a editText1 y, luego, button2.

Cómo controlar la navegación direccional

Los usuarios también pueden navegar por la app con las teclas de flecha de un teclado, que se comporta de la misma manera que cuando se navega con un pad direccional o una bola de seguimiento. El sistema proporciona una "mejor suposición" para determinar en qué vista enfocar en una dirección determinada, según el diseño de las vistas en pantalla. Sin embargo, a veces el sistema adivina mal.

Si el sistema no pasa el enfoque a la vista adecuada cuando navega en una dirección determinada, especifica qué vista debe recibir el enfoque con los siguientes atributos:

Cada atributo designa la siguiente vista que recibirá el enfoque cuando el usuario navegue en esa dirección, según lo especificado por el ID de vista. Esto se muestra en el siguiente ejemplo:

<Button
    android:id="@+id/button1"
    android:nextFocusRight="@+id/button2"
    android:nextFocusDown="@+id/editText1"
    ... />
<Button
    android:id="@id/button2"
    android:nextFocusLeft="@id/button1"
    android:nextFocusDown="@id/editText1"
    ... />
<EditText
    android:id="@id/editText1"
    android:nextFocusUp="@id/button1"
    ...  />

Recursos adicionales

Consulta los siguientes recursos relacionados: