Ativar modo de tela cheia

Alguns conteúdos ficam melhores em tela cheia, como vídeos, jogos, galerias de imagens, livros e slides em uma apresentação. Esta página mostra como você pode envolver seus usuários mais profundamente com conteúdo em tela cheia e evitar que eles saiam do app acidentalmente.

Pode ser tentador ativar o modo de tela cheia apenas para maximizar o espaço na tela do seu app. Lembre-se, no entanto, da frequência com que os usuários entram e saem de apps para verificar notificações, fazer pesquisas de improviso e muito mais. O uso da tela cheia faz com que os usuários percam o acesso facilitado à navegação do sistema. Por isso, você precisa usar o modo de tela cheia apenas quando os benefícios para a experiência do usuário excederem o simples recebimento de um pouco de espaço extra (como evitar saídas acidentais durante um jogo ou proporcionar uma experiência imersiva valiosa para imagens, vídeos e livros).

Opções de tela cheia

O Android oferece três opções para deixar seu app em tela cheia: Leanback, Immersive e Sticky Immersive. Nas três abordagens, as barras do sistema são ocultadas, e sua atividade continua recebendo todos os eventos de toque. A diferença entre eles é como o usuário pode trazer as barras do sistema de volta à visualização.

A seguir, apresentamos uma descrição de cada uma das diferentes opções. Para ver exemplos de código, siga para Ativar modo de tela cheia.

Leanback

O modo Leanback foi feito para experiências em tela cheia em que os usuários não estão interagindo intensamente com a tela, como quando eles assistem um vídeo.

Quando os usuários querem recuperar as barras do sistema, eles simplesmente tocam em qualquer lugar da tela.

Para ativar o modo Leanback, chame setSystemUiVisibility() e transmita SYSTEM_UI_FLAG_FULLSCREEN e SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Quando as barras do sistema forem exibidas novamente, você poderá receber um callback para fazer outras atualizações apropriadas na sua IU. Consulte Responder a alterações de visibilidade da IU.

Imersivo

O modo Immersive foi criado para apps em que o usuário estará interagindo com a tela. Alguns exemplos são jogos, exibição de imagens em uma galeria ou leitura de conteúdo paginado, como um livro ou slides em uma apresentação.

Quando os usuários precisam trazer de volta as barras do sistema, eles deslizam pela borda em que uma barra do sistema está oculta. Exigir esse gesto mais deliberado não interrompe o envolvimento do usuário com seu app por toques ou gestos de deslizar acidentais.

Para ativar o modo imersivo, chame setSystemUiVisibility() e transmita a sinalização SYSTEM_UI_FLAG_IMMERSIVE em conjunto com SYSTEM_UI_FLAG_FULLSCREEN e SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Se seu app tem controles próprios que não são necessários quando um usuário está imerso em conteúdo, faça-os desaparecer e reaparecer em sincronia com as barras do sistema. Essa recomendação também se aplica a qualquer gesto específico de apps que você possa ter para ocultar e mostrar os controles de apps. Por exemplo, se tocar em qualquer lugar da tela alternar o aparecimento de uma barra de ferramentas ou paleta, a exibição das barras de sistema também será alternada.

Imersivo fixo

No modo Immersive normal, sempre que um usuário desliza a partir de uma borda, o sistema revela as barras do sistema, e o gesto nem será detectado pelo app. Portanto, se o usuário precisar deslizar a partir da borda da tela como parte da experiência principal do app, como para interagir com um jogo que exige vários gestos de deslizar ou o uso de um app de desenho, você precisará ativar o modo Sticky Immersive.

Enquanto estiver no modo Sticky Immersive, se o usuário deslizar a partir de uma borda com uma barra do sistema, essa barra será exibida, mas ficará semitransparente, e o gesto de toque será passado para o app para que ele também possa responder.

Por exemplo, em um app de desenho que usa essa abordagem, se o usuário quiser desenhar uma linha que começa na borda da tela, deslizar a partir da borda revelará as barras do sistema, mas também começará o desenho de uma linha a partir dessa borda. As barras desaparecerão automaticamente depois de alguns segundos sem interação ou assim que o usuário tocar ou fizer um gesto em qualquer lugar fora das barras.

Para ativar o modo imersivo fixo, chame setSystemUiVisibility() e transmita a sinalização SYSTEM_UI_FLAG_IMMERSIVE_STICKY em conjunto com SYSTEM_UI_FLAG_FULLSCREEN e SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Com o modo imersivo fixo, você não poderá receber um callback quando a visibilidade da IU do sistema for alterada. Portanto, se você quiser o comportamento de ocultação automática do modo imersivo fixo, mas ainda quiser saber quando a IU do sistema reaparece para mostrar também seus próprios controles de IU, use a sinalização IMMERSIVE normal e use Handler.postDelayed() ou algo semelhante para voltar ao modo Imersivo depois de alguns segundos.

Ativar modo de tela cheia

Independentemente do modo de tela cheia que você quer usar, é necessário chamar setSystemUiVisibility() e transmitir SYSTEM_UI_FLAG_HIDE_NAVIGATION, SYSTEM_UI_FLAG_FULLSCREEN ou ambos. Você pode incluir SYSTEM_UI_FLAG_IMMERSIVE (para o modo imersivo normal) ou SYSTEM_UI_FLAG_IMMERSIVE_STICKY (para o modo imersivo fixo) ou excluir ambos para ativar o modo Leanback.

É recomendável incluir outros sinalizadores de interface de usuário do sistema (como SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION e SYSTEM_UI_FLAG_LAYOUT_STABLE) para impedir que o layout seja redimensionado quando as barras do sistema forem ocultadas e exibidas. Você também precisa garantir que a barra de ações e outros controles da IU sejam ocultos ao mesmo tempo.

O código a seguir mostra como ocultar e exibir as barras de status e navegação na sua atividade, sem redimensionar o layout em resposta à mudança no espaço da tela:

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);
    }

Você também pode implementar o seguinte para fornecer uma melhor experiência do usuário:

Para fornecer uma transição perfeita entre estados, mantenha a visibilidade de todos os controles da IU sincronizada com as barras do sistema. Depois que o app entra no modo imersivo, todos os controles da IU também têm que ficar ocultos junto com as barras do sistema e depois reaparecer quando a IU reaparecer. Para fazer isso, implemente View.OnSystemUiVisibilityChangeListener para receber callbacks, conforme descrito em Responder a alterações de visibilidade da IU.
Implemente onWindowFocusChanged(). Se você ganhar o foco da janela, poderá ocultar novamente as barras do sistema. Se você perder o foco da janela, por exemplo, devido a uma caixa de diálogo ou um menu pop-up exibido por cima do app, é recomendável cancelar as operações de "ocultar" pendentes que foram agendadas anteriormente com Handler.postDelayed() ou algo semelhante.
Implemente um GestureDetector que detecte onSingleTapUp(MotionEvent), para permitir que os usuários alternem manualmente a visibilidade das barras do sistema tocando no seu conteúdo. Listeners de cliques simples não são a melhor solução para isso, já que são acionados mesmo quando o usuário arrasta o dedo pela tela (supondo que o alvo do clique ocupe a tela inteira).

Observação: quando você usa a sinalização SYSTEM_UI_FLAG_IMMERSIVE_STICKY, deslizar o dedo faz com que a IU do sistema apareça temporariamente em um estado semitransparente, mas nenhuma sinalização é apagada, e os listeners da mudança de visibilidade da IU do sistema não são acionados.

Outras amostras de código

Para ver mais códigos com diferentes modos de tela cheia, consulte as seguintes amostras (links em inglês):

Outras considerações

No Android Automotive OS, o fabricante do carro pode bloquear o modo de tela cheia.