Configurar de ponta a ponta

A exibição de ponta a ponta permite que o app renderize a interface atrás das barras de sistema (barra de status, barra de legenda e barra 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 mais recente, a exibição de ponta a ponta será aplicada por padrão.

Para mostrar o conteúdo corretamente de ponta a ponta em todas as versões do Android, siga estas etapas de configuração. Sem essas etapas, o app poderá 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, na sigla em inglês).

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, enableEdgeToEdge() torna as barras de 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 encartes de IME, permitindo que você ajuste o layout com preenchimento quando o teclado na tela aparece ou desaparece.

<!-- 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 é ativada, alguns elementos de conteúdo e da interface do app podem ser renderizados atrás das barras de sistema. Para evitar que elementos críticos ou interativos sejam obscurecidos por barras de sistema ou se sobreponham a gestos do sistema, é necessário processar encartes.

Os encartes descrevem partes da tela que se cruzam com a interface do sistema ou 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 áreas em que as barras de sistema são mostradas. Use-os para evitar que a interface seja obscurecida pelas barras de sistema.
• Encartes de corte da tela:representam áreas em que um corte físico (como um entalhe de câmera) existe na tela do dispositivo.

No Compose, é possível processar encartes usando réguas, modificadores de preenchimento ou modificadores de tamanho de encarte. Consulte Sobre encartes de janela para orientações detalhadas.

Temas avançados

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

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()) For example, use either `Scaffold`,

Cores e ícones da barra de sistema

Ao usar a exibição de ponta a ponta, o plano de fundo do app pode ficar visível atrás das barras de sistema. Portanto, talvez seja necessário ajustar as cores dos ícones da barra de 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 enableEdgeToEdge() forneça barras de sistema transparentes ou translúcidas padrão, talvez seja necessário personalizar isso. Consulte as orientações de design de barras de sistema do 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.

Caixas de diálogo

Para mostrar caixas de diálogo em tela cheia de ponta a ponta, chame WindowCompat.enableEdgeToEdge no método onStart() da caixa de diálogo:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}