Barre di sistema traslucide nel modo giusto – attraverso i livelli API e i temi

BY admin
|

Per disegnare da bordo a bordo con barre di stato e di navigazione traslucide su v21+ con temi scuri e chiari.

Questo articolo presuppone che tu abbia già letto Gesture Navigation- Going Edge to Edge (I)

Siccome vogliamo che il contenuto sia disegnato dietro le barre di sistema, significa che

  1. abbiamo bisogno di traslucenza
  2. Abbiamo bisogno di scrims scuri o chiari per la barra di navigazione e statusBar secondo il tema corrente.

Capacità

  • Pienamente configurabile statusBarColor
    Ma siamo limitati ad usare colori più scuri perché le icone della statusBar rimangono bianche.
  • windowTranslucentStatus true sovrascriverà statusBarColor e applicherà uno scrim scuro fisso che non può essere cambiato.
  • Fully configurable navigationBarColor
    Ma siamo limitati ad usare colori più scuri perché i pulsanti di navigazione rimangono di colore bianco.
  • windowTranslucentNavigation true sovrascriverà navigationBarColor e applicherà uno scrim scuro fisso che non può essere cambiato.

    • Le icone della barra di stato & i pulsanti della barra di navigazione rimangono sempre chiari.

v23+

  • windowLightStatusBar
    Abilita le icone della statusBar ad essere scure

v27+

  • windowLightNavigationBar
    Abilita i pulsanti della navigation bar ad essere scuri.

Soluzione

Nota: Useremo uno statusBarColor trasparente. Perché invece useremo AppBar per colorare la statusBar. Dal momento che l’AppBar copre l’area della statusBar, dovrebbe essere sufficiente impostare direttamente il relativo sfondo su AppBar.

Nella tua implementazione, questa può essere qualsiasi vista che si trova in alto. Se non c’è nessuna vista nella parte superiore dello schermo, puoi invece usare l’attributo statsuBarColor. Darà gli stessi risultati.

Valori di base:

AppBarLayout:

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/moviesAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/status_bar_scrim"
android:theme="@style/Widget.AppTheme.AppBar"
app:elevation="2dp"
app:layout_constraintTop_toTopOf="parent"> <androidx.appcompat.widget.Toolbar
android:id="@+id/moviesToolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="Popular Movies" />
</com.google.android.material.appbar.AppBarLayout>

v21 – v22:

  • Abbiamo abbandonato windowTranslucentStatus e windowTranslucentNavigation, poiché il sistema applicherà uno scrim scuro se li usiamo.
  • Le icone di statusBar e navigationBar rimangono di colore bianco.
  • Significa che possiamo usare solo sfondi/scrimmi scuri.

Abbiamo 2 opzioni qui:

Utilizziamo sfondi diversi per temi scuri e chiari.

In caso di tema scuro il colorSurface sarà scuro/nero. Possiamo usare un colore simile anche per le systemBars.
In caso di tema chiaro, il colorSurface sarà chiaro/bianco. Non possiamo usare un colore simile per le barre di sistema perché le icone sono bianche.

In pratica, non possiamo gestire molto bene le barre di sistema a tema chiaro su v21-22. Quindi ci rimane solo l’uso di sfondi scuri.

Utilizzare lo stesso sfondo per i temi scuri e chiari.

Possiamo lavorare a modo nostro usando sfondi scuri per temi scuri e chiari.

Come risultato, il tema scuro brillerà.

In caso di tema chiaro:
Siccome questo scrim scuro sarà applicato anche alla AppBar (se stiamo disegnando dietro di essa, cosa che facciamo!), dovremo usare un ThemeOverlay.Dark per la AppBar. Altrimenti avremo testo scuro su sfondo scuro.

valori-notte

v23 – v26:

Possiamo essere completamente flessibili con la statusBar poiché abbiamo la possibilità di rendere le icone della status bar scure.

  • Per il tema chiaro, avremo uno status_bar_scrim chiaro e un nav_bar_scrim scuro (poiché le icone di navigazione non possono essere scure).
  • Per il tema scuro, values-night sovrascriverà status_bar_scrim per essere scuro e nav_bar_scrim seguirà status_bar_scrim per essere anch’esso scuro.
  • Inoltre, dobbiamo impedire che il nostro Widget.AppTheme.AppBar sia sempre a tema scuro.

values-v23

v27+:

Possiamo essere completamente flessibili con navigationBar poiché ora abbiamo la possibilità di rendere scure le icone della barra di navigazione.
Siccome valori-v23 usa un diverso status_bar_scrim e nav_bar_scrim per il tema chiaro. Dobbiamo assicurarci che entrambi siano uguali (entrambi sono chiari per il tema chiaro ed entrambi sono scuri per il tema scuro).

Dobbiamo solo far sì che il nav_bar_scrim segua nuovamente lo status_bar_scrim e abbiamo finito.

values-v27

L’intero codice può essere trovato qui: https://github.com/gaurav414u/MoviesInsetsDemo