Design edge-to-edge

Un'app edge-to-edge sfrutta l'intero schermo disegnando l'UI 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.

Disegnare i contenuti dietro le barre di sistema

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

Un'app può risolvere le sovrapposizioni nei contenuti reagendo agli inset. Gli inset descrivono la quantità di spaziatura interna da aggiungere ai contenuti dell'app per evitare la sovrapposizione con le barre di sistema o con le 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:

  • Gli inset delle barre di sistema si applicano all'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 dei ritagli del 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 di progettazione fondamentali per le barre di sistema. La sezione seguente illustra ulteriori considerazioni sulla barra di stato.

Scorrere i contenuti

Le barre dell'app in alto devono comprimersi durante lo scorrimento. Scopri come comprimere la barra dell'app in alto 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'UI scorre sotto, in modo che le icone della barra di stato non appaiano disordinate. Per farlo, rendi innanzitutto un' UI 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 della barra dell'app in alto Material 3 quando scorri, .
  • Crea un componibile di sfumatura personalizzato o utilizza GradientProtection per le visualizzazioni. 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 della barra dell'app in alto Material 3 sia una protezione personalizzata.

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

Scorrere i 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'UI. Le app devono gestire gli inset dei ritagli display in modo che le parti importanti dell'UI non vengano disegnate sotto il ritaglio display.

Cosa fare

Inserisci l'UI critica utilizzando gli inset dei ritagli display.

Cosa non fare

Non posizionare l'UI 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'UI 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'UI di sistema e gli elementi hardware.