Design edge-to-edge

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

Figura 1. A sinistra. Un'app non edge-to-edge. Infatti, Un'app edge-to-edge.

Concetti principali

  • Disegna lo sfondo e i contenuti a scorrimento sotto le barre di sistema per un'esperienza edge-to-edge.
  • Evita di aggiungere gesti di tocco o target di trascinamento sotto gli inset di sistema, in quanto entrano in conflitto con la navigazione tramite gesti edge-to-edge.
Figura 2. Un'app con gli inserti dei gesti evidenziati in verde.

Disegna 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 le sovrapposizioni dei contenuti reagendo agli inset. Gli inserti descrivono quanto deve essere spaziato il contenuto della tua app per evitare sovrapposizioni con le barre di sistema o con le funzionalità del dispositivo fisico, come i ritagli display. Scopri come supportare l'edge-to-edge e gestire gli inset in Compose e Views.

Tieni presente i seguenti tipi di inset quando progetti casi d'uso edge-to-edge:

  • Gli inset della barra di sistema si applicano alla UI che è sia toccabile sia non deve essere oscurata visivamente dalle barre di sistema.
  • Gli inset dei gesti di sistema si applicano alle aree di navigazione tramite gesti utilizzate dal sistema operativo che hanno la priorità sulla tua app.
  • Gli inset di ritaglio display si applicano alle aree del dispositivo che si estendono nella superficie del display, come il ritaglio della fotocamera.

Considerazioni sulla barra di stato

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

Contenuti scorrevoli

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

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 mappa a gradiente 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 sembrino disordinate. Per farlo, innanzitutto crea una UI scorrevole edge-to-edge seguendo i passaggi descritti nella documentazione di LazyColumn o RecyclerView. Poi, assicurati che la barra di sistema sia traslucida procedendo in uno dei seguenti modi:

  • Se applicabile, affidati alla protezione automatica di TopAppBar di Material 3 durante lo scorrimento.
  • Crea un composable con gradiente personalizzato o utilizza GradientProtection per le visualizzazioni. Per saperne di più su come eseguire questa operazione in Compose, consulta Protezione della barra di sistema.
Figura 3. Un'app con gli inserti dei gesti evidenziati in verde.

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

Cosa non fare

Avere una protezione con gradiente che non corrisponde allo sfondo di ogni riquadro

Cosa fare

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

Allo stesso modo, anche i riquadri di navigazione a scomparsa devono avere una protezione separata dal resto dell'app.

Figura 4. Una barra di stato semitrasparente 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 sovrapporre le protezioni della barra di stato, ad esempio utilizzando sia la protezione integrata TopAppBar di Material 3 sia una protezione personalizzata.

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

Contenuti scorrevoli

[BottomAppBar][10] deve essere compressa durante lo scorrimento utilizzando il parametro scrollBehavior.

Cosa fare

Aggiungi un velo alla barra di sistema per la navigazione con tre pulsanti quando la barra delle app in basso scompare.

Cosa fare

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

Tuttavia, mantieni [NavigationBar]11 visibile durante lo scorrimento perché non ha un parametro scrollBehavior.

Ritaglio display

I ritagli 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 visualizzate sotto il ritaglio display.

Cosa fare

Inserisci la UI critica utilizzando gli inserti del ritaglio display.

Cosa non fare

Posizionare elementi UI critici sul bordo dello schermo.

Tuttavia, gli sfondi della barra dell'app a tinta unita devono essere disegnati nel ritaglio display, come mostrato nell'immagine seguente.

Figura 5. Gli sfondi delle barre delle app a tinta unita vengono disegnati nel ritaglio display, mentre la UI importante è inserita.

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 display in Compose.

Altre indicazioni

In generale, anche gli sfondi e le linee di separazione devono essere disegnati edge-to-edge, mentre i contenuti come testo e pulsanti devono essere inseriti in modo da evitare gli elementi dell'interfaccia utente di sistema e dell'hardware.