Translucent StatusBar with dynamic ActionBar color

Question

I'm trying to realize a translucent statusbar (so that my navigation-view is BEHIND the statusbar) but still like to change the color of my actionbar dynamically. Because of this, the statusbar color needs to change to a darker version of my actionbar color.

If I set my statusbar to transparent, as many sources suggest, my primary_dark color is used as the background of my statusbar. However, as I will change the actionbar color during runtime, primary_dark must not necessarily be the dark color of my actionbar.

If I set my statusbar to the actionbar color, the transparency is gone. If I set my statusbar to the actionbar color and add transparency, the statusbar looks neither wrong nor right and my overlapping navigationview is still not very 'transparent' / 'colorful'.

Google Inbox has three separate colors: Inbox (blue), Snoozed (yellow) and Done (green).

What can I do to achieve this behaviour?

Answer 1

Actually, it's fairly easy to implement.

First step - is to change height of the Toolbar:

• change height to wrap_content

so for me it looks like this:

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

Then you override resources for v19:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
            <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
                    <!-- Style properties -->
                    ....
                    <!-- These properties are important:-->
                    <item name="android:windowTranslucentStatus">true</item>
                    <item name="windowActionBarOverlay">false</item>
                    <item name="android:windowActionBarOverlay">false</item>
                    <item name="android:fitsSystemWindows">false</item>
            </style>
    </resources>

Then, in the Activity, setting padding for the Toolbar:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
    ......
    ......
    public int getStatusBarHeight() {
        int result = 0;

        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
            int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
            if (resourceId > 0) {
                result = getResources().getDimensionPixelSize(resourceId);
            }
        }
        return result;
    }

And actually, it's pretty much it. Now once I want to change colour of the Toolbar, I'm calling this:

    if (getSupportActionBar() != null) {
        getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.GREEN));
    }

The activity's layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

NB! On pre-Kitkat OS-versions, status bar remained the same, non-translucent.

I've uploaded the source code of the test-application to my dropbox - feel free to check it out.

I hope, it helps