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, fornecendo espaço para sensores importantes na parte frontal do dispositivo.
O Android oferece suporte a cortes de tela em dispositivos com o Android 9 (nível 28 da API) e versões mais recentes. No entanto, os fabricantes de dispositivos também podem oferecer suporte a cortes de tela em dispositivos com o Android 8.1 ou versões anteriores.
Este documento descreve como implementar o suporte a dispositivos com recortes, incluindo como trabalhar com a área de corte, ou seja, o retângulo de borda a borda na superfície da tela que contém o corte.
Escolher como o app processa áreas de corte
Se você não quiser que seu conteúdo se sobreponha a uma área de corte, geralmente
é suficiente garantir que ele não se sobreponha à barra de status e
à barra de navegação. Se você estiver renderizando na área de corte, use
WindowInsetsCompat.getDisplayCutout()
para recuperar um objeto DisplayCutout
que contenha os encartes e a caixa delimitadora seguros para cada corte. Essas APIs permitem
verificar se o conteúdo se sobrepõe ao corte para que você possa
reposicionar, se necessário.
Você também pode determinar se o conteúdo é disposto por trás da área de corte. O
atributo de layout de janela layoutInDisplayCutoutMode
controla como o conteúdo é renderizado na área de corte.
É possível definir layoutInDisplayCutoutMode
como um dos seguintes valores:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
: o conteúdo é renderizado na área de corte quando exibido no modo retrato, mas tem efeito letterbox quando mostrado no modo paisagem.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
: o conteúdo é renderizado na área de corte nos modos retrato e paisagem.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
: o conteúdo nunca é renderizado na área de corte.
Você pode definir o modo de corte de forma programática ou definindo um
estilo na atividade. O exemplo
abaixo define um estilo para aplicar o atributo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
à atividade.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> shortEdges <!-- default, shortEdges, or never --> </item> </style>
As seções a seguir descrevem os diferentes modos de corte em mais detalhes.
Comportamento padrão
Por padrão, no modo retrato sem sinalizações especiais definidas, a barra de status em um dispositivo com corte é redimensionada para ter pelo menos a mesma altura do corte, e o conteúdo é exibido na área abaixo. No modo paisagem ou tela cheia, a janela do app tem efeito letterbox para que nenhum conteúdo seja mostrado na área de corte.
Renderizar conteúdo em áreas de corte de borda curta
Para alguns conteúdos, como vídeos, fotos, mapas e jogos, a renderização na
área de corte pode ser uma ótima maneira de proporcionar uma experiência mais imersiva
de ponta a ponta para os usuários. Com LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
, o
conteúdo se estende para a área de corte na borda curta da tela nos modos
retrato e paisagem, independentemente de as barras do sistema estarem ocultas ou
visíveis. Ao usar esse modo, confira se nenhum conteúdo importante se sobrepõe
à área de corte.
A imagem abaixo é um exemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
para um dispositivo no modo retrato:
A imagem abaixo é um exemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
para um dispositivo no modo paisagem:
Nesse modo, a janela se estende por cortes na borda curta da tela nos modos retrato e paisagem, independente de a janela estar ocultando as barras do sistema.
Considera-se que há um corte no canto na borda curta:
Nunca renderize conteúdo na área de corte da tela
Com LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
, a janela nunca pode se sobrepor
à área de corte.
Confira abaixo um exemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
no
retrato:
Veja a seguir um exemplo de LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
no
modo paisagem:
Práticas recomendadas para a compatibilidade com corte de tela
Ao trabalhar com cortes de tela, considere o seguinte:
- Preste atenção no posicionamento dos elementos essenciais da interface. Não deixe a área de corte ocultar qualquer texto, controles ou outras informações importantes.
- Não coloque nem estenda elementos interativos que precisem de reconhecimento de toque na área de corte. A sensibilidade ao toque pode ser menor na área de corte.
Sempre que possível, use
WindowInsetsCompat
para recuperar a altura da barra de status e determinar o padding adequado a ser aplicado ao conteúdo. Evite fixar no código a altura da barra de status, porque isso pode resultar em sobreposição ou corte de conteúdo.Use
View.getLocationInWindow()
para determinar quanto espaço na janela seu app está usando. Não presuma que o app esteja usando a janela inteira e não utilizeView.getLocationOnScreen()
.Use os modos de corte
shortEdges
ounever
se o app precisar entrar e sair do modo imersivo. O comportamento de corte padrão pode fazer com que o conteúdo no app seja renderizado na área de corte enquanto as barras do sistema estiverem presentes, mas não no modo imersivo. Isso faz com que o conteúdo se mova para cima e para baixo durante as transições, conforme demonstrado no exemplo abaixo.No modo imersivo, tenha cuidado ao usar coordenadas de janela versus tela, já que o app não usa a tela inteira quando estiver com efeito letterbox. As coordenadas da origem da tela não são as mesmas da origem da janela devido ao efeito letterbox. Transforme as coordenadas da tela em coordenadas da visualização, conforme necessário, usando
getLocationOnScreen()
. A imagem abaixo mostra como as coordenadas diferem quando o conteúdo tem efeito letterbox:Ao processar
MotionEvent
, useMotionEvent.getX()
eMotionEvent.getY()
para evitar problemas de coordenadas semelhantes. Não useMotionEvent.getRawX()
ouMotionEvent.getRawY()
.
Testar como seu conteúdo é renderizado
Teste todas as telas e experiências do seu app. Teste em dispositivos com diferentes tipos de corte, se possível. 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:
- Ative as Opções do desenvolvedor.
- Na tela Opções do desenvolvedor, role para baixo até a seção Desenho e selecione Simular uma tela com recorte.
Selecione o tipo de corte.
Outros recursos
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER (em inglês)
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES (em inglês)