Design edge-to-edge

Un'app edge-to-edge sfrutta l'intero schermo disegnando l'interfaccia utente sotto le barre di sistema.

Figura 1. A sinistra. Un'app che non è da bordo a bordo. Infatti, Un'app edge-to-edge.

Concetti principali

  • Disegna lo sfondo e scorri i contenuti sotto le barre di sistema per un'esperienza edge-to-edge.
  • Evita di aggiungere tocchi o trascinamenti sotto gli inset di sistema, in quanto sono in conflitto con la navigazione tramite gesti e da bordo a bordo.
Figura 2. Un'app con i rientri dei gesti evidenziati in verde.

Disegnare i contenuti dietro le barre di sistema

La funzionalità edge-to-edge ti consente di disegnare la UI sotto le barre di sistema per un'esperienza immersiva.

Un'app può risolvere i problemi di sovrapposizione dei contenuti reagendo agli inserti. Gli inset descrivono la quantità di spazio interno che deve essere aggiunto ai contenuti della tua app per evitare sovrapposizioni con le barre di sistema o con le funzionalità del dispositivo fisico, come i ritagli del display. Scopri come supportare edge-to-edge e gestire gli inset in Compose e Views.

Quando progetti casi d'uso edge-to-edge, tieni presente i seguenti tipi di rientri:

  • Gli inset della barra di sistema si applicano all'interfaccia utente che è sia toccabile sia non deve essere oscurata visivamente dalle barre di sistema.
  • Gli inset di sistema per i gesti si applicano alle aree di navigazione tramite gesti utilizzate dal sistema operativo che hanno la priorità sulla tua app.
  • Gli inset del ritaglio display si applicano alle aree del dispositivo che si estendono nella superficie del display, ad esempio il ritaglio della fotocamera.

Considerazioni sulla barra di stato

Consulta le Barre di sistema di Android per le linee guida fondamentali per la progettazione delle barre di sistema. La sezione seguente illustra ulteriori considerazioni sulla barra di stato.

Contenuti scorrevoli

Le barre dell'app in alto devono comprimersi durante lo scorrimento. Scopri come comprimere la TopAppBar di Material 3. In Material 3, le barre dell'app in alto piccole possono comprimersi fino all'altezza della barra di stato o scorrere fuori dallo schermo. Le barre dell'app in alto medie e grandi possono comprimersi in una barra dell'app più piccola. Consulta le indicazioni sui materiali.

Cosa fare

Comprimi la barra dell'app in alto piccola all'altezza della barra di stato se la barra dell'app è fissa.

Cosa fare

Aggiungi una sfumatura di colore di sfondo corrispondente se la barra dell'app in alto piccola non è fissa.

Le barre di stato devono essere traslucide quando la UI scorre sotto, in modo che le icone della barra di stato non appaiano disordinate. Per farlo, crea prima un'interfaccia utente scorrevole edge-to-edge implementando i passaggi descritti nella documentazione di LazyColumn o RecyclerView. Dopodiché, assicurati che la barra di sistema sia traslucida in uno dei seguenti modi:

  • Affidati alla protezione automatica della TopAppBar di Material 3 durante lo scorrimento, se applicabile.
  • Crea un elemento componibile sfumato personalizzato. Per saperne di più, consulta Protezione della barra di sistema.
Figura 3. Un'app con i rientri dei gesti evidenziati in verde.

Per i layout adattivi, assicurati che siano presenti protezioni separate per i riquadri con colori di sfondo diversi.

Non

Avere una protezione del gradiente che non corrisponda allo sfondo di ogni riquadro

Cosa fare

Avere una protezione del gradiente che corrisponda allo sfondo di ogni riquadro.

Allo stesso modo, anche i riquadri di navigazione devono essere protetti separatamente dal resto dell'app.

Figura 4. Una barra di stato traslucida per il riquadro di navigazione a scomparsa. Questa immagine mostra la protezione della barra di stato per il riquadro di navigazione a scomparsa, ma non per l'app.

Non impilare le protezioni della barra di stato, ad esempio utilizzando sia la protezione integrata di Material 3 TopAppBar sia una protezione personalizzata.

Consulta la sezione Barre di sistema Android per le linee guida fondamentali per la progettazione della barra di navigazione. La sezione seguente include ulteriori considerazioni sulla barra di navigazione.

Contenuti scorrevoli

Le barre delle app in basso devono comprimersi durante lo scorrimento.

Cosa fare

Aggiungi una protezione della barra di sistema per la navigazione con tre pulsanti quando la barra delle app inferiore scompare con un'animazione.

Cosa fare

Mantieni la navigazione tramite gesti trasparente e non aggiungere un'ulteriore schermata.

Ritagli del display

I ritagli del display possono influire sull'aspetto della UI. Le app devono gestire gli inset del ritaglio display in modo che le parti importanti della UI non vengano disegnate sotto il ritaglio display.

Cosa fare

Inserisci la UI critica utilizzando gli inset del ritaglio display.

Non

Posiziona la UI critica sul bordo dello schermo.

Tuttavia, gli sfondi della barra delle app a tinta unita devono estendersi fino al ritaglio display, come mostrato nell'immagine seguente.

Figura 5. Gli sfondi della barra delle app solidi vengono visualizzati nel ritaglio display, mentre l'interfaccia utente importante è rientrata.

Assicurati che i caroselli orizzontali vengano visualizzati nel ritaglio display.

Figura 6. Un display orizzontale edge-to-edge, in cui il carosello scorre attraverso il ritaglio display.

Scopri come supportare i ritagli del display in Compose.

Altre indicazioni

In generale, anche gli sfondi e le linee di divisione devono essere disegnati da bordo a bordo, mentre i contenuti come testo e pulsanti devono essere inseriti per evitare l'interfaccia utente del sistema e gli elementi hardware.