La barra di stato, la barra delle scritte e la barra di navigazione sono chiamate insieme barre di sistema. Questi mostrano informazioni importanti come il livello della batteria, l'ora e gli avvisi di notifica e consentono di interagire direttamente con il dispositivo da qualsiasi luogo.
È fondamentale tenere conto dell'importanza delle barre di sistema, indipendentemente dal fatto che tu stia progettando l'interfaccia utente per le interazioni con il sistema operativo Android, i metodi di inserimento o altre funzionalità del dispositivo.
Concetti principali
Includi le barre di sistema quando progetti l'app. Tieni conto delle zone di sicurezza dell'interfaccia utente, delle interazioni con il sistema, dei metodi di inserimento, dei ritagli del display, delle barre di stato, delle barre dei sottotitoli codificati, delle barre di navigazione e di altre funzionalità del dispositivo.
Mantieni trasparenti o semitrasparenti le barre di stato e di navigazione del sistema e disegna i contenuti dietro queste barre per coprire l'intero schermo.
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 alla schermata delle notifiche. Gli stili della barra di stato possono essere trasparenti o semitrasparenti.
Icone della barra di stato
Le icone della barra di stato possono essere visualizzate in modo diverso a seconda del contesto, dell'ora del giorno, delle preferenze o dei temi impostati dall'utente e di altri parametri. Per ulteriori informazioni, consulta la sezione Icone della barra di sistema.
Quando arriva una notifica, nella barra di stato viene solitamente visualizzata un'icona. In questo modo, l'utente viene avvisato che c'è qualcosa da vedere nella schermata delle notifiche. Può essere l'icona o il simbolo della tua app per rappresentare il canale. Consulta Design delle notifiche.
Impostare lo stile della barra di stato
Rendi la barra di stato trasparente o traslucida per assicurarti che i contenuti dell'app occupino l'intero schermo. Quindi, imposta lo stile delle icone della barra di sistema in modo che abbiano un contrasto adeguato.
La modalità edge-to-edge viene applicata su Android 15 rendendo la barra di stato trasparente per impostazione predefinita. Chiama enableEdgeToEdge() per la compatibilità con le versioni precedenti.
Nell'immagine a sinistra seguente, la barra di stato è trasparente e lo sfondo verde diTopAppBar viene visualizzato dietro la barra di stato.
Le barre di stato trasparenti sono ideali quando l'interfaccia utente non viene visualizzata sotto la barra di stato o quando viene disegnata un'immagine sotto la barra di stato. Le barre di stato traslucide sono ideali quando l'interfaccia utente scorre sotto la barra di stato. Per saperne di più sulla protezione con gradiente, consulta Design edge-to-edge.
Barra di navigazione
Android consente agli utenti di controllare la navigazione utilizzando i controlli Indietro, Home e Panoramica:
- Il pulsante Indietro ti riporta direttamente alla visualizzazione precedente.
- La schermata Home esce dall'app e passa alla schermata Home del dispositivo.
- La scheda Panoramica mostra le app attive e le app recenti non chiuse.
Gli utenti possono scegliere tra varie configurazioni della barra di navigazione, tra cui la navigazione tramite gesti (consigliata) e la navigazione con tre pulsanti. Per offrire la migliore esperienza, tieni conto di più tipi di navigazione.
Navigazione tramite gesti
Ti consigliamo di utilizzare la navigazione con gesti, a meno che l'utente non scelga diversamente nelle sue preferenze. La navigazione tramite gesti non utilizza i pulsanti Indietro, Home e Riepilogo, ma mostra un'unica manopola per i gesti. Gli utenti interagiscono scorrendo dal bordo sinistro o destro dello schermo per tornare indietro e verso l'alto dalla parte inferiore per tornare alla schermata Home. Se scorri verso l'alto e tieni premuto, si apre la panoramica.
La navigazione tramite gesti è un pattern di navigazione più scalabile per la progettazione su dispositivi mobili e schermi più grandi. Per offrire la migliore esperienza utente, tieni conto della navigazione con gesti nel seguente modo:
- Supporto dei contenuti edge-to-edge.
- Evita di aggiungere interazioni o target di tocco sotto gli inserti di navigazione con gesti.
Per ulteriori informazioni, consulta Aggiungere il supporto della navigazione con i gesti.
Navigazione con tre pulsanti
La navigazione con tre pulsanti offre tre pulsanti per Indietro, Home e Panoramica.
Altre varianti della barra di navigazione
A seconda della versione di Android e del dispositivo, per gli utenti potrebbero essere disponibili altre configurazioni della barra di navigazione. La navigazione con due pulsanti, ad esempio, offre due pulsanti per Home e Indietro.
Icone della barra di navigazione
Le icone della barra di navigazione possono anche apparire in modo diverso a seconda delle preferenze o dei temi impostati dall'utente. Per ulteriori informazioni, consulta la sezione Icone della barra di sistema.
Impostare uno stile della barra di navigazione
Android gestisce la protezione visiva dell'interfaccia utente nella modalità di navigazione con gesti e nelle modalità dei pulsanti. Il sistema applica l'adattamento dinamico del colore, in cui i contenuti delle barre di sistema cambiano colore in base ai contenuti che si trovano dietro.
Modalità di navigazione tramite gesti
Dopo aver scelto come target Android 15 o aver chiamato enableEdgeToEdge su Activity, il sistema disegna una barra di navigazione tramite gesti trasparente e applica l'adattamento dinamico dei colori. Nell'esempio seguente, l'handle nella barra di navigazione diventa di colore scuro se è posizionato sopra i contenuti chiari e viceversa.
Le barre di navigazione con gesti trasparenti sono sempre consigliate.
Cosa fare
Cosa non fare
Modalità dei pulsanti
Dopo aver scelto come target Android 15 o aver chiamato enableEdgeToEdge su Activity, il sistema applica una maschera semitrasparente dietro le barre di navigazione dei pulsanti, che puoi rimuovere impostando Window.setNavigationBarContrastEnforced() su false.
Consigliamo barre di navigazione con tre pulsanti trasparenti quando è presente una barra di app o una barra di navigazione in basso oppure quando l'interfaccia utente non scorre sotto la barra di navigazione con tre pulsanti. Per ottenere una barra di navigazione trasparente, imposta Window.setNavigationBarContrastEnforced() su false e aumenta le barre delle app in basso in modo che vengano disegnate sotto le barre di navigazione di sistema, come mostrato nelle figure 7, 8 e 9. Per ulteriori informazioni, consulta la sezione Protezione della barra di sistema.
Utilizza un menu di navigazione traslucido con tre pulsanti per scorrere i contenuti. Per ulteriori informazioni sulle considerazioni relative alla barra di navigazione traslucida, consulta .
Tastiera e navigazione
Ogni tipo di navigazione reagisce in modo appropriato alla tastiera sullo schermo per consentire all'utente di eseguire azioni come ignorare o addirittura cambiare il tipo di tastiera. Per garantire una transizione fluida 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.
Ritagli del display
Un ritaglio del display è un'area su alcuni dispositivi che si estende nella superficie del display per fare spazio ai sensori anteriori. I ritagli del display possono variare in base al produttore. Valuta in che modo i ritagli del display interagiranno con contenuti, orientamento e visualizzazione da bordo a bordo.
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 dovrebbe comunque essere in grado di toccare per visualizzare le barre di sistema e navigare o interagire con i controlli di sistema. Scopri di più sulla progettazione per le modalità a schermo intero o su come nascondere le barre di sistema per la modalità immersiva.