Design de ponta a ponta

Um app de borda a borda aproveita toda a tela ao exibir a interface abaixo das barras do sistema.

Figura 1. Esquerda Um app que não ocupa toda a tela. Direita. Um app que ocupa toda a tela.

Aprendizados

  • Desenhe o plano de fundo e o conteúdo de rolagem abaixo das barras do sistema para uma experiência de ponta a ponta.
  • Evite adicionar gestos de toque ou arrastar destinos em entalhes do sistema. Eles entram em conflito com a navegação de borda a borda e por gestos.
Figura 2. Um app com gestos inseridos em destaque em verde.

Desenhar o conteúdo atrás das barras do sistema

O recurso de ponta a ponta permite desenhar a interface abaixo das barras do sistema para uma experiência imersiva.

Um app pode resolver sobreposições no conteúdo reagindo a insets. Os insetos descrevem quanto o conteúdo do app precisa ser preenchido para evitar sobreposição com barras do sistema ou com recursos de dispositivos físicos, como cortes de tela. Leia sobre como oferecer suporte a tela cheia e processar encartes no Compose e Views.

Considere os seguintes tipos de engastes ao projetar casos de uso de borda a borda:

  • Os encartes da barra do sistema se aplicam à interface que pode ser pressionada e não pode ser visualmente obscurecida pelas barras do sistema.
  • Os insets de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo SO que têm prioridade sobre o app.
  • Os recortes de corte da tela se aplicam a áreas do dispositivo que se estendem para a superfície da tela, como o corte da câmera.

Considerações sobre a barra de status

Consulte as Barras do sistema Android para conferir orientações básicas de design de barras do sistema. A próxima seção discute outras considerações sobre a barra de status.

Como rolar conteúdo

As barras de apps na parte de cima precisam ser recolhidas durante a rolagem. Saiba como recolher a Material 3 TopAppBar.

O que fazer

Recolher a barra de apps superior para a altura da barra de status se ela estiver fixada.

O que fazer

Adicione um gradiente de cor de plano de fundo correspondente se a barra de apps de cima não for fixa.

As barras de status precisam ser translúcidas quando a interface rola por baixo, para que os ícones da barra de status não fiquem confusos. Para isso, primeiro crie uma interface rolável de ponta a ponta implementando as etapas na documentação da LazyColumn ou RecyclerView. Em seguida, verifique se a barra do sistema está translúcida fazendo uma das seguintes ações:

  • Use a proteção automática da TopAppBar do Material 3 ao rolar, se aplicável.
  • Crie um elemento combinável personalizado com 60% de alfa ou use a GradientProtection para visualizações.
Figura 3. Um app com gestos inseridos em destaque em verde.

Para layouts adaptáveis, verifique se há proteções separadas para painéis com cores de plano de fundo diferentes.

Não

Ter proteção de gradiente que não corresponde ao plano de fundo de cada painel

O que fazer

Ter proteção de gradiente que corresponda ao plano de fundo de cada painel.

Da mesma forma, as gavetas de navegação também precisam ter uma proteção separada do resto do app.

Figura 4. Uma barra de status translúcida para a gaveta de navegação. Esta imagem mostra a proteção da barra de status para a gaveta de navegação, mas não para o app.

Não empilhe proteções da barra de status, por exemplo, usando a proteção integrada TopAppBar do Material 3 e uma proteção personalizada.

Consulte as Barras do sistema Android para conferir orientações básicas de design da barra de navegação. A seção a seguir inclui outras considerações sobre a barra de navegação.

Como rolar conteúdo

As barras de apps inferiores precisam ser recolhidas durante a rolagem.

O que fazer

Adicionamos uma tela de proteção da barra do sistema para navegação com três botões quando a barra de apps inferior é animada.

O que fazer

Mantenha a navegação por gestos transparente e não adicione outra tela escura.

Corte da tela

Os recortes de tela podem afetar a aparência da interface. Os apps precisam processar recortes de tela para que partes importantes da interface não sejam exibidas abaixo do recorte de tela.

O que fazer

Insira a interface crítica usando recortes de tela.

Não

Coloque a interface crítica na borda da tela.

No entanto, os planos de fundo sólidos da barra de apps precisam ser renderizados no corte da tela, conforme mostrado na imagem a seguir.

Figura 5. Os planos de fundo sólidos da barra de apps são renderizados no corte da tela, enquanto a IU importante é inserida.

Os carrosséis horizontais são renderizados no corte da tela.

Figura 6. Uma tela horizontal de borda a borda, em que o carrossel rola pelo corte da tela.

Leia sobre como oferecer suporte a cortes de tela no Compose e nas visualizações.

Outras orientações

Em geral, os planos de fundo e as linhas divisórias também precisam ser exibidos de borda a borda, enquanto conteúdo como texto e botões precisam ser inseridos para evitar a interface do sistema e elementos de hardware.