Configurar de ponta a ponta

A exibição de ponta a ponta permite que o app mostre a interface atrás das barras de sistema, ou seja, as barras de status, de legenda e de navegação, para oferecer uma experiência do usuário mais imersiva. Se você segmentar dispositivos com o Android 15 (nível 35 da API) ou versões mais recentes, a exibição de ponta a ponta será aplicada por padrão.

Para mostrar o conteúdo de ponta a ponta corretamente em todas as versões do Android, siga estas etapas de configuração. Sem essas etapas, o app pode renderizar cores sólidas atrás das barras de sistema ou não animar o conteúdo de forma síncrona com as transições do teclado na tela (IME).

1. Ativar a exibição de ponta a ponta

Para ativar a exibição de ponta a ponta em versões anteriores do Android, chame enableEdgeToEdge() no método Activity.onCreate():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    // ...
}

Por padrão, o enableEdgeToEdge() torna as barras do sistema transparentes, exceto no modo de navegação com três botões, em que aplica uma tela translúcida à barra de navegação para melhorar o contraste. A cor dos ícones do sistema e da tela se adapta ao tema claro ou escuro do sistema.

2. Configurar windowSoftInputMode

Defina android:windowSoftInputMode="adjustResize" na entrada AndroidManifest.xml da atividade. Essa configuração permite que o app receba inserções de IME, para que você possa ajustar o layout com padding quando o teclado na tela aparecer ou desaparecer.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. Processar sobreposições usando encartes

Depois que a exibição de ponta a ponta for ativada, alguns elementos de conteúdo e interface do app poderão ser renderizados atrás das barras do sistema. Para evitar que elementos críticos ou interativos sejam ocultados por barras de sistema ou se sobreponham a gestos do sistema, é necessário processar as inserções.

As margens descrevem partes da tela que se cruzam com a interface ou os gestos do sistema. Os principais tipos de encartes a serem considerados para a exibição de ponta a ponta são:

  • Encartes de barras de sistema:representam as áreas em que as barras de sistema são mostradas. Use-os para evitar que a interface seja ocultada pelas barras de sistema.
  • Inserções de corte da tela:representam áreas em que há um corte físico (como um entalhe de câmera) na tela do dispositivo.

No Compose, é possível processar as inserções usando réguas, modificadores de padding ou modificadores de tamanho de inserção. Consulte Sobre as inserções de janela para ver orientações detalhadas.

Tópicos avançados

Considere o seguinte para casos de uso de ponta a ponta mais avançados.

Modo imersivo

Alguns conteúdos, como vídeos ou mapas, se beneficiam de uma experiência totalmente imersiva em que as barras de sistema ficam ocultas. É possível ocultar as barras de sistema usando WindowInsetsControllerCompat:

val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars())

Cores e ícones da barra de sistema

Ao usar o modo de ponta a ponta, o plano de fundo do app pode ficar visível atrás das barras do sistema. Por isso, talvez seja necessário ajustar as cores dos ícones da barra do sistema para melhorar o contraste.

Para mudar os ícones da barra de status para claro ou escuro, use WindowInsetsControllerCompat:

// Set status bar icons to dark.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Proteção da barra de sistema

Embora o enableEdgeToEdge() forneça barras de sistema transparentes ou translúcidas por padrão, talvez seja necessário personalizá-las. Consulte as orientações de design de barras do sistema Android e as orientações de design de ponta a ponta para decidir quando usar barras transparentes ou translúcidas.

Para tornar a barra de navegação com três botões totalmente transparente em vez de translúcida, desative a aplicação de contraste:

window.isNavigationBarContrastEnforced = false

Para mais informações, consulte Sobre a proteção da barra de sistema.

Avançar
Sobre o WindowInsetsRulers