Läpikuultavat järjestelmäpalkit oikealla tavalla – kaikilla API-tasoilla ja teemoilla

BY admin
|

Voit piirtää reunasta reunaan läpikuultavat tila- ja navigointipalkit v21+:ssa tummilla ja vaaleilla teemoilla.

Tässä artikkelissa oletetaan, että olet jo käynyt läpi Gesture Navigation- Going Edge to Edge (I)

Koska haluamme, että sisältö piirretään järjestelmäpalkkien taakse, se tarkoittaa, että

  1. Tarvitsemme läpikuultavuutta
  2. Tarvitsemme joko tummia tai vaaleita kehyksiä navigointipalkkiin ja tilapalkkiin kulloinkin käytössä olevan teeman mukaan.

Capability

  • Täysin konfiguroitavissa oleva statusBarColor
    Mutta olemme rajoittuneet käyttämään tummempia värejä, koska statusBar-kuvakkeet pysyvät valkoisina.
  • windowTranslucentStatus true ohittaa statusBarColor-värin ja soveltaa kiinteää tummaa rajausta, jota ei voi muuttaa.
  • Täysin konfiguroitavissa navigationBarColor
    Mutta meitä rajoitetaan käyttämään tummempia värejä, koska navigointipainikkeet pysyvät valkoisina.
  • windowTranslucentNavigation true ohittaa navigationBarColor-värin ja soveltaa kiinteää tummaa rajausta, jota ei voi muuttaa.
  • Tilapalkin kuvakkeet & navigointipalkin painikkeet pysyvät aina vaaleina.

v23+

  • windowLightStatusBar
    Mahdollistaa tilapalkin kuvakkeiden olevan tummia

v27+

  • windowLightNavigationBar
    Mahdollistaa navigointipalkin painikkeille tummia.

Ratkaisu

Huomaa: Käytämme läpinäkyvää statusBarColor-väriä. Koska käytämme sen sijaan AppBar-väriä statusBar-väriin. Koska AppBar peittää statusBarin alueen, pitäisi riittää, että asetamme kyseisen taustan suoraan AppBariksi.

Toteutuksessasi tämä voi olla mikä tahansa näkymä, joka on ylhäällä. Jos näytön yläreunassa ei ole näkymää , voit sen sijaan käyttää statsuBarColor-attribuuttia. Se antaa saman tuloksen.

Base values:

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:

  • Hylkäämme windowTranslucentStatus- ja windowTranslucentNavigation-toiminnot, koska järjestelmä soveltaa tummia rastereita, jos käytämme niitä.
  • Tilapalkin ja navigointipalkin kuvakkeet pysyvät valkoisen värisinä.
  • Mikä tarkoittaa, että voimme käyttää vain tummia taustoja/sirkkeleitä.

Meillä on kaksi vaihtoehtoa tässä:

Käytä eri taustoja tummille ja vaaleille teemoille.

Tumman teeman ollessa kyseessä colorSurface on tumma/musta. Voimme käyttää samanlaista väriä myös systemBarsille.
Helpon teeman tapauksessa colorSurface on vaalea/valkoinen. Emme voi käyttää samanlaista väriä järjestelmäpalkkeihin, koska kuvakkeet ovat valkoisia.

Ylipäätään emme pysty käsittelemään vaalean teeman järjestelmäpalkkeja kovin hyvin v21-22:ssa. Joten jäämme käyttämään vain tummia taustoja .

Käytä samaa taustaa tummille ja vaaleille teemoille.

Voimme toimia siten, että käytämme tummia taustoja tummille ja vaaleille teemoille.

Lopputuloksena tumma teema loistaa.

Helpon teeman tapauksessa:
Koska tämä tumma skrimma tulee sovellettavaksi myös AppBariin (jos piirrämme sen taakse, mitä me piirrämme!), joudumme käyttämään ThemeOverlay.Darkia AppBariin.

  • Helpossa teemassa meillä on vaalea status_bar_scrim ja tumma nav_bar_scrim (koska navigointikuvakkeet eivät voi olla tummia).
  • Tummassa teemassa values-night ohittaa status_bar_scrim:n tummaksi ja nav_bar_scrim seuraa status_bar_scrim:iä niin, että se on myös tumma.
  • Myös meidän on estettävä Widget.AppTheme.AppBar:n olevan aina tumma teema.

arvot-v23

v27+:

Voimme olla täysin joustavia navigointipalkin kanssa, sillä nyt meillä on mahdollisuus tehdä navigointipalkin kuvakkeista tummat.
Koska arvot-v23 käyttää eri status_bar_scrimiä ja nav_bar_scrimiä light-teemassa. Meidän on tässä varmistettava, että molemmat ovat samat (Molemmat ovat vaaleat vaaleassa teemassa ja molemmat tummat tummassa teemassa).

Meidän on vain saatava nav_bar_scrim noudattamaan status_bar_scrimiä uudelleen ja olemme valmiita.

values-v27

Koko koodi löytyy täältä: https://github.com/gaurav414u/MoviesInsetsDemo