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 offrono un'interazione diretta con il dispositivo ovunque.
È fondamentale tenere conto dell'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 in cima alla maggior parte dei livelli per assicurarti che vengano prese in considerazione.
Possessi guadagnati
Includi barre di sistema nei tuoi progetti per tenere conto di zone sicure dell'UI, interazioni di sistema, metodi di immissione, ritagli di visualizzazione e altre funzionalità del dispositivo. Mantieni le barre di sistema al livello più alto per assicurarti che vengano prese in considerazione.
Azione: rendi trasparenti le barre di sistema e disponi l'app a schermo intero, continuando l'UI sotto le barre per un'esperienza completa a livello perimetrale.
Se non riesci a 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 della barra di stato superiore con il colore del corpo.
Figura 2: assicurati che i colori della barra di sistema corrispondano a quello del corpo dell'app Evita di aggiungere gesti di tocco o di trascinare target sotto gli insiemi dei gesti, poiché ciò è in conflitto con la navigazione da bordo a bordo e con la navigazione tramite gesti.
Figura 3: riquadri di gesti di sistema. Evita di posizionare i target dei tocchi in queste aree
Disegna i tuoi contenuti dietro le barre di sistema
La funzionalità edge-to-edge consente ad Android di disegnare l'UI sotto le barre di sistema per un'esperienza più immersiva. Ti consigliamo di utilizzare la modalità Edge-to-edge perché, molto spesso, la barra di navigazione è una richiesta comune da parte degli utenti. (Leggi come supportare il edge-to-edge).
Un'app può risolvere le sovrapposizioni nei contenuti reagendo agli inserti. I riquadri descrivono la quantità di contenuti dell'app che devono essere riempiti per evitare sovrapposizioni con parti dell'interfaccia utente del sistema operativo Android, come la barra di navigazione o la barra di stato, oppure con funzionalità fisiche del dispositivo come ritagli dello schermo.
Tieni presente i seguenti tipi di inserti quando progetta per casi d'uso a livello perimetrale:
- Gli insiemi delle barre di sistema si applicano alle UI che è possibile toccare e che non devono essere visivamente oscurate dalle barre di sistema.
- Gli insiemi di gesti del 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 delle notifiche.
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 nei seguenti esempi.
Quando arriva una notifica, in genere viene visualizzata un'icona nella barra di stato. In questo modo segnala all'utente che c'è qualcosa da vedere nel riquadro a scomparsa delle notifiche. Può trattarsi dell'icona o del simbolo dell'app per rappresentare il canale. Vedi Design delle notifiche.
Impostare lo stile della barra di stato
Definisci lo sfondo della barra di stato come parte del tema dell'app con un colore o uno stile personalizzati 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, se vuoi puoi applicare uno stile ai contenuti della barra di stato come chiaro o scuro per ottimizzare il contrasto.
Mostra ritagli e barra di stato
Un ritaglio del display è un'area su alcuni dispositivi che si estende fino alla superficie del display per fare spazio ai sensori frontali. Può influire sull'aspetto delle barre di stato. I ritagli del display possono variare a seconda del produttore.
Leggi 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 casa esce dall'app e passa alla schermata Home del dispositivo.
- La panoramica mostra che le app sono aperte e sono state aperte di recente.
Gli utenti possono scegliere tra varie configurazioni della barra di navigazione, tra cui 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 consigliato, anche se non puoi sostituire la preferenza dell'utente. La navigazione tramite gesti non utilizza i pulsanti per Indietro, Home e Panoramica, ma mostra un singolo gesto per accedere all'offerta. Gli utenti interagiscono scorrendo dal bordo sinistro o destro dello schermo per andare avanti e indietro e dal basso verso l'alto per andare alla schermata Home. Se scorri verso l'alto e tieni premuto si apre la panoramica.
La navigazione tramite gesti è uno schema di navigazione più scalabile per la progettazione su schermi di dispositivi mobili e più grandi. Per offrire la migliore esperienza utente, tieni conto della navigazione tramite gesti:
- Supporto di contenuti edge-to-edge.
- Evita di aggiungere interazioni o touch target sotto gli insiemi della navigazione tramite gesti.
Leggi ulteriori informazioni 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 avere a disposizione altre configurazioni della barra di navigazione. Ad esempio, la navigazione con due pulsanti offre due pulsanti per andare alla schermata Home e quella per tornare indietro.
Imposta uno stile di navigazione
Nell'esempio seguente viene illustrato come implementare uno stile di navigazione.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android gestisce tutta la protezione visiva dell'interfaccia utente in modalità navigazione tramite gesti o pulsante.
Modalità di navigazione tramite gesti: il sistema applica l'adattamento dinamico del colore, in base al quale i contenuti delle barre di sistema cambiano colore in base ai contenuti sottostanti. Nell'esempio seguente, il punto di manipolazione nella barra di navigazione diventa scuro se è posizionato sopra i contenuti chiari e viceversa.
Figura 15: adattamento del colore dinamico Modalità pulsante: il sistema applica una griglia trasparente dietro le barre di sistema (per il livello API 29 o versioni successive) o una barra di sistema trasparente (per il livello API 28 o livelli precedenti).
Figura 16: adattamento dinamico del colore, in cui le barre di sistema cambiano colore in base ai contenuti sottostanti
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, utilizza WindowInsetsAnimationCompat 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.
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 l'interfaccia utente per 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.