La barra di stato, la barra delle didascalie 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 punto.
Tieni sempre presente la presenza e la visibilità delle barre di sistema, sia che tu stia progettando layout, metodi di input o altre funzionalità del dispositivo.
Concetti principali
Includi le barre di sistema nei layout per diverse dimensioni dello schermo e fattori di forma. Tieni conto delle zone sicure dell'UI, delle interazioni di sistema, dei metodi di input, dei ritagli del display, delle barre di stato, delle barre delle didascalie, delle barre di navigazione e di altre funzionalità del dispositivo.
Mantieni le barre di stato e di navigazione del sistema trasparenti o traslucide e disegna i contenuti dietro queste barre per passare alla modalità edge-to-edge.
Utilizza
WindowInsetsper gestire correttamente le intrusioni delle barre di sistema e assicurarti che i contenuti non siano oscurati nei layout adattivi.Utilizza i layout canonici, che sfruttano in modo efficiente lo spazio sullo schermo.
Barra di stato
La barra di stato contiene le icone delle notifiche e le icone di sistema. L'utente interagisce con la barra di stato tirandola verso il basso per accedere all'area 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 saperne di più, consulta 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ò trattarsi dell'icona dell'app o del simbolo che rappresenta il canale. Consulta 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 si estendano su tutto lo 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, il che rende la barra di stato trasparente per impostazione predefinita. Chiama enableEdgeToEdge() per la compatibilità con le versioni precedenti.
Nell'immagine a sinistra riportata di seguito, la barra di stato è trasparente e lo sfondo verde di TopAppBar viene disegnato dietro la barra di stato.
Le barre di stato trasparenti sono ideali quando l'UI non viene visualizzata sotto la barra di stato o quando un'immagine viene disegnata sotto la barra di stato. Le barre di stato traslucide sono ideali quando l'UI scorre sotto la barra di stato. Per saperne di più sulla protezione dei gradienti , consulta Progettazione edge-to-edge.
Navigazione
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 passa alla schermata Home del dispositivo.
- Panoramica mostra le app attive e le app recenti non chiuse.
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 di gesti per l'accessibilità. 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. 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 schermi mobili e più grandi. Per offrire la migliore esperienza utente, tieni conto della navigazione tramite gesti procedendo nel seguente modo:
- Supporta i contenuti edge-to-edge.
- Evita di aggiungere interazioni o target di tocco sotto gli inset della navigazione tramite gesti.
Per saperne di più, consulta Aggiungere il supporto per la navigazione tramite gesti.
Navigazione adattiva
Un altro pattern di navigazione comune su Android consiste nel passare da una barra di navigazione laterale a una barra di navigazione in basso a seconda della classe di dimensioni della finestra del display. I componenti di navigazione adattiva in 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, valuta in che modo le barre di sistema potrebbero comportarsi o avere uno stile diverso in vari contesti, ad esempio dimensioni della finestra compatte o espanse o diverse posizioni dei dispositivi pieghevoli.
Per saperne di più, consulta Creare una navigazione adattiva.
Icone di navigazione
Le icone di navigazione possono anche apparire in modo diverso a seconda delle preferenze o dei temi impostati dall'utente. Per saperne di più, consulta Icone della barra di sistema.
Impostare uno stile di navigazione
Android gestisce la protezione visiva dell'interfaccia utente in modalità di navigazione tramite gesti e nelle modalità con pulsanti. Il sistema applica l'adattamento dinamico del colore, in cui i contenuti delle barre di sistema cambiano colore in base ai contenuti dietro di essi.
Modalità di navigazione tramite gesti
Dopo aver impostato come target Android 15 o aver chiamato enableEdgeToEdge sull'Activity, il sistema disegna una barra di navigazione tramite gesti trasparente e applica l'adattamento dinamico del colore. Nell'esempio seguente, l'handle nella barra di navigazione diventa di colore scuro se viene posizionato sopra contenuti chiari e viceversa.
Le barre di navigazione tramite gesti trasparenti sono sempre consigliate.
Cosa fare
Cosa non fare
Modalità con pulsanti
Dopo aver impostato come target Android 15 o aver chiamato enableEdgeToEdge sull'Activity, il sistema applica una schermata traslucida dietro le barre di navigazione con pulsanti, che puoi rimuovere impostando Window.setNavigationBarContrastEnforced() su false.
Utilizza barre di navigazione con tre pulsanti trasparenti quando è presente una barra dell'app in basso o una barra di navigazione dell'app in basso oppure quando l'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 il padding alle barre dell'app in basso per disegnarle 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 barra di navigazione con tre pulsanti traslucida per i contenuti scorrevoli. Per saperne di più sulle considerazioni relative alla barra di navigazione traslucida, consulta Progettazione 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.
Layout
I layout adattivi ottimizzano lo spazio di visualizzazione disponibile. Organizzano l'UI dell'app spostando i contenuti in riquadri secondari o terziari.
Quando progetti layout adattivi, tieni conto di come le barre di sistema interagiscono con i contenuti. Utilizza WindowInsets per assicurarti che l'UI non sia oscurata dalle barre di sistema su display come schermi grandi, dispositivi pieghevoli e finestre delle app in modalità multi-finestra e desktop.
Quando l'app viene visualizzata in modalità edge-to-edge, verifica che i contenuti e i controlli non siano oscurati dall'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 saperne di più, consulta Layout canonici.
Ritagli del display
Un ritaglio display è un'area su alcuni dispositivi che si estende nella superficie del display per fornire spazio per i sensori frontali. I ritagli del display possono variare a seconda del produttore. Valuta in che modo i ritagli del display interagiscono con i contenuti, l'orientamento e la modalità 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 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 Nascondere le barre di sistema per la modalità immersiva.