How to achieve a transparent statusbar after migrating to Material Design themes?

Question

I am in the process of migrating my app theme to a Material Design theme and I am having problems with certain situations where I need a transparent status bar (for example when using a CollapsingToolbarLayout, when expanded the toolbar should be transparent and when collapsed it should be in the primary dark color).

Before the migration my theme was like that, so I did only define android:statusBarColor for theme overlays where I needed a transparent statusbar and everywhere else the statusbar was in the primary dark color by default.

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

After the migration I am working with the following, where I have to explicitly define android:statusBarColor in my base theme due to the following problem.

<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
        <item name="colorSecondary">@color/colorAccent</item>

        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
    </style>

    <style name="AppTheme.TransparentStatusBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />

</resources>

But since there does not seem to be an implicit default anymore that means, that I get a blue (the Material Design default color) statusbar in all situations where I apply the AppTheme.TransparentStatusBar theme.

For example I have a transparent status bar when my CollapsingToolbarLayout is expanded (as expected), but a blue status bar when it is collapsed (I would expect it to be at least a color from my base theme by default).

toolbar expanded

toolbar collapsed

Is there a way to work around this problem?

Answer 1

I found a partial solution to fix at least my problem with the CollapsingToolbarLayout: when I add app:statusBarScrim="?attr/colorPrimaryVariant" to its definition I can restore the look from before my theme migration, i.e. I have the transparent statusbar according to my theme in the expanded state and the scrim color in the collapsed state.

I will leave the question open in case someone has an idea for a more global fix, since I still have other problems with a transparent status bar. For instance I am still not able to achieve a DrawerLayout that blends nicely under a transparent statusbar.