Barre di sistema Android

La barra di stato, la barra del titolo e la barra di navigazione sono le barre di sistema. Mostrano informazioni importanti come il livello batteria, l'ora e gli avvisi di notifica e consentono l'interazione diretta con il dispositivo da qualsiasi luogo.

Tieni sempre conto della presenza e della visibilità delle barre di sistema, sia che tu stia progettando layout, metodi di immissione o altre funzionalità del dispositivo.

Figura 1. Immagini dietro le barre di sistema.

Concetti principali

  • Includi le barre di sistema nei layout per schermi di diverse dimensioni e fattori di forma. Tieni conto delle zone sicure della UI, delle interazioni di sistema, dei metodi di immissione, dei ritagli del display, delle barre di stato, delle barre dei sottotitoli, delle barre di navigazione e di altre funzionalità del dispositivo.

  • Mantieni le barre di stato e di navigazione del sistema trasparenti o semitrasparenti e disegna i contenuti dietro queste barre per visualizzarli edge-to-edge.

  • Utilizza WindowInsets per gestire correttamente le intrusioni della barra di sistema e assicurarti che i tuoi contenuti non siano oscurati nei layout adattivi.

  • Utilizza i layout canonici, che sfruttano lo spazio sullo schermo in modo efficiente.

Barra di stato

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 notifiche. Gli stili della barra di stato possono essere trasparenti o semitrasparenti.

Figura 2. Area della barra di stato evidenziata sopra la barra dell'app in alto.

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, consulta Icone della barra di sistema.

Figura 3. Icone della barra di stato nel tema chiaro e scuro.

Quando arriva una notifica, di solito viene visualizzata un'icona nella barra di stato. In questo modo, l'utente capisce che c'è qualcosa da vedere nel riquadro a scomparsa delle notifiche. Può essere l'icona o il simbolo della tua app per rappresentare il canale. Consulta la sezione Design delle notifiche.

Figura 4. Icona di notifica nella barra di stato.

Imposta lo stile della barra di stato

Rendi la barra di stato trasparente o semitrasparente per assicurarti che i contenuti dell'app occupino 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 enableEdgeToEdge() per la compatibilità con le versioni precedenti.

Nell'immagine a sinistra di seguito, la barra di stato è trasparente e lo sfondo verde di TopAppBar viene disegnato dietro la barra di stato.

Figura 5. Sfrutta l'intero schermo per migliorare i tuoi contenuti. Non utilizzare barre di sistema opache.

Le barre di stato trasparenti sono ideali quando la UI non viene visualizzata sotto la barra di stato o un'immagine viene disegnata 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 dei gradienti, consulta Design edge-to-edge.

Figura 6. Un'app edge-to-edge con protezione con gradiente a due tonalità che si estende su due riquadri dietro la barra di stato del sistema.

Android consente agli utenti di controllare la navigazione utilizzando i controlli Indietro, Home e Panoramica:

  • Indietro: torna alla visualizzazione precedente.
  • Home: esce dall'app e torna alla schermata Home del dispositivo.
  • La schermata Panoramica mostra le app attive e le app recenti non ignorate.

Gli utenti possono scegliere tra varie configurazioni di navigazione, tra cui la navigazione tramite gesti e la navigazione adattiva. Per offrire un'esperienza utente ottimale, tieni conto di più tipi di navigazione.

Navigazione tramite gesti

La navigazione tramite gesti non utilizza i pulsanti Indietro, Home e Panoramica, ma mostra un unico handle dei gesti per l'affordance. Gli utenti interagiscono scorrendo dal bordo sinistro o destro dello schermo per tornare indietro e dal basso verso l'alto per tornare alla schermata Home. Scorrendo verso l'alto e tenendo 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 seguendo questi passaggi:

  • Supporto dei contenuti edge-to-edge.
  • Evita di aggiungere interazioni o target di tocco sotto gli inserti di navigazione tramite gesti.

Per saperne di più, consulta Aggiungi il supporto per la navigazione tramite gesti.

Figura 7. Barra di navigazione con linea di navigazione.

Navigazione adattiva

Un altro pattern di navigazione comune su Android è il passaggio da una barra di navigazione laterale a una barra di navigazione a seconda della classe di dimensioni della finestra del display. I componenti di navigazione adattiva di Jetpack Compose gestiscono più fattori di forma, impedendo al contempo alle barre di sistema di interferire con il layout dei componenti di navigazione.

Nei layout adattivi, considera come le barre di sistema potrebbero comportarsi o avere uno stile diverso in vari contesti, ad esempio dimensioni delle finestre compatte o espanse o diverse posizioni dei pieghevoli.

Per saperne di più, consulta Crea una navigazione adattiva.

Anche le icone di navigazione possono apparire in modo diverso a seconda delle preferenze o dei temi impostati dall'utente. Per ulteriori informazioni, consulta Icone della barra di sistema.

Imposta uno stile di navigazione

Android gestisce la protezione visiva dell'interfaccia utente nella modalità di navigazione tramite gesti e nelle modalità dei pulsanti. Il sistema applica l'adattamento dinamico dei colori, in cui i contenuti delle barre di sistema cambiano colore 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 dei colori. Nell'esempio seguente, l'handle nella barra di navigazione diventa di colore scuro se viene posizionato sopra contenuti chiari e viceversa.

Figura 8. Adattamento dinamico del colore.

Le barre di navigazione tramite gesti trasparenti sono sempre consigliate.

Cosa fare

Mantieni trasparente la barra di navigazione tramite gesti.

Cosa non fare

Aggiungi uno sfondo alla barra di navigazione tramite gesti.

Modalità dei pulsanti

Dopo aver scelto Android 15 come target o aver chiamato enableEdgeToEdge su Activity, il sistema applica uno scrim traslucido dietro le barre di navigazione con pulsanti, che puoi rimuovere impostando Window.setNavigationBarContrastEnforced() su false.

Figura 9. Adattamento dinamico dei colori, con un velo trasparente.

Utilizza barre di navigazione a tre pulsanti trasparenti 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 a tre pulsanti. Per ottenere una barra di navigazione trasparente, imposta Window.setNavigationBarContrastEnforced() su false e aggiungi spaziatura interna alle barre delle app in basso per disegnare sotto le barre di navigazione di sistema, come mostrato nelle figure 7, 8 e 9. Per saperne di più, consulta Protezione della barra di sistema.

Utilizza una barra di navigazione a tre pulsanti traslucida per scorrere i contenuti. Per ulteriori informazioni sulle considerazioni relative alla barra di navigazione traslucida, consulta Design edge-to-edge.

Tastiera e navigazione

Figura 10. Tastiera sullo schermo con barre di 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 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.

Layout

I layout adattivi ottimizzano lo spazio di visualizzazione disponibile. Organizzano la UI dell'app spostando i contenuti in riquadri secondari o terziari.

Quando progetti layout adattivi, considera il modo in cui le barre di sistema interagiscono con i tuoi contenuti. Utilizza WindowInsets per assicurarti che la UI non sia oscurata dalle barre di sistema su display come schermi di grandi dimensioni, pieghevoli e finestre delle app in modalità multi-finestra e finestre delle app.

Quando l'app viene visualizzata edge-to-edge, verifica che i contenuti e i controlli non siano oscurati dalla UI di sistema. Se, ad esempio, la barra di navigazione copre un pulsante, l'utente potrebbe non essere in grado di fare clic sul pulsante.

Per ulteriori informazioni, consulta la sezione Layout canonici.

Ritaglio display

Un ritaglio display è un'area su alcuni dispositivi che si estende nella superficie del display per fornire spazio ai sensori anteriori. I ritagli display possono variare a seconda del produttore. Considera l'interazione dei ritagli display con i contenuti, l'orientamento e la modalità edge-to-edge.

Figura 11. Esempi di ritagli display.

Modalità immersiva

Figura 12. Modalità immersiva che mostra un'esperienza a schermo intero su un dispositivo mobile con orientamento orizzontale.

Puoi nascondere le barre di sistema quando hai bisogno di un'esperienza a schermo intero, ad esempio quando l'utente guarda un film. L'utente deve comunque essere in grado di toccare per visualizzare le barre di sistema e navigare o interagire con i controlli di sistema. Per saperne di più, consulta Contenuti immersivi e Nascondi le barre di sistema per la modalità immersiva.