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 non edge-to-edge. A destra. 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 target di trascinamento o gesti di tocco sotto gli inset di sistema, perché sono in conflitto con la navigazione edge-to-edge e con la navigazione tramite gesti.
Figura 2. Un'app con gli inset dei gesti evidenziati in verde.

Disegna i contenuti dietro le barre di sistema

La funzionalità edge-to-edge ti consente di disegnare l'interfaccia utente sotto le barre di sistema per un'esperienza coinvolgente.

Un'app può risolvere le sovrapposizioni di contenuti reagendo agli inset. Gli inset descrivono la quantità di spaziatura interna da aggiungere ai contenuti dell'app per evitare che si sovrappongano alle barre di sistema o alle funzionalità del dispositivo fisico, come i ritagli del 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:

  • Inset delle barre di sistema si applicano all'interfaccia utente toccabile e che non deve essere oscurata visivamente dalle barre di sistema.
  • Inset dei gesti di sistema si applicano alle aree di navigazione tramite gesti utilizzate dal sistema operativo che hanno la priorità rispetto alla tua app.
  • Inset dei ritagli 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 Android per le linee guida di progettazione fondamentali per le barre di sistema. La sezione seguente illustra ulteriori considerazioni sulla barra di stato.

Scorrimento dei contenuti

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 linee guida di Material.

Cosa fare

Comprimi la barra dell'app in alto piccola fino 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 l'interfaccia utente scorre sotto, in modo che le icone della barra di stato non appaiano disordinate. Per farlo, rendi innanzitutto un' interfaccia utente scorrevole edge-to-edge implementando i passaggi descritti nella documentazione di LazyColumn o RecyclerView. Poi, assicurati che la barra di sistema sia traslucida eseguendo una delle seguenti operazioni:

  • Se applicabile, fai affidamento sulla protezione automatica di TopAppBar di Material 3 durante lo scorrimento, .
  • Crea un componibile di sfumatura personalizzato o utilizza GradientProtection per Views. Per ulteriori informazioni su come eseguire questa operazione in Compose, consulta Protezione della barra di sistema.
Figura 3. Un'app con gli inset 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

Non utilizzare una protezione della sfumatura che non corrisponda allo sfondo di ogni riquadro.

Cosa fare

Utilizza una protezione della sfumatura che corrisponda allo sfondo di ogni riquadro.

Allo stesso modo, i riquadri di navigazione devono avere una protezione separata 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 TopAppBar di Material 3 sia una protezione personalizzata.

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

Scorrimento dei contenuti

Le barre dell'app in basso devono comprimersi durante lo scorrimento.

Cosa fare

Aggiungi una schermata di blocco della barra di sistema per la navigazione a tre pulsanti quando la barra dell'app in basso scompare con un'animazione.

Cosa fare

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

Ritagli del display

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

Cosa fare

Inserisci l'interfaccia utente critica utilizzando gli inset del ritaglio display.

Cosa non fare

Posizionare l'interfaccia utente critica sul bordo dello schermo.

Tuttavia, gli sfondi delle barre dell'app solidi devono essere disegnati nel ritaglio display, come mostrato nell'immagine seguente.

Figura 5. Gli sfondi delle barre dell'app solidi vengono disegnati nel ritaglio display, mentre l'interfaccia utente importante viene inserita.

Assicurati che i caroselli orizzontali vengano disegnati 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 e Views.

Altre linee guida

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