Insieme, la barra di stato e la barra di navigazione sono chiamate barre di sistema. Mostrano informazioni importanti, come il livello della batteria, l'ora e gli avvisi di notifica, e forniscono un'interazione diretta con il dispositivo da qualsiasi luogo.
È fondamentale prendere in considerazione l'evidenza delle barre di sistema, indipendentemente dal fatto che tu stia progettando l'UI per le interazioni con il sistema operativo Android, i metodi di immissione o altre funzionalità del dispositivo. Mantieni le barre di sistema nella parte superiore della maggior parte dei livelli per assicurarti che vengano prese in considerazione.
Possessi guadagnati
Includi barre di sistema nei tuoi progetti per tenere conto delle zone sicure dell'UI, delle interazioni di sistema, dei metodi di immissione, dei ritagli dello schermo e di altre funzionalità del dispositivo. Mantenere le barre di sistema nel livello più alto garantisce che vengano prese in considerazione.
Azione: rendi trasparenti le barre di sistema e disponi l'app a schermo intero, continuando la UI sotto le barre per offrire un'esperienza edge-to-edge.
Se non puoi impostare entrambe le barre in modo che siano trasparenti, assicurati che i colori delle barre corrispondano al colore del corpo dell'app. Ad esempio, associa il colore della barra di navigazione inferiore al colore della barra dei gesti e il colore superiore della barra di stato al colore del corpo.
Figura 2: assicurati che i colori della barra di sistema corrispondano al colore del corpo dell'app Evita di aggiungere gesti di tocco o di trascinamento dei target sotto i riquadri dei gesti, in quanto sono in conflitto con la navigazione edge-to-edge e tramite gesti.
Figura 3: riquadri di gesti di sistema. Evita di posizionare i target dei tocchi in queste aree.
Traccia i contenuti dietro le barre di sistema
La funzionalità edge-to-edge consente ad Android di tracciare la UI sotto le barre di sistema per un'esperienza più immersiva. Ti consigliamo di utilizzare edge-to-edge perché rendere la barra di navigazione trasparente è una richiesta comune degli utenti. (scopri come supportare la funzionalità edge-to-edge).
Un'app può risolvere le sovrapposizioni nei contenuti reagendo agli insiemi. I riquadri descrivono il livello di riempimento dei contenuti dell'app per evitare la sovrapposizione con parti della UI del sistema operativo Android, come la barra di navigazione o la barra di stato, oppure con funzionalità fisiche del dispositivo come i ritagli del display.
Durante la progettazione per casi d'uso edge-to-edge, considera i seguenti tipi di riquadri:
- I insiemi delle barre di sistema si applicano all'UI che può essere toccata e che non deve essere oscurata visivamente dalle barre di sistema.
- I insiemi di gesti di sistema si applicano alle aree di navigazione tramite gesti utilizzate dal sistema che hanno la priorità sulla tua app.
Barra di stato
Su Android, la barra di stato contiene icone di notifica e icone di sistema. L'utente interagisce con la barra di stato trascinandola verso il basso per accedere all'area di notifica.
La barra di stato può avere un aspetto diverso a seconda del contesto, dell'ora del giorno, delle preferenze o dei temi impostati dall'utente e di altri parametri. Puoi anche impostare lo stile della barra di stato, come negli esempi seguenti.
Ora che i contenuti dell'app si estendono sull'intero schermo, ora è necessario usare la tecnologia edge-to-edge. Utilizza barre di sistema trasparenti con contenuti edge-to-edge, come mostrato nell'esempio seguente.
Quando arriva una notifica, solitamente viene visualizzata un'icona nella barra di stato. Questo indica all'utente che c'è qualcosa da vedere nel riquadro a scomparsa delle notifiche. Può trattarsi dell'icona o del simbolo dell'app che rappresenta il canale. Vedi Design delle notifiche.
Impostare lo stile della barra di stato
Specifica uno stile o un colore personalizzato per lo sfondo della barra di stato come parte del tema della tua app e imposta trasparenza e opacità.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Se imposti manualmente il colore di sfondo, puoi facoltativamente definire i contenuti della barra di stato come chiari o scuri per un contrasto ottimale.
Mostra ritagli e barra di stato
Su alcuni dispositivi, un ritaglio display è un'area che si estende sulla superficie del display per fornire spazio per i sensori frontali. Può influire sull'aspetto delle barre di stato. I ritagli del display possono variare in base al produttore.
Scopri come supportare i ritagli del display.
Barra di navigazione
Android consente agli utenti di controllare la navigazione utilizzando i controlli Indietro, Home e Panoramica:
- Indietro consente di tornare direttamente alla visualizzazione precedente.
- La schermata Home viene trasferita dall'app alla schermata Home del dispositivo.
- La pagina Panoramica mostra che le app sono aperte e di recente.
Gli utenti possono scegliere tra varie configurazioni della barra di navigazione, inclusa la navigazione tramite gesti (consigliata) e la navigazione con tre pulsanti.
Navigazione tramite gesti
Introdotta in Android 10 (livello API 29), la navigazione tramite gesti è il tipo di navigazione consigliato, anche se non puoi ignorare la preferenza dell'utente. La navigazione tramite gesti non utilizza i pulsanti Indietro, Home e Panoramica, ma mostra un singolo punto di manipolazione del gesto per l'invito. Gli utenti interagiscono scorrendo dal bordo sinistro o destro dello schermo per andare avanti e indietro e andare avanti e indietro dal basso per andare alla schermata Home. Scorrendo verso l'alto e tenendo premuto si apre la panoramica.
La navigazione tramite gesti è un modello di navigazione più scalabile per la progettazione su dispositivi mobili e schermi più grandi. Per offrire la migliore esperienza utente, considera la navigazione tramite gesti:
- Supporto di contenuti edge-to-edge.
- Evita di aggiungere interazioni o touch target sotto i riquadri di navigazione tramite gesti.
Scopri di più sull'implementazione della navigazione tramite gesti.
Navigazione con tre pulsanti
La navigazione con tre pulsanti fornisce tre pulsanti per Indietro, Home e Panoramica.
Altre varianti della barra di navigazione
A seconda della versione di Android e del dispositivo, gli utenti potrebbero essere disponibili altre configurazioni della barra di navigazione. La navigazione con due pulsanti, ad esempio, fornisce due pulsanti per Home e Indietro.
Impostare uno stile di navigazione
L'esempio seguente mostra come implementare uno stile di navigazione.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android gestisce tutte le protezioni visive dell'interfaccia utente in modalità di navigazione tramite gesti o nelle modalità con pulsanti.
Modalità di navigazione tramite gesti: il sistema applica l'adattamento dinamico del colore, in cui i contenuti delle barre di sistema cambiano colore in base a quelli dietro le barre. Nell'esempio seguente, il punto di manipolazione nella barra di navigazione assume un colore scuro se viene posizionato sopra contenuti chiari e viceversa.
Figura 13: adattamento dinamico del colore Modalità dei pulsanti: il sistema applica una striscia traslucida dietro le barre di sistema (per il livello API 29 o versioni successive) o una barra di sistema trasparente (per il livello 28 o versioni precedenti).
Figura 14: adattamento dinamico del colore, in cui le barre di sistema cambiano il colore in base ai contenuti alle loro spalle
Tastiera e navigazione
Ogni tipo di navigazione reagisce in modo appropriato alla tastiera sullo schermo per
consentire all'utente di eseguire azioni come chiudere o persino modificare
il tipo di tastiera. Per garantire una transizione fluida dalla tastiera, per garantire una transizione
senza problemi che sincronizzi la transizione dell'app con la tastiera che scorre
verso l'alto e verso il basso dalla parte inferiore dello schermo, utilizza
WindowInsetsAnimationCompat.
Modalità immersiva
Puoi nascondere le barre di sistema quando hai bisogno di un'esperienza a schermo intero, ad esempio quando l'utente sta guardando un film. L'utente deve essere comunque in grado di toccare per mostrare le barre di sistema e l'UI al fine di navigare o interagire con i controlli di sistema. Scopri di più sulla progettazione per le modalità a schermo intero o leggi come nascondere le barre di sistema per la modalità immersiva.