Overzichtige systeembalken op de juiste manier – over API niveaus en thema’s

BY admin
|

Om van rand tot rand te tekenen met doorzichtige status- en navigatiebalken op v21+ met donkere en lichte thema’s.

Dit artikel gaat ervan uit dat u Gesture Navigation- Going Edge to Edge (I)

Since we want the content to be drawn behind the system bars, it means that

  1. We need translucency
  2. We need either dark or light scrims for navigation bar and statusBar as per the current theme.

Capability

  • Volledig configureerbare statusBarColor
    Maar we zijn beperkt tot het gebruik van donkere kleuren omdat de statusBar pictogrammen wit gekleurd blijven.
  • windowTranslucentStatus true overschrijft statusBarColor en past een vaste donkere rand toe die niet kan worden gewijzigd.
  • Full configurable navigationBarColor
    Maar we zijn beperkt tot het gebruik van donkerdere kleuren aangezien de navigatieknoppen wit gekleurd blijven.
  • windowTranslucentNavigation true overschrijft navigationBarColor en past een vaste donkere rand toe die niet kan worden gewijzigd.
  • Statusbalkpictogrammen & navigatiebalkknoppen blijven altijd licht.

v23+

  • windowLightStatusBar
    Zorgt ervoor dat de statusBar-pictogrammen donker zijn

v27+

  • windowLightNavigatieBar
    Zorgt ervoor dat de navigatiebalkknoppen donker zijn.

Oplossing

Note: we zullen een transparante statusBarColor gebruiken. Omdat we in plaats daarvan AppBar gebruiken om de statusBar te kleuren. Omdat de AppBar het gebied van de statusBar beslaat, zou het voldoende moeten zijn om de relevante achtergrond direct op AppBar in te stellen.

In uw implementatie kan dit elk aanzicht zijn dat bovenaan staat. Als er geen uitzicht op de top van het scherm , kunt u in plaats daarvan statsuBarColor attribuut te gebruiken. Dit geeft hetzelfde resultaat.

Basiswaarden:

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:

  • We laten windowTranslucentStatus en windowTranslucentNavigation achterwege, omdat het systeem een donkere rand aanbrengt als we deze gebruiken.
  • StatusBalk en navigatieBalk iconen blijven wit gekleurd.
  • Dus, we kunnen alleen donkere achtergronden gebruiken.

We hebben 2 opties hier:

Gebruik verschillende achtergronden voor donkere en lichte thema’s.

In het geval van een donker thema zal de kleurSurface donker/zwart zijn. We kunnen ook een soortgelijke kleur voor de systeembalken gebruiken.
In het geval van een licht thema zal de kleurSurface licht/wit zijn. We kunnen geen vergelijkbare kleur gebruiken voor systeembalken, omdat de pictogrammen wit zijn.

Basically, we kunnen niet goed omgaan met licht thema systeembalken op v21-22. We kunnen dus alleen donkere achtergronden gebruiken.

Gebruik dezelfde achtergrond voor donkere en lichte thema’s.

We kunnen ons een weg banen door donkere achtergronden te gebruiken voor donkere en lichte thema’s.

Hierdoor zal het donkere thema schitteren.

In het geval van het lichte thema:
Omdat deze donkere achtergrond ook zal worden toegepast op de AppBar (als we erachter tekenen, wat we doen!), zullen we een ThemeOverlay.Dark moeten gebruiken voor de AppBar. Anders krijgen we donkere tekst op een donkere achtergrond.

values-night

v23 – v26:

We kunnen volledig flexibel zijn met statusBar, omdat we de mogelijkheid hebben om de pictogrammen van de statusbalk donker te maken.

  • Voor een licht thema hebben we een lichte status_bar_scrim en een donkere nav_bar_scrim (omdat de navigatiepictogrammen niet donker kunnen zijn).
  • Voor een donker thema overschrijft value-night de status_bar_scrim naar donker en nav_bar_scrim volgt de status_bar_scrim om ook donker te zijn.
  • Ook moeten we voorkomen dat onze Widget.AppTheme.AppBar altijd donker gethematiseerd is.

waarden-v23

v27+:

We kunnen nu volledig flexibel zijn met navigationBar omdat we nu de mogelijkheid hebben om de pictogrammen van de navigatiebalk donker te maken.
Sinds values-v23 een andere status_bar_scrim en nav_bar_scrim gebruikt voor light theme. We moeten er hier voor zorgen dat beide hetzelfde zijn (beide zijn licht voor licht thema en beide zijn donker voor donker thema).

We hoeven alleen maar de nav_bar_scrim weer de status_bar_scrim te laten volgen en we zijn klaar.

values-v27

De hele code kan hier worden gevonden: https://github.com/gaurav414u/MoviesInsetsDemo