Translucente SystemBars på den rigtige måde – på tværs af API-niveauer og temaer

BY admin
|

For at tegne kant til kant med translucente status- og navigationslinjer på v21+ med mørke og lyse temaer.

Denne artikel forudsætter, at du allerede har gennemgået Gesture Navigation- Going Edge to Edge (I)

Da vi ønsker, at indholdet skal tegnes bag systemlinjerne, betyder det, at

  1. Vi har brug for translucency
  2. Vi har brug for enten mørke eller lyse scrims til navigationslinjen og statusBar i henhold til det aktuelle tema.

Funktion

  • Fuldt konfigurerbar statusBarColor
    Men vi er begrænset til at bruge mørkere farver, da ikonerne i statusBar forbliver hvidfarvede.
  • windowTranslucentStatus true vil tilsidesætte statusBarColor og anvende en fast mørk rander, der ikke kan ændres.
  • Fuldt konfigurerbar navigationBarColor
    Men vi er begrænset til at bruge mørkere farver, da navigationsknapperne forbliver hvidt farvede.
  • windowTranslucentNavigation true vil tilsidesætte navigationBarColor og anvende en fast mørk rander, der ikke kan ændres.
  • Statusbjælkens ikoner & navigationsbjælkens knapper forbliver altid lyse.

v23+

  • windowLightStatusBar
    Aktiverer ikonerne i statusbjælken til at være mørke

v27+

  • windowLightNavigationBar
    Aktiverer navigationsbjælkens knapper til at være mørke.

Løsning

Bemærk: Vi vil bruge en gennemsigtig statusBarColor. Fordi vi i stedet vil bruge AppBar til at farve statusBar’en. Da AppBar dækker statusBar’s område, burde det være nok at indstille den relevante baggrund til AppBar direkte.

I din implementering kan dette være enhver visning, der er øverst. Hvis der ikke er nogen visning i toppen af skærmen , kan du i stedet bruge statsuBarColor-attributten. Det vil give samme resultat.

Basisværdier:

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:

  • Vi dropper windowTranslucentStatus og windowTranslucentNavigation, da systemet vil anvende et mørkt scrim, hvis vi bruger dem.
  • statusBar og navigationBar ikoner forbliver hvidt farvede.
  • Men betyder, at vi kun kan bruge mørke baggrunde/scrims.

Vi har 2 muligheder her:

Brug forskellige baggrunde for mørke og lyse temaer.

I tilfælde af mørkt tema vil colorSurface være mørk/sort. Vi kan også bruge en lignende farve til systemBars.
Hvis der er tale om et lyst tema, vil colorSurface være lys/hvid. Vi kan ikke bruge en lignende farve til systembars, da ikonerne er hvide.

Grundlæggende kan vi ikke håndtere systembars med lyse temaer særlig godt på v21-22. Så vi er tilbage med kun at bruge mørke baggrunde .

Brug samme baggrund til mørke og lyse temaer.

Vi kan arbejde os frem ved at bruge mørke baggrunde til mørke og lyse temaer.

Som følge heraf vil mørkt tema skinne.

I tilfælde af lyst tema:
Da dette mørke scrim også vil blive anvendt på AppBar (hvis vi tegner bag det, hvilket vi gør!), bliver vi nødt til at bruge et ThemeOverlay.Dark til AppBar. Ellers får vi mørk tekst på mørk baggrund.

værdier-night

v23 – v26:

Vi kan være helt fleksible med statusBar, da vi har mulighed for at få ikonerne i statuslinjen til at blive mørke.

  • For light theme, vil vi have en lys status_bar_scrim og en mørk nav_bar_scrim (da navigationsikonerne ikke kan være mørke).
  • For mørkt tema vil values-night tilsidesætte status_bar_scrim til at være mørk, og nav_bar_scrim vil følge status_bar_scrim til også at være mørk.
  • Også skal vi forhindre vores Widget.AppTheme.AppBar i altid at være mørkt tema.

værdier-v23

v27+:

Vi kan være fuldt fleksible med navigationBar, da vi nu har mulighed for at få ikonerne i navigationslinjen til at blive mørke.
Da values-v23 bruger en anden status_bar_scrim og nav_bar_scrim for lyst tema. Vi skal her sørge for, at begge er ens (begge er lyse for light theme og begge er mørke for dark theme).

Vi skal bare få nav_bar_scrim til at følge status_bar_scrim igen, og så er vi færdige.

values-v27

Hele koden kan findes her: https://github.com/gaurav414u/MoviesInsetsDemo