Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment

Edit your styles.xml (v21) , add the following style

 <style name="AppTheme.Home" parent="AppTheme.Base">
    <!-- Customize your theme here. -->
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

</style>

You can change parent theme as per your liking, but now declare this theme in your AndroidManifest.xml file for a particular activity like this :

 <activity
        android:theme="@style/AppTheme.Home"
        android:name=".HomeActivity"
        android:launchMode="singleTop"
        android:screenOrientation="portrait" />

This will let your content visible under the transparent actionbar.

Now use the following to align your toolbar below the StatusBar properly, call this in your oncreate:

 toolbar.setPadding(0, getStatusBarHeight(), 0, 0);

Get statusbar height using following :

public int getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

Remove the following from your coordinator layout tags :

android:fitsSystemWindows="true"

Now in order to collapse your toolbar or hide it you may refer to this tutorial

Make sure you are using following version of design support library, as it is bug free :

compile 'com.android.support:design:23.1.0'


tl;dr Set android:fitsSystemWindows="false" at least to the root CoordinatorLayout and to the inner fragment container, @frame_container.

This might not be the final solution (i.e. there might be other fitsSystemWindows to change) so tell me if you have any problems.

why

When it comes to status bar, I think of fitsSystemWindows like so:

  • fitsSystemWindows="false" : draws the view normally, under the status bar because of the window flags you have set.
  • fitsSystemWindows="true" : draws the view normally, under the status bar because of the window flags you have set, but adds a top padding so that content is drawn below the status bar and they don't overlap.

In fact, in my opinion, the white you see is not the status bar color, but rather your CoordinatorLayout background. That is due to fitsSystemWindows="true" on the coordinator: it draws the background to the whole window, but adds top padding to the content so inner views are not covered by status bar.

This is not what you want. Your inner content must be covered by the status bar, and so you have to set fitsSystemWindows="false" to the coordinator (so it won't apply top padding) and probably to the content itself.

Once you get how it works, it is easy to debug and achieve the effect you are looking for. Actually, it is not. Years pass, but I still spend hours trying to figure out the right fitsSystemWindows combination, because most Views (in the support libraries at least) override the default behavior that I stated above, in ways that are mostly not intuitive. See this post for a small guide on how to use it.