Ocultar barras de sistema para o modo imersivo

Alguns conteúdos ficam melhores em tela cheia sem indicadores na barra de status ou de navegação. Alguns exemplos são vídeos, jogos, galerias de imagens, livros e slides de apresentação. Isso é chamado de modo imersivo. Esta página mostra como você pode envolver os usuários mais profundamente com conteúdo em tela cheia.

Figura 1. Exemplo do modo imersivo.

O modo imersivo ajuda os usuários a evitar saídas acidentais durante um jogo e oferece uma experiência imersiva para aproveitar imagens, vídeos e livros. No entanto, preste atenção à frequência com que os usuários entram e saem de apps para verificar notificações, fazer pesquisas de improviso ou realizar outras ações. Como o modo imersivo faz com que os usuários percam o acesso fácil à navegação do sistema, use-o apenas quando o benefício para a experiência do usuário for além do uso de espaço extra na tela.

Use WindowInsetsControllerCompat.hide() para ocultar as barras de sistema e WindowInsetsControllerCompat.show() para mostrá-las novamente.

O snippet a seguir mostra um exemplo de configuração de um botão para ocultar e mostrar as barras de 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);
    });
}

Opcionalmente, você pode especificar o tipo de barras de sistema a serem ocultadas e determinar o comportamento delas quando um usuário interage com elas.

Especificar quais barras de sistema ocultar

Para especificar o tipo de barras de sistema a serem ocultadas, transmita um dos seguintes parâmetros para WindowInsetsControllerCompat.hide().

Especificar o comportamento das barras de sistema ocultas

Use WindowInsetsControllerCompat.setSystemBarsBehavior() para especificar como as barras de sistema ocultas se comportam quando o usuário interage com elas.