Você pode fazer com que o app seja mostrado de borda a borda, usando toda a largura e altura da tela, desenhando atrás das barras do sistema. As barras do sistema são a barra de status e a barra de navegação.
Para implementar um layout de ponta a ponta, seu app precisa fazer o seguinte:
- Desenhe atrás da barra de navegação para ter uma experiência do usuário mais atraente e moderna.
- Desenhe atrás da barra de status se fizer sentido para seu conteúdo e layout,
como no caso de imagens de largura total. Para fazer isso, use APIs como
AppBarLayout
, que define uma barra de apps fixada na parte de cima da tela.
Para implementar um layout de ponta a ponta no app, siga estas etapas:
- Ative a exibição de ponta a ponta.
- Gerencie todas as sobreposições visuais.
Ative a exibição de ponta a ponta.
Para ativar a exibição de ponta a ponta no app, chame enableEdgeToEdge
no onCreate
do Activity
. Ela precisa ser chamada antes de setContentView
.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
Por padrão, enableEdgeToEdge
torna as barras do sistema transparentes, exceto no
modo de navegação de três botões, em que a barra de status recebe um scrim translúcido. As
cores dos ícones e do scrim do sistema são ajustadas com base no tema claro
ou escuro do sistema.
O método enableEdgeToEdge
declara automaticamente que o app precisa ser
disposto de borda a borda e ajusta as cores das barras do sistema. Consulte
Configurar manualmente a tela de ponta a ponta
se isso for necessário por algum motivo.
Processar sobreposições usando encartes
Depois de ativar a tela de ponta a ponta, algumas visualizações do app podem ser mostradas por trás das barras do sistema, como mostrado na Figura 3.
Você pode resolver as sobreposições reagindo aos encartes, que especificam quais partes da tela cruzam com a IU do sistema, como a barra de navegação ou a barra de status. Interseção pode significar a exibição acima do conteúdo, mas também pode informar seu app sobre gestos do sistema.
Os tipos de encartes que se aplicam à exibição do app de ponta a ponta são:
Encartes de barras de sistema:melhor para visualizações que são ajustáveis e que não podem ser visualmente obscurecidas pelas barras de sistema.
Encartes de gestos do sistema:para áreas de navegação por gestos usadas pelo sistema que têm prioridade sobre o app.
Encartes das barras de sistema
Os encartes de barra do sistema são os tipos mais comumente usados. Eles representam a área em que a interface do sistema é mostrada no eixo Z acima do app. Eles são mais usados para mover ou preencher visualizações no app que são tocáveis e não podem ser cobertas visualmente pelas barras do sistema.
Por exemplo, o botão de ação flutuante (FAB, na sigla em inglês) na Figura 3 está parcialmente obscuro pela barra de navegação:
Para evitar esse tipo de sobreposição visual no modo de gesto ou no modo de botão, aumente as margens da visualização usando
getInsets(int)
com
WindowInsetsCompat.Type.systemBars()
.
O exemplo de código abaixo mostra como implementar encartes da barra do sistema:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams>( leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, ) // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
Se você aplicar essa solução ao exemplo mostrado na Figura 3, não vai haver sobreposição visual no modo de botão, como mostrado na Figura 4:
O mesmo se aplica ao modo de navegação por gestos, conforme mostrado na Figura 5:
Encartes de gesto do sistema
Os encartes de gesto do sistema representam as áreas da janela em que os gestos do sistema têm prioridade sobre o app. Essas áreas são mostradas em laranja na Figura 6:
Assim como os encartes da barra do sistema, você pode evitar a sobreposição dos encartes de gesto do sistema
usando
getInsets(int)
com
WindowInsetsCompat.Type.systemGestures()
.
Use esses encartes para mover ou preencher as visualizações deslizantes para longe das bordas. Casos de uso
comuns incluem páginas na parte de baixo,
deslizar em jogos e carrosséis implementados usando
ViewPager2
.
No Android 10 ou versões mais recentes, os encartes de gesto do sistema contêm um encarte da parte de baixo para o gesto inicial e um encarte esquerdo e direito para os gestos de retorno:
O exemplo de código abaixo mostra como implementar encartes de gesto do sistema:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
Modo imersivo
Alguns conteúdos têm melhor experiência em tela cheia, proporcionando ao usuário uma
experiência mais imersiva. Você pode ocultar as barras do sistema e para o modo imersivo usando
as bibliotecas WindowInsetsController
e
WindowInsetsControllerCompat
:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
Java
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
Consulte Ocultar barras de sistema para o modo imersivo para ver mais informações sobre como implementar esse recurso.
Outros recursos
Consulte as referências abaixo para mais informações sobre WindowInsets
, a navegação
por gestos e como os encartes funcionam:
- WindowInsets: listeners para layouts (link em inglês)
- Navegação por gestos: encartes
- Como os encartes funcionam no Android?