Barre di sistema Android

Insieme, la barra di stato e la barra di navigazione sono chiamate barre di sistema. Mostrano informazioni importanti, ad esempio il livello della batteria, l'ora e avvisi di notifica e interagire direttamente con il dispositivo ovunque si trovino.

È fondamentale prendere in considerazione l'evidenza delle barre di sistema, che tu stia progettazione dell'interfaccia utente per le interazioni con il sistema operativo Android, i metodi di immissione o altri funzionalità del dispositivo. Mantenere le barre di sistema in cima alla maggior parte dei livelli per garantire sono rappresentati.

Figura 1: immagini dietro le barre di sistema

Concetti principali

  • Includi barre di sistema nei progetti per tenere conto delle zone sicure dell'UI, interazioni, metodi di inserimento, ritagli dello schermo e altre funzionalità del dispositivo. Mantenere le barre di sistema nel livello più alto garantisce che vengano prese in considerazione.

  • Rendi trasparenti le barre di sistema e visualizza l'app a schermo intero, continuando con la UI sotto le barre per offrire un'esperienza edge-to-edge.

  • Evita di aggiungere gesti di tocco o di trascinare target sotto i riquadri dei gesti. questi elementi conflitto con la navigazione edge-to-edge e tramite gesti.

    Figura 2: riquadri di gesti di sistema. Evita di posizionare il tocco target in queste aree
    .

Traccia i contenuti dietro le barre di sistema

La funzionalità edge-to-edge consente ad Android di disegnare l'UI sotto le barre di sistema per per un'esperienza più immersiva. Consigliamo di usare edge-to-edge perché Spesso gli utenti chiedono più che la barra di navigazione sia trasparente. (scopri come supporta la modalità edge-to-edge).

Un'app può risolvere le sovrapposizioni nei contenuti reagendo agli insiemi. Gli insiemi descrivono La quantità di contenuti dell'app da riempire per evitare di sovrapporsi con parti dell'interfaccia utente del sistema operativo Android, come la barra di navigazione o la barra di stato, oppure con funzionalità dei dispositivi fisici, come i ritagli del display.

Tieni presente i seguenti tipi di riquadri nella progettazione per l'utilizzo edge-to-edge casi:

  • I insiemi delle barre di sistema vengono applicati all'UI che può essere toccata e non deve essere oscurate visivamente dalle barre del sistema.
  • I insiemi di gesti di 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. La l'utente interagisce con la barra di stato trascinandola verso il basso per accedere alla notifica ombra.

Figura 3: area della barra di stato evidenziata sopra la barra delle app in alto

La barra di stato può avere un aspetto diverso a seconda del contesto, dell'ora del giorno preferenze o temi impostati dall'utente e altri parametri. Puoi anche impostare della barra di stato, come mostrato negli esempi seguenti.

Figura 4: barra di stato con il tema chiaro e scuro.

Ora che i contenuti dell'app si estendono su tutto lo schermo, obbligatorio. Utilizza barre di sistema trasparenti con contenuti edge-to-edge, come mostrato nelle dall'esempio seguente.

Figura 5: barre trasparenti utilizzando la funzionalità edge-to-edge, ideale per mettere in risalto i tuoi contenuti sfruttando la maggiore quantità di spazio sullo schermo.


Figura 6. Modifica lo stile delle barre di sistema per migliorare i contenuti o adattarli a quelli dell'app branding. Non lasciare le barre di sistema impostate sugli attributi predefiniti.

Quando arriva una notifica, solitamente viene visualizzata un'icona nella barra di stato. Questo segnala all'utente che c'è qualcosa da vedere nel riquadro di notifica a scomparsa. Può trattarsi dell'icona o del simbolo dell'app che rappresenta il canale. Consulta: Design delle notifiche.

Figura 7: icona di notifica nella barra di stato

Impostare lo stile della barra di stato

Applica uno stile allo sfondo della barra di stato come parte del tema della tua app, con un colore personalizzato o stile, oltre a impostare trasparenza e opacità.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Se imposti manualmente il colore di sfondo, puoi scegliere di assegnare uno stile allo stato i contenuti delle barre siano chiari o scuri per un contrasto ottimale.

Mostra ritagli e barra di stato

Su alcuni dispositivi, un ritaglio display è un'area che si estende fino al display per lasciare spazio per i sensori frontali. Può influire sull'aspetto di barre di stato. I ritagli del display possono variare in base al produttore.

Scopri come supportare i ritagli del display.

Figura 8: esempi di ritagli del display

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

  • Indietro consente di tornare direttamente alla visualizzazione precedente.
  • La schermata Home viene trasferita dall'app alla schermata Home del dispositivo.
  • La pagina Panoramica mostra che le app sono aperte e di recente.

Gli utenti possono scegliere tra varie configurazioni della barra di navigazione, tra cui i gesti navigazione (consigliata) e navigazione con tre pulsanti.

Navigazione tramite gesti

Introdotta in Android 10 (livello API 29), la navigazione tramite gesti è consigliata tipo di navigazione, anche se non puoi ignorare la preferenza dell'utente. Gesto la navigazione non utilizza pulsanti per Indietro, Home e Panoramica, mostrando invece un punto di manipolazione con un singolo gesto per dare l'invito. Gli utenti interagiscono scorrendo da sinistra oppure bordo destro dello schermo per andare avanti e indietro e andare avanti e indietro dal basso per proseguire casa. Scorrendo verso l'alto e tenendo premuto si apre la panoramica.

La navigazione tramite gesti è un modello di navigazione più scalabile per la progettazione dispositivi mobili e schermi più grandi. Per offrire la migliore esperienza utente, prendi in considerazione la navigazione tramite gesti:

  • Supporto di contenuti edge-to-edge.
  • Evita di aggiungere interazioni o touch target sotto i riquadri di navigazione tramite gesti.

Scopri di più sull'implementazione della navigazione tramite gesti.

Figura 9: barra di navigazione della maniglia di navigazione con gesti

Navigazione con tre pulsanti

La navigazione con tre pulsanti fornisce tre pulsanti per Indietro, Home e Panoramica.

Figura 10: barra di navigazione con tre pulsanti

Altre varianti della barra di navigazione

A seconda della versione di Android e del dispositivo, potrebbero essere presenti altre configurazioni della barra di navigazione a disposizione dei tuoi utenti. La navigazione con due pulsanti, ad esempio, offre due pulsanti per Home e Indietro.

Figura 11: barra di navigazione con due pulsanti

Impostare uno stile di navigazione

L'esempio seguente mostra 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 tramite gesti modalità di navigazione o nelle modalità con pulsanti.

  • Modalità di navigazione tramite gesti: il sistema applica l'adattamento dinamico del colore, in che i contenuti delle barre di sistema cambiano colore in base ai contenuti dietro di loro. Nell'esempio seguente, il punto di manipolazione nella barra di navigazione passa a un colore scuro se viene posizionato sopra contenuti chiari e viceversa.

    Figura 12: adattamento dinamico del colore

  • Modalità dei pulsanti: il sistema applica una striscia trasparente dietro il sistema. barre (per il livello API 29 o superiore) o una barra di sistema trasparente (per il livello API 28 o inferiore).

    Figura 13: adattamento dinamico del colore, in cui le barre di sistema cambia il colore in base ai contenuti che si trovano alla base

Tastiera e navigazione

Figura 14: 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 modificare il tipo di tastiera. Per garantire una transizione senza problemi dalla tastiera, per garantire una transizione transizione che sincronizza la transizione dell'app con lo scorrimento della tastiera verso l'alto e verso il basso dalla parte inferiore dello schermo, usa WindowInsetsAnimationCompat

Modalità immersiva

Figura 15: modalità immersiva che mostra un'esperienza a schermo intero su un dispositivo mobile orientato al paesaggio

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 essere ancora in grado di usare rivela barre di sistema e UI per consentirti di navigare o interagire con i controlli di sistema. Scopri di più sulla progettazione per le modalità a schermo intero o leggi come nascondi le barre di sistema per la modalità immersiva.