Recortes no Compose

Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela. Ele permite uma experiência de ponta a ponta, deixando espaço para sensores importantes na parte frontal do dispositivo.

Exemplo de corte no modo retrato
Figura 1. Exemplo de recorte no modo Retrato
Exemplo de corte no modo paisagem
Figura 2. Exemplo de corte no modo paisagem

O Android oferece suporte a cortes de tela em dispositivos com o Android 9 (nível 28 da API) ou mais recente. No entanto, os fabricantes de dispositivos também podem oferecer suporte a cortes da tela em dispositivos com o Android 8.1 ou versões anteriores.

Esta página descreve como implementar o suporte a dispositivos com cortes no Compose, incluindo como trabalhar com a área de corte, ou seja, o retângulo de ponta a ponta na superfície da tela que contém o corte.

Caso padrão

Os apps direcionados ao nível 34 da API ou versões anteriores, ou atividades que não chamam enableEdgeToEdge, não vão renderizar na região de corte por padrão, a menos que o app renderize em uma barra do sistema que contenha o corte da tela.

Apps direcionados ao nível 35 da API ou mais recente em dispositivos com o Android 15 ou mais recente ou atividades que chamam enableEdgeToEdge são renderizados na região de recorte.

Em outras palavras, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES e LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER são interpretados como LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS para janelas não flutuantes em apps que segmentam o nível 35 da API ou mais recente em dispositivos com Android 15 ou mais recente.

Processar informações de recorte manualmente

Você precisa processar as informações de corte para evitar que a área de corte obscureça textos, controles ou elementos interativos importantes que exigem reconhecimento de toque fino. A sensibilidade ao toque pode ser menor na área de corte. Ao processar cortes, não codifique a altura da barra de status, porque isso pode causar sobreposição ou corte de conteúdo. Em vez disso, processe os recortes de uma das seguintes maneiras:

Para o Compose, recomendamos que você use displayCutout, safeContent ou safeDrawing para processar recortes nos elementos combináveis. Essa abordagem permite que você respeite o padding do recorte de tela quando necessário ou o ignore quando não for necessário.

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

Testar como seu conteúdo é renderizado com recortes

Teste todas as telas e experiências do seu app. Se possível, teste em dispositivos com diferentes tipos de corte. Se você não tem um dispositivo com corte, pode simular configurações de corte comuns em qualquer dispositivo ou emulador com o Android 9 ou versões mais recentes fazendo o seguinte:

  1. Ative as Opções do desenvolvedor.
  2. Na tela Opções do desenvolvedor, role para baixo até a seção Desenho e selecione Simular uma tela com corte.
  3. Selecione o tipo de corte.
    simular um corte da tela no emulador
    Figura 3. Use as Opções para desenvolvedores para testar como seu conteúdo é renderizado.