Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Cómo habilitar el modo de pantalla completa

Algunos contenidos se experimentan mejor en pantalla completa, como los videos, los juegos, las galerías de imágenes, los libros y las diapositivas de una presentación. En esta página, se muestra cómo puedes atraer a los usuarios con contenido en pantalla completa y evitar que salgan de la app por error.

Es posible que sientas la tentación de habilitar el modo de pantalla completa para maximizar el espacio de pantalla para tu app. Sin embargo, ten en cuenta la frecuencia con la que los usuarios entran y salen de las apps para ver notificaciones, realizar búsquedas espontáneas y muchas acciones más. El uso de la pantalla completa hace que los usuarios pierdan la facilidad de acceso al sistema de navegación. Por lo tanto, debes usar el modo de pantalla completa solo cuando las ventajas para la experiencia del usuario van más allá de obtener un poco de espacio adicional (como para evitar que un usuario salga por accidente durante un juego o a fin de brindar una mejor experiencia envolvente para imágenes, videos y libros).

Opciones de pantalla completa

Android ofrece tres opciones para que se muestre tu app en pantalla completa: simplificado, envolvente y envolvente fijo. En los tres enfoques las barras del sistema están ocultas y tu actividad continúa recibiendo todos los eventos táctiles. La diferencia entre ellos es cómo el usuario puede hacer que se vuelvan a ver las barras del sistema.

La siguiente es una descripción de cada una de las opciones. Para ver el código de ejemplo, avanza a Cómo habilitar el modo de pantalla completa.

Simplificado

El modo simplificado está destinado a experiencias en pantalla completa en las que los usuarios no interactúan demasiado con la pantalla, como cuando miran un video.

Cuando los usuarios quieren que vuelvan a aparecer las barras del sistema, todo lo que tienen que hacer es presionar en cualquier lugar de la pantalla.

Para habilitar el modo "simplificado", llama a setSystemUiVisibility() y pasa SYSTEM_UI_FLAG_FULLSCREEN y SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Cuando las barras del sistema vuelven a aparecer, puedes recibir una devolución de llamada para realizar otras actualizaciones en tu IU según corresponda. Consulta Cómo responder a los cambios de visibilidad de la IU.

Envolvente

El modo envolvente está destinado a las apps en las que el usuario interactuará mucho con la pantalla. Por ejemplo, juegos, ver imágenes en una galería o leer contenido con páginas, como un libro o diapositivas de una presentación.

Cuando los usuarios quieren que vuelvan a aparecer las barras del sistema, deslizan el dedo desde cualquier borde en el que está oculta una barra del sistema. Como el gesto requerido es más deliberado, no se interrumpirá la interacción del usuario con tu app debido a toques o deslizamientos accidentales.

Para habilitar el modo envolvente, llama a setSystemUiVisibility() y pasa la marca SYSTEM_UI_FLAG_IMMERSIVE junto con SYSTEM_UI_FLAG_FULLSCREEN y SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Si tu app tiene sus propios controles que no son necesarios cuando un usuario está inmerso en el contenido, haz que desaparezcan y vuelvan a aparecer junto con las barras del sistema. Esta recomendación también se aplica a cualquier gesto específico de la app que tengas para ocultar y mostrar sus controles. Por ejemplo, si cuando tocas en cualquier lugar de la pantalla aparece o desaparece una barra de herramientas o una paleta, debería suceder lo mismo con las barras del sistema.

Cuando las barras del sistema vuelven a aparecer, puedes recibir una devolución de llamada para realizar otras actualizaciones en tu IU según corresponda. Consulta Cómo responder a los cambios de visibilidad de la IU.

Envolvente fijo

En el modo envolvente regular, cada vez que un usuario desliza el dedo desde un borde, el sistema se ocupa de mostrar las barras del sistema. Tu app no se enterará de que se realizó un gesto. Por lo tanto, si el usuario realmente necesita deslizar el dedo desde el borde de la pantalla como parte de la experiencia principal de la app, como con un juego que requiere deslizar mucho el dedo o usar una app de dibujo, en su lugar deberías habilitar el modo envolvente "fijo".

En el modo envolvente fijo, si el usuario desliza el dedo desde un borde con una barra del sistema, las barras del sistema aparecen, pero son semitransparentes, y el gesto táctil se pasa a tu app, de manera que la app pueda responder al gesto.

Por ejemplo, en una app de dibujo que usa este enfoque, si el usuario desea dibujar una línea que comienza en el extremo de la pantalla, deslizar el dedo desde el borde mostrará las barras del sistema y también comenzará a dibujar una línea que comience en el mismo borde. Las barras desaparecen automáticamente después de unos segundos sin interacción o tan pronto como el usuario toca o hace un gesto en cualquier lugar fuera de las barras del sistema.

Para habilitar el modo envolvente, llama a setSystemUiVisibility() y pasa la marca SYSTEM_UI_FLAG_IMMERSIVE_STICKY junto con SYSTEM_UI_FLAG_FULLSCREEN y SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Con el modo envolvente fijo, no puedes recibir una devolución de llamada cuando cambia la visibilidad de la IU del sistema. Por lo tanto, si deseas el comportamiento de ocultar de forma automática del modo envolvente fijo, pero quieres saber cuándo la IU del sistema vuelve a aparecer para mostrar tus propios controles de IU, usa la marca IMMERSIVE regular y Handler.postDelayed() o un valor similar a fin de volver a ingresar al modo envolvente después de unos segundos.

Cómo habilitar el modo de pantalla completa

Independientemente del modo de pantalla completa que desees usar, debes llamar a setSystemUiVisibility() y pasarlo a SYSTEM_UI_FLAG_HIDE_NAVIGATION, SYSTEM_UI_FLAG_FULLSCREEN o a ambos. Puedes incluir SYSTEM_UI_FLAG_IMMERSIVE (para el modo envolvente regular) o SYSTEM_UI_FLAG_IMMERSIVE_STICKY (para el modo envolvente fijo), o bien excluir ambas opciones para habilitar el modo simplificado.

Es conveniente incluir otras marcas de IU del sistema (como SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION y SYSTEM_UI_FLAG_LAYOUT_STABLE) a fin de evitar que tu diseño cambie de tamaño cuando las barras del sistema se ocultan y se muestran. También debes asegurarte de que la barra de acciones y el resto de los controles de la IU estén ocultos al mismo tiempo.

En el siguiente código, se muestra cómo ocultar y mostrar las barras de estado y navegación en tu actividad sin cambiar el tamaño de tu diseño como respuesta a los cambios de espacio en la pantalla:

Kotlin

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)
        if (hasFocus) hideSystemUI()
    }

    private fun hideSystemUI() {
        // Enables regular immersive mode.
        // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
        // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                // Hide the nav bar and status bar
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_FULLSCREEN)
    }

    // Shows the system bars by removing all the flags
    // except for the ones that make the content appear under the system bars.
    private fun showSystemUI() {
        window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
    }
    

Java

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideSystemUI();
        }
    }

    private void hideSystemUI() {
        // Enables regular immersive mode.
        // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
        // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_IMMERSIVE
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                // Hide the nav bar and status bar
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN);
    }

    // Shows the system bars by removing all the flags
    // except for the ones that make the content appear under the system bars.
    private void showSystemUI() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    }
    

Es posible que también desees implementar lo siguiente para ofrecer una mejor experiencia del usuario:

  • Para proporcionar una transición perfecta entre estados, mantén la visibilidad de todos los controles de la IU sincronizados con las barras del sistema. Una vez que la app ingresa al modo envolvente, los controles de la IU también deben ocultarse junto con las barras del sistema y, luego, volver a aparecer cuando la IU del sistema haga lo mismo. Para ello, implementa View.OnSystemUiVisibilityChangeListener a fin de recibir devoluciones de llamadas, como se describe en Cómo responder a los cambios de visibilidad de la IU.
  • Implementa onWindowFocusChanged(). Si consigues el foco de la ventana, quizás te convenga volver a ocultar las barras del sistema. Si pierdes el foco de la ventana, por ejemplo, debido a un diálogo o menú emergente que aparece encima de tu app, quizás te convenga cancelar todas las operaciones para "ocultar" pendientes que hayas programado con Handler.postDelayed() o un elemento similar.
  • Implementa un GestureDetector que detecte onSingleTapUp(MotionEvent) a fin de permitir que los usuarios cambien de forma manual la visibilidad de las barras del sistema cuando tocan tu contenido. Los objetos de escucha de clics simples no son la mejor solución, ya que se activan incluso si el usuario arrastra un dedo por la pantalla (suponiendo que el objetivo de clic ocupa toda la pantalla).

Nota: Cuando usas la marca SYSTEM_UI_FLAG_IMMERSIVE_STICKY, un deslizamiento provoca que la IU del sistema aparezca temporalmente en un estado semitransparente, pero no se borra ninguna marca y no se activan los objetos de escucha de cambio de visibilidad de la IU de tu sistema.

Código de ejemplo adicional

Para ver más muestras de código con modos de pantalla completa, consulta los siguientes ejemplos:

Otros factores que considerar

En el SO Android Automotive, el fabricante del automóvil puede bloquear el modo de pantalla completa.