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

Además de los métodos de entrada táctil, como los teclados en pantalla, Android admite la conexión de teclados físicos al dispositivo. Un teclado ofrece un modo conveniente para la entrada de 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 los eventos táctiles como el modo principal de interacción, las tablets y otros dispositivos similares son populares, y muchos usuarios prefieren 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 sea compatible con la interacción a través de un teclado. En este documento, se describe cómo puedes mejorar la navegación con un teclado.

Prueba tu app

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

Se pueden enfocar todos los widgets interactivos proporcionados por el framework de Android, como Button y EditText. 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 su apariencia cuando obtiene un foco de entrada.

Para probar tu app, sigue 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. Para probar tu app, usa solo la tecla Tab para navegar por la IU. Asegúrate de que cada control de la IU obtenga el foco esperado.

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

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

    Busca cualquier instancia en la que el enfoque se mueva de una 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 esperas, especifica dónde debe estar el foco en tu diseño, 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 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 al orden del archivo, es posible que debas especificar manualmente el orden del foco.

Por ejemplo, en el siguiente diseño, hay dos botones alineados en el lado derecho y un campo de texto alineado a la izquierda del segundo botón. Para pasar el foco del primer botón al campo de texto y luego al segundo botón, el diseño debe definir explícitamente el orden del foco para cada uno de los elementos 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 foco se mueva de button1 a button2 y, luego, a editText1, se mueve de manera apropiada según la apariencia de la pantalla: de button1 a editText1 y, luego, a button2.

Cómo controlar la navegación direccional

Los usuarios también pueden navegar por tu app con las teclas de flecha de un teclado, que se comportan de la misma manera que cuando se navega con un pad direccional o una bola de seguimiento. El sistema proporciona una “mejor suposición” sobre qué vista enfocar en una dirección específica, según el diseño de las vistas en pantalla. Sin embargo, a veces el sistema adivina incorrectamente.

Si el sistema no pasa el foco a la vista apropiada cuando navegas en una dirección determinada, debes usar los siguientes atributos para especificar qué vista debe recibir el foco:

Cada atributo designa la siguiente vista que recibirá el enfoque cuando el usuario navegue en esa dirección, según lo que especifique el ID de la 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: