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 tengas la tentación de habilitar el modo de pantalla completa a fin de maximizar el espacio de la pantalla de tu app. Pero ten en cuenta la frecuencia con la que los usuarios entran y salen de apps para revisar notificaciones, hacer búsquedas improvisadas y mucho 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 si deseas 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 la 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.

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 en cuanto el usuario toca o hace un gesto en cualquier lugar fuera de las barras del sistema.

Para habilitar el modo envolvente fijo, 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. Si quieres que el modo de inmersión esté oculto automáticamente, pero quieres saber cuándo vuelve a aparecer la IU del sistema a fin de mostrar tus propios controles de IU, usa la marca IMMERSIVE y Handler.postDelayed() o algo similar para 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 quieras usar, debes llamar a setSystemUiVisibility() y pasarlo a SYSTEM_UI_FLAG_HIDE_NAVIGATION, SYSTEM_UI_FLAG_FULLSCREEN o ambos. Puedes incluir SYSTEM_UI_FLAG_IMMERSIVE (para el modo envolvente normal) o SYSTEM_UI_FLAG_IMMERSIVE_STICKY (para el modo envolvente fijo), o bien excluir ambos a fin de habilitar el modo inclinado.

Se recomienda incluir otras marcas de la IU del sistema (como SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION y SYSTEM_UI_FLAG_LAYOUT_STABLE) para evitar que el diseño cambie de tamaño cuando se oculten y se muestren las barras del sistema. 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 llamada, como se describe en Responde a los cambios de visibilidad de la IU.
Implementa onWindowFocusChanged(). Si consigues el enfoque de la ventana, te recomendamos volver a ocultar las barras del sistema. Si pierdes el enfoque de la ventana, por ejemplo, debido a que aparece un cuadro de diálogo o un menú emergente sobre tu app, es probable que quieras cancelar cualquier operación "ocultar" pendiente que hayas programado anteriormente con Handler.postDelayed() o algo similar.
Implementa un GestureDetector que detecte onSingleTapUp(MotionEvent) para permitir que los usuarios activen o desactiven manualmente la visibilidad de las barras del sistema cuando tocas 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 hace que la IU del sistema aparezca temporalmente en un estado semitransparente, pero no se borran las marcas y los objetos de escucha de cambio de visibilidad de la IU del sistema no se activan.

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.