Barele de sistem translucide în mod corect – în toate nivelurile API și temele

BY admin
|

Pentru a desena marginile cu bare de stare și de navigare translucide pe v21+ cu teme întunecate și luminoase.

Acest articol presupune că ați parcurs deja Gesture Navigation- Going Edge to Edge (I)

Din moment ce dorim ca conținutul să fie desenat în spatele barelor de sistem, înseamnă că

  1. Avem nevoie de transluciditate
  2. Avem nevoie fie de scripeți întunecați, fie de scripeți luminoși pentru bara de navigare și statusBar în funcție de tema curentă.

Capacitate

  • Color StatusBarColor
    Dar suntem limitați să folosim culori mai închise, deoarece pictogramele statusBar rămân de culoare albă.
  • windowTranslucentStatus true va suprascrie statusBarColor și va aplica un crâmpei întunecat fix care nu poate fi modificat.
  • Fully configurable navigationBarColor
    Dar suntem limitați să folosim culori mai închise, deoarece butoanele de navigare rămân de culoare albă.
  • windowTranslucentNavigation true va suprascrie navigationBarColor și va aplica un crâmpei întunecat fix care nu poate fi modificat.
  • Icoanele barei de stare & Butoanele barei de navigare rămân întotdeauna deschise.

v23+

  • windowLightStatusBar
    Activază pictogramele barei de stare să fie închise la culoare

v27+

  • windowLightNavigationBar
    Activază butoanele barei de navigare să fie închise la culoare.

Soluție

Nota: Vom folosi un statusBarColor transparent. Deoarece vom folosi în schimb AppBar pentru a colora StatusBar. Din moment ce AppBar acoperă zona statusBar-ului, ar trebui să fie suficient să setați fundalul relevant direct pe AppBar.

În implementarea dumneavoastră, aceasta poate fi orice vizualizare care se află în partea de sus. Dacă nu există o vizualizare în partea de sus a ecranului , puteți utiliza în schimb atributul statsuBarColor. Acesta va da aceleași rezultate.

Valori de bază:

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:

  • Noi renunțăm la windowTranslucentStatus și windowTranslucentNavigation, deoarece sistemul va aplica un scrim întunecat dacă le folosim.
  • Icoanele din bara de stare și din bara de navigare rămân de culoare albă.
  • Înseamnă că putem folosi doar fundaluri/scrimă de culoare închisă.

Avem 2 opțiuni aici:

Utilizați fundaluri diferite pentru temele întunecate și luminoase.

În cazul temei întunecate, culoareaSurface va fi închisă/neagră. Putem folosi o culoare similară și pentru systemBars.
În cazul temei light, colorSurface va fi light/white. Nu putem folosi o culoare similară pentru systembars, deoarece pictogramele sunt albe.

În principiu, nu ne putem descurca foarte bine cu systembars cu tematică deschisă în v21-22. Așa că ne rămâne să folosim doar fundaluri întunecate.

Utilizați același fundal pentru teme întunecate și luminoase.

Ne putem descurca folosind fundaluri întunecate pentru teme întunecate și luminoase.

Ca rezultat, tema întunecată va străluci.

În cazul temei luminoase:
Din moment ce această perdea întunecată va fi aplicată și la AppBar (dacă desenăm în spatele ei, ceea ce este cazul!), va trebui să folosim un ThemeOverlay.Dark pentru AppBar. Altfel vom avea text întunecat pe un fundal întunecat.

valori-noapte

v23 – v26:

Potem fi complet flexibili cu StatusBar, deoarece avem capacitatea de a face ca pictogramele din bara de stare să devină întunecate.

  • Pentru tema light, vom avea un status_bar_scrim light și un nav_bar_scrim dark (deoarece pictogramele de navigare nu pot fi dark).
  • Pentru tema întunecată, values-night va suprascrie status_bar_scrim pentru a fi întunecată și nav_bar_scrim va urma status_bar_scrim pentru a fi, de asemenea, întunecată.
  • De asemenea, trebuie să împiedicăm ca Widget.AppTheme.AppBar-ul nostru să fie întotdeauna cu tematică întunecată.

valori-v23

v27+:

Potem fi complet flexibili cu navigationBar, deoarece acum avem capacitatea de a face ca pictogramele barei de navigare să devină întunecate.
Din moment ce values-v23 utilizează un status_bar_scrim și nav_bar_scrim diferit pentru tema light. Trebuie să ne asigurăm aici că ambele sunt identice (Ambele sunt luminoase pentru tema light și ambele sunt întunecate pentru tema dark).

Nu trebuie decât să facem ca nav_bar_scrim să urmeze din nou status_bar_scrim și am terminat.

values-v27

Întregul cod poate fi găsit aici: https://github.com/gaurav414u/MoviesInsetsDemo