La barra di stato, la barra dei sottotitoli codificati 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 consentono l'interazione diretta con il dispositivo da qualsiasi luogo.
È fondamentale tenere conto della visibilità delle barre di sistema, sia che tu stia progettando l'interfaccia utente per le interazioni con il sistema operativo Android, i metodi di input o altre funzionalità del dispositivo.
Concetti principali
Includi le barre di sistema durante la progettazione dell'app. Tieni conto delle zone sicure dell'interfaccia utente, delle interazioni di sistema, dei metodi di input, dei ritagli del display, delle barre di stato, delle barre dei sottotitoli codificati, delle barre di navigazione e di altre funzionalità del dispositivo.
Mantieni le barre di stato e di navigazione trasparenti o traslucide e disegna i contenuti dietro queste barre per andare da bordo a bordo.
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 tendina delle notifiche. Gli stili della barra di stato possono essere trasparenti o traslucidi.
Icone della barra di stato
Le icone della barra di stato possono apparire 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, vedi Icone della barra di sistema.
Quando arriva una notifica, in genere viene visualizzata un'icona nella barra di stato. In questo modo l'utente sa che c'è qualcosa da vedere nel riquadro delle notifiche. Può essere l'icona o il simbolo dell'app per rappresentare il canale. Vedi Progettazione delle notifiche.
Impostare lo stile della barra di stato
Rendi la barra di stato trasparente o traslucida per assicurarti che i contenuti dell'app coprano l'intero schermo. Poi, imposta lo stile delle icone della barra di sistema in modo che abbiano un contrasto adeguato.
La modalità edge-to-edge è applicata su Android 15, rendendo la barra di stato trasparente per
impostazione predefinita. Chiama il numero enableEdgeToEdge() per la compatibilità con le versioni precedenti.
Nell'immagine seguente a sinistra, la barra di stato è trasparente e lo sfondo verde di
TopAppBar si estende dietro la barra di stato.
Le barre di stato trasparenti sono ideali quando la UI non viene visualizzata sotto la barra di stato o quando un'immagine viene visualizzata sotto la barra di stato. Le barre di stato traslucide sono ideali quando la UI scorre sotto la barra di stato. Per saperne di più sulla protezione del gradiente, consulta Design edge-to-edge.
Barra di navigazione
Android consente agli utenti di controllare la navigazione utilizzando i controlli Indietro, Home e Panoramica:
- Indietro torna direttamente alla visualizzazione precedente.
- Home esce dall'app e va alla schermata Home del dispositivo.
- La panoramica mostra le app attive e quelle 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
La navigazione tramite gesti non utilizza i pulsanti per tornare indietro, andare alla schermata Home e visualizzare la panoramica, ma mostra una sola maniglia per i gesti. Gli utenti interagiscono scorrendo dal bordo sinistro o destro dello schermo per tornare indietro e verso l'alto dal basso per andare 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 tramite gesti facendo quanto segue:
- Supporto dei contenuti edge-to-edge.
- Evita di aggiungere interazioni o target tocco sotto gli inset della navigazione tramite gesti.
Per maggiori informazioni, vedi Aggiungere il supporto 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, potrebbero essere disponibili altre configurazioni della barra di navigazione per gli utenti. La navigazione con due pulsanti, ad esempio, fornisce due pulsanti per la schermata Home e per tornare 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 per la barra di navigazione
Android gestisce la protezione visiva dell'interfaccia utente in modalità di navigazione tramite gesti e nelle modalità dei pulsanti. Il sistema applica l'adattamento dinamico del colore, in cui il colore dei contenuti delle barre di sistema cambia in base ai contenuti dietro di loro.
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 del colore. Nell'esempio seguente, il cursore nella barra di navigazione cambia
in un colore scuro se viene posizionato sopra contenuti chiari e viceversa.
Le barre di navigazione con i gesti trasparenti sono sempre consigliate.
Cosa fare
Cosa non fare
Modalità pulsante
Dopo aver scelto come target Android 15 o aver chiamato enableEdgeToEdge su Activity, il
sistema applica una protezione traslucida dietro le barre di navigazione con pulsanti, che puoi
rimuovere impostando Window.setNavigationBarContrastEnforced() su false.
Consigliamo barre di navigazione trasparenti con tre pulsanti quando è presente una barra delle app in basso o una barra di navigazione delle app in basso oppure quando la UI non scorre sotto la barra di navigazione con tre pulsanti. Per ottenere una barra di navigazione trasparente, imposta
Window.setNavigationBarContrastEnforced() su false e aggiungi un padding alle barre delle app in basso per
disegnare sotto le barre di navigazione del sistema, come mostrato nelle figure 7, 8 e 9. Per saperne di più, consulta
Protezione della barra di sistema.
Utilizza una navigazione traslucida a tre pulsanti per scorrere i contenuti. Per saperne di più sulle considerazioni relative alla barra di navigazione traslucida, vedi Design edge-to-edge.
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 cambiare il
tipo di tastiera. Per garantire una transizione fluida che sincronizzi la transizione dell'app con lo scorrimento della tastiera verso l'alto e verso il basso dalla parte inferiore dello schermo, utilizza WindowInsetsAnimationCompat.
Ritagli display
Un ritaglio del display è un'area su alcuni dispositivi che si estende nella superficie del display per fornire spazio ai sensori frontali. I ritagli del display possono variare a seconda del produttore. Considera in che modo i ritagli del display interagiranno con contenuti, orientamento e visualizzazione edge-to-edge.
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 leggi come nascondere le barre di sistema per la modalità immersiva.