Cómo ocultar las barras del sistema para el modo envolvente

Algunos contenidos se experimentan mejor en pantalla completa sin indicadores en la barra de estado ni en la barra de navegación. Algunos ejemplos son videos, juegos, galerías de imágenes, libros y diapositivas de presentaciones. Esto se conoce como modo envolvente. En esta página, se muestra cómo puedes atraer a los usuarios con contenido en pantalla completa.

Figura 1: Ejemplo del modo envolvente.

El modo envolvente ayuda a los usuarios a evitar salidas accidentales durante un juego y ofrece una experiencia envolvente para disfrutar de imágenes, videos y libros. Sin embargo, ten en cuenta la frecuencia con la que los usuarios entran y salen de las apps para revisar notificaciones, realizar búsquedas improvisadas o realizar otras acciones. Debido a que el modo envolvente hace que los usuarios pierdan el acceso fácil a la navegación del sistema, úsalo solo cuando el beneficio para la experiencia del usuario vaya más allá de simplemente usar espacio de pantalla adicional.

Usa WindowInsetsControllerCompat.hide() para ocultar las barras del sistema y WindowInsetsControllerCompat.show() para volver a mostrarlas.

En el siguiente fragmento, se muestra un ejemplo de cómo configurar un botón para ocultar y mostrar las barras del sistema.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val windowInsetsController =
        WindowCompat.getInsetsController(window, window.decorView)
    // Configure the behavior of the hidden system bars.
    windowInsetsController.systemBarsBehavior =
        WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

    // Add a listener to update the behavior of the toggle fullscreen button when
    // the system bars are hidden or revealed.
    ViewCompat.setOnApplyWindowInsetsListener(window.decorView) { view, windowInsets ->
        // You can hide the caption bar even when the other system bars are visible.
        // To account for this, explicitly check the visibility of navigationBars()
        // and statusBars() rather than checking the visibility of systemBars().
        if (windowInsets.isVisible(WindowInsetsCompat.Type.navigationBars())
            || windowInsets.isVisible(WindowInsetsCompat.Type.statusBars())) {
            binding.toggleFullscreenButton.setOnClickListener {
                // Hide both the status bar and the navigation bar.
                windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
            }
        } else {
            binding.toggleFullscreenButton.setOnClickListener {
                // Show both the status bar and the navigation bar.
                windowInsetsController.show(WindowInsetsCompat.Type.systemBars())
            }
        }
        ViewCompat.onApplyWindowInsets(view, windowInsets)
    }
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    WindowInsetsControllerCompat windowInsetsController =
            WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
    // Configure the behavior of the hidden system bars.
    windowInsetsController.setSystemBarsBehavior(
            WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    );

    // Add a listener to update the behavior of the toggle fullscreen button when
    // the system bars are hidden or revealed.
    ViewCompat.setOnApplyWindowInsetsListener(
        getWindow().getDecorView(),
        (view, windowInsets) -> {
        // You can hide the caption bar even when the other system bars are visible.
        // To account for this, explicitly check the visibility of navigationBars()
        // and statusBars() rather than checking the visibility of systemBars().
        if (windowInsets.isVisible(WindowInsetsCompat.Type.navigationBars())
                || windowInsets.isVisible(WindowInsetsCompat.Type.statusBars())) {
            binding.toggleFullscreenButton.setOnClickListener(v -> {
                // Hide both the status bar and the navigation bar.
                windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());
            });
        } else {
            binding.toggleFullscreenButton.setOnClickListener(v -> {
                // Show both the status bar and the navigation bar.
                windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
            });
        }
        return ViewCompat.onApplyWindowInsets(view, windowInsets);
    });
}

De manera opcional, puedes especificar el tipo de barras del sistema que se ocultarán y determinar su comportamiento cuando un usuario interactúe con ellas.

Especifica qué barras del sistema se deben ocultar

Para especificar el tipo de barras del sistema que se ocultarán, pasa uno de los siguientes parámetros a WindowInsetsControllerCompat.hide().

Especifica el comportamiento de las barras del sistema ocultas

Usa WindowInsetsControllerCompat.setSystemBarsBehavior() para especificar cómo se comportan las barras del sistema ocultas cuando el usuario interactúa con ellas.