Android translucent status bar is always gray with fitsSystemWindows when targeting API 28 (Android 9)

Question

Beginning with API 21, When the style includes <item name="android:windowTranslucentStatus">true</item> and the layout includes android:fitsSystemWindows="true" the status bar becomes translucent and drawer layouts (like the navigation drawer) slide behind the status bar. Previous to targeting API 28, the base color of the status bar would be set by colorPrimaryDark or android:statusBarColor. Now these values are ignored.

This problem actually surfaced in com.android.support:design:27.1.0, but at the time I assumed it was a bug and continued to use com.android.support:design:27.0.2. With the carryover to API 28, it appears this is an undocumented design change. So, how do you set the status bar background color when using fitsSystemWindows on API >= 28?

Answer 1

It turns out the answer to this question is that the base status bar color is now set by the background of the layout item that is set to fitsSystemWindows. That color is then darkened by the translucent status bar scrim. So, in my case, fitsSystemWindows is specified on a CoordinatorLayout inside of a DrawerLayout. Setting android:background on the CoordinatorLayout allows control of the base status bar color.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent" >

    <!-- `android:fitsSystemWindows="true"` moves `root_coordinatorlayout` below the system status bar.
     When it is specified, the theme should include `<item name="android:windowTranslucentStatus">true</item>`.
     `android:background` sets the background color of the status bar, which is then overlaid with a scrim. -->
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coordinatorlayout"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="com.my.acivity"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:background="#FF64DD17" >

        <!-- The purpose of the `LinearLayout` is to place the included `main_webview` below `app_bar_layout`. -->
        <LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="vertical" >

            <!-- The `AppBarLayout` theme has to be defined here because the activity uses a `NoActionBar` theme. -->
            <android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar_layout"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:theme="@style/AppBarLight" >

                <android.support.v7.widget.Toolbar
                    android:id="@+id/app_bar"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent" />
            </android.support.design.widget.AppBarLayout>

            <!-- Include the main views. -->
            <include layout="@layout/main_views" />
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

    <!-- The left drawer. -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationview"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/webview_navigation_menu"
        app:itemIconTint="?attr/navigationIconTintColor" />

    <!-- Include the right drawer. -->
    <include layout="@layout/right_drawer" />

The scrim takes #FF64DD17 and darkens it to #FF3C850E.

When a drawer is open, an additional scrim covers the entire app behind the drawer, darkening the status bar even further to #FF183405.