半透明のシステム バーを正しい方法で – API レベルとテーマを問わず

BY admin
|

半透明のステータス バーとナビゲーション バーを v21+ で暗いテーマと明るいテーマで端から端まで描画する方法。

Gesture Navigation- Going Edge to Edge (I)

コンテンツをシステム バーの背後に描画したいので、

  1. 半透明が必要です
  2. 現在のテーマに応じて、ナビゲーション バーとステータス バーに暗いまたは明るいスクリムを使用する必要があります。

Capability

  • Fully configurable statusBarColor
    しかし、ステータスバーのアイコンは白色のままなので、暗い色の使用は制限されています。
  • windowTranslucentStatus true は statusBarColor を上書きし、変更できない固定の暗い縁取りを適用します。
  • Fully configurable navigationBarColor
    But we are limited to use dark colors as the navigation buttons remain white colored.
  • windowTranslucentNavigation true は navigationBarColor を上書きし、変更できない固定の暗い縁取りを適用します。
  • ステータス バー アイコン & ナビゲーション バー ボタンが常に明るいまま。

v23+

  • windowLightStatusBar
    ステータス バーのアイコンを暗くする

v27+

  • windowLightNavigationBar
    ナビゲーション バーのボタンを暗くすることができるようになりました。

Solution

注意: 我々は透過的な statusBarColor を使用する予定です。 なぜなら、代わりに AppBar を使用して StatusBar に色を付けるからです。 AppBar は statusBar の領域をカバーするので、関連する背景を直接 AppBar に設定すれば十分でしょう。

あなたの実装では、これは上部にある任意のビューにすることができます。 画面の上部にビューがない場合、代わりに statsuBarColor 属性を使用することができます。

基本値:

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:

  • windowTranslucentStatus と windowTranslucentNavigation はシステムで暗いスクリムを適用するので無視することにします。
  • statusBar と navigationBar のアイコンは白色のままです。
  • つまり、暗い背景/スクリムしか使用できません。
    Light テーマの場合、colorSurface は light/white になります。

    基本的に、v21-22 では、ライト テーマのシステム バーをあまりうまく処理できません。 そのため、暗い背景のみを使用することになります。

    Use same background for dark and light themes.

    We can work our way by using dark backgrounds for dark and light themes.を参照してください。

    Light テーマの場合:
    この暗い縁は AppBar にも適用されるので (背後に描画する場合!)、AppBar に ThemeOverlay.Dark を使用する必要があります。

    values-night

    v23 – v26:

    ステータス バーのアイコンを暗くできるため、完全に柔軟に対応することができるようになりました。

    • 明るいテーマの場合、明るい status_bar_scrim と暗い nav_bar_scrim を用意します (ナビゲーション アイコンを暗くすることはできないので)。
    • ダーク テーマの場合、values-night は status_bar_scrim をダークに上書きし、nav_bar_scrim は status_bar_scrim に従って同様にダークになります。
    • また、私たちは Widget.AppTheme.AppBar が常に暗いテーマとなることを阻止する必要があります。

    values-v23

    v27+:

    これで、ナビゲーション バーのアイコンを暗くできるため、完全に柔軟に対応することができるようになりました。
    values-v23 では、ライト テーマで異なる status_bar_scrim および nav_bar_scrim を使用しているため、ナビゲーション バーのアイコンを暗くすることができます。

    nav_bar_scrim が status_bar_scrim に再び従うようにすれば完了です。

    values-v27

    全体のコードはここで見つけることができます。 https://github.com/gaurav414u/MoviesInsetsDemo