Les barres système translucides de la bonne façon – à travers les niveaux d’API et les thèmes

BY admin
|

Pour dessiner bord à bord avec des barres d’état et de navigation translucides sur la v21+ avec des thèmes sombres et clairs.

Cet article suppose que vous avez déjà parcouru Gesture Navigation- Going Edge to Edge (I)

Puisque nous voulons que le contenu soit dessiné derrière les barres du système, cela signifie que

  1. Nous avons besoin de translucidité
  2. Nous avons besoin de grilles sombres ou claires pour la barre de navigation et la statusBar selon le thème actuel.

Capacité

  • Couleur de la barre d’état entièrement configurable
    Mais nous sommes limités à l’utilisation de couleurs plus sombres car les icônes de la barre d’état restent de couleur blanche.
  • windowTranslucentStatus true remplacera statusBarColor et appliquera une grille sombre fixe qui ne peut pas être modifiée.
  • Finalement configurable navigationBarColor
    Mais nous sommes limités à utiliser des couleurs plus sombres car les boutons de navigation restent de couleur blanche.
  • windowTranslucentNavigation true remplacera navigationBarColor et appliquera une grille sombre fixe qui ne peut pas être modifiée.
  • Les icônes de la barre d’état &les boutons de la barre de navigation restent toujours clairs.

v23+

  • windowLightStatusBar
    Aide les icônes de la barre d’état à être sombres

v27+

  • windowLightNavigationBar
    Aide les boutons de la barre de navigation à être sombres.

Solution

Note : Nous utiliserons une statusBarColor transparente. Parce que nous allons plutôt utiliser AppBar pour colorer la statusBar. Puisque l’AppBar couvre la zone de la statusBar, il devrait être suffisant de définir l’arrière-plan pertinent à AppBar directement.

Dans votre implémentation, cela peut être n’importe quelle vue qui est en haut. S’il n’y a pas de vue en haut de l’écran , vous pouvez plutôt utiliser l’attribut statsuBarColor. Cela donnera les mêmes résultats.

Valeurs de 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:

  • Nous abandonnons windowTranslucentStatus et windowTranslucentNavigation, car le système appliquera une grille sombre si nous les utilisons.
  • Les icônes de la barre d’état et de la barre de navigation restent de couleur blanche.
  • Cela signifie que nous ne pouvons utiliser que des fonds/écrans sombres.

Nous avons 2 options ici :

Utiliser des fonds différents pour les thèmes sombres et clairs.

En cas de thème sombre, la couleurSurface sera sombre/noire. Nous pouvons utiliser une couleur similaire pour les systemBars également.
En cas de thème clair, la colorSurface sera claire/blanche. Nous ne pouvons pas utiliser une couleur similaire pour les barres de système car les icônes sont blanches.

En gros, nous ne pouvons pas très bien gérer les barres de système à thème clair sur la v21-22. Donc nous en sommes réduits à utiliser des fonds sombres uniquement .

Utiliser le même fond pour les thèmes sombres et clairs.

Nous pouvons travailler notre chemin en utilisant des fonds sombres pour les thèmes sombres et clairs.

En conséquence, le thème sombre brillera.

Dans le cas du thème clair :
Puisque ce canevas sombre sera également appliqué à l’AppBar (si nous dessinons derrière, ce qui est le cas !), nous devrons utiliser un ThemeOverlay.Dark pour l’AppBar. Sinon, nous aurons un texte sombre sur un fond sombre.

valeurs-nuit

v23 – v26:

Nous pouvons être totalement flexibles avec la barre d’état car nous avons la possibilité de rendre les icônes de la barre d’état sombres.

  • Pour le thème clair, nous aurons un status_bar_scrim clair et un nav_bar_scrim sombre (puisque les icônes de navigation ne peuvent pas être sombres).
  • Pour le thème sombre, values-night remplacera status_bar_scrim pour qu’il soit sombre et nav_bar_scrim suivra status_bar_scrim pour qu’il soit également sombre.
  • De plus, nous devons empêcher notre Widget.AppTheme.AppBar d’avoir toujours un thème sombre.

values-v23

v27+:

Nous pouvons être totalement flexibles avec la navigationBar car nous avons maintenant la capacité de rendre les icônes de la barre de navigation sombres.
Puisque values-v23 utilise un status_bar_scrim et un nav_bar_scrim différents pour le thème léger. Nous devons nous assurer ici que les deux sont les mêmes (Les deux sont clairs pour le thème clair et les deux sont foncés pour le thème foncé).

Nous devons juste faire en sorte que le nav_bar_scrim suive à nouveau le status_bar_scrim et nous avons terminé.

values-v27

Le code entier peut être trouvé ici : https://github.com/gaurav414u/MoviesInsetsDemo