Develop Reference

Translucent status bar and toolbar

I'd like to integrate something like this:
And I've done it like this, but I can't seem to put the imageview below the toolbar. Without the toolbar, I can make it under the status bar, but combining these two are impossible.
Here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute" />
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
</LinearLayout>
In my activity, I've done the following:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
I've also declared an styles-v21.xml file:
<style name="Project.Photo" parent="Project.Light">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#59000000</item>
</style>
And set it as default style for PhotoActivity.
I've already tried putting the toolbar in a FrameLayout, but doing that my toolbar simply hides, like this:
Thanks in advance.
Got that fixed, but toolbar is overlapping the status bar. Is there anyway to fix the padding? If I use android:fitsSystemWindows="true", status bar isn't translucent anymore.

I would remove the Toolbar from your layout and use an implementation of an ActionBar from the AppCompat.Theme:
<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>
Then, I would create a new style for the semi-transparent ActionBar (in values/styles.xml:
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
</style>
And in v21/styles.xml:
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
I assume, that your Activity extends AppCompatActivity so then in onCreate() you can call:
For enabling a back button:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
For setting your translucent color:
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.yourTranslucentColor)));
For removing your ActionBar title:
getSupportActionBar().setDisplayShowTitleEnabled(false);
What is more, I would change your root LinearLayout to CoordinatorLayout as it gives you more control over your layouts (it's a more powerful FrameLayout).
The color which I used is:
<color name="yourTranslucentColor">#29000000</color>
Of course you should remember to apply this theme to your Activity in the AndroidManifest.xml:
<activity
android:name=".ui.activity.YourActivity"
android:theme="#style/AppTheme.Transparent">
</activity>
By doing all these steps you should get something like this:
Please let me know, if it works for you.

As you said,
"I've already tried putting the toolbar in a FrameLayout, but doing that my toolbar simply hides, like this:".
The problem with this is the order of adding childView in FrameLayout, you added Toolbar as first child and after that you added ImageView. this is why image hides the toolbar. Instead, the order of views inside FameLayout should be like this
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute" />
</FrameLayout>
Also for API level >=19 ,you can add this attribute in style.xml file to make statusBar transparent
<item name="android:windowTranslucentStatus">true</item>
For making content behind statusBar use this link
https://developer.android.com/training/system-ui/status.html#behind

Use code below
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/AppTheme.CollapsingToolbarLayoutExpandedTextStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/YourTheme"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Rest of your view-->
</android.support.design.widget.CoordinatorLayout>

LinearLayout will automatically place the ImageView below the Toolbar.
Try using a RelativeLayout instead.

Dont treat status bar as something separate from your app. Image is coming below the toolbar because you have used LinearLayout. Had you used RelativeLayout, your image would be starting at the same height as toolbar.
Now for making the statusbar transparent and for everything to start from under the statusbar use the following.
<style name="AppTheme.TranslucentStatusBar" >
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
Use the above style for your activity and everything starts from under the statusbar. Now for the toolbar, you can increase the height of the toolbar by adding the height of the statusbar as padding to toolbar. This can be done as follows:
toolbarContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Rect frame = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
toolbarContainer.setPadding(0, frame.top, 0, 0);
}
});
You can set a color to statusbar and use the same color with AlphaTransparency on Toolbar.
getWindow().setStatusBarColor(ContextCompat.getColor(this, android.R.color.transparent));
Now you control everything including the statusbar and the toolbar.

Got that fixed, but toolbar is overlapping the status bar. Is there anyway to fix the padding? If I use android:fitsSystemWindows="true", status bar isn't translucent anymore.
I've recently written a post about WindowInsets, you may check it out. I think it would resolve your issue.
Long story short - what you have to do is to pass window insets only to Toolbar via ViewCompat.setOnApplyWindowInsetListener API. But the parent of your Toolbar should pass the window insets. In your case that won't happen, because by default LinearLayout and family layouts won't do that, you have to subclass and override onApplyWindowInsets method.
I suggest you to read the article, where everything is described more precisely.

TLDR; You have to wrap the toolbar in a LinearLayout.
What I did to make it work was similar to #Akhilesh Kumar's approach but I wrapped the toolbar in a LinearLayout which fixed the toolbar overlapping. I also put the fitsSystemWindows to true in that LinearLayout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"/>
<LinearLayout
android:id="#+id/content_card_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute"/>
</LinearLayout>
</FrameLayout>
I hope it helps.

just change the toolbar height to wrap_content:
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#59000000"
tools:ignore="UnusedAttribute" />

Toolbar's shadow on status bar for Lollipop

I'm using a template from Android Studio that used AppCompat Toolbar. Unfortunately, the toolbar casts shadow on the status bar so it doesn't look right.I also implement a NavigationDrawer so I can't simply set the color of the status bar.
This is how it looks:
This is how it should be:
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
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"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="hu.pe.thinhhoang.aaosync.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles.xml (v21)
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>

Put a LinearLayout in like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activities.MainScreenActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main_screen" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.

I tried all the other answers and none worked. What fixed it was adding this to the AppBarLayout:
app:elevation="0dp"

That's because of :
<item name="android:statusBarColor">#android:color/transparent</item>
i guess.
Got it, check this:
http://developer.android.com/training/material/theme.html#StatusBar
To set a custom color for the status bar, use the
android:statusBarColor attribute when you extend the material theme.
By default, android:statusBarColor inherits the value of
android:colorPrimaryDark.
And you've set it to transparent.this is not a good way for doing that since Google put this code for you:
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
And also, instead of:
<style name="AppTheme.NoActionBar">
Use this and add a parent and check:
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">

To get the correct behavior, you will need to remove
android:fitsSystemWindows="true"
From android.support.design.widget.CoordinatorLayout
In your styles.xml, color defined in colorPrimaryDarkwill be used for drawing the notification bar.
You will need to have styles.xml in your values-v21 folder with following item in your styles:
<item name="android:statusBarColor">#android:color/transparent</item>
Hope this helps.

Support Toolbar title/menu vertical centre

I'm new to android development and I'm working on an app with ActionBar and Tabs. Recently I switched to the new support library Toolbar but the title of the toolbar (ActionBar) isn't vertically centred, while the action buttons are correctly placed.
Title image
The same problem occurs with the first MenuItem in the bar (it's moved up a little bit). Menu image
My activity extends the AppCompatActivty and the layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ActionBarTheme"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed"/>
<com.myApp.app.views.widgets.ViewPager
android:id="#+id/fragmentPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
and the style:
<style name="ActionBarTheme" parent="Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Could someone help me fix this issue? I've searched for a solution but found nothing.
P.S. They were correctly placed as I was using the default action bar

You should use android:theme rather than app:theme here:
android:theme="#style/ActionBarTheme"
Your style should derive from the action bar overlay:
<style name="ActionBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
...
</style>
Consider just using the ActionBar theme directly to start to isolate the problem.

CoordinatorLayout not drawing behind status bar even with windowTranslucentStatus and fitsSystemWindows

I am trying to draw views behind the status bar like this:
I tried to produce this effect with the recommended techniques, but I get this:
It's clear from the screenshot that none of my app content is being drawn behind the status bar.
What's interesting is that somehow, the Nav Drawer manages to draw behind the status bar:
Stuff I did:
Use support library widgets - CoordinatorLayout, AppBarLayout, Toolbar, DrawerLayout
windowTranslucentStatus set to true in my app theme
fitsSystemWindows set to true on my CoordinatorLayout
This is my app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
This is my activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<FrameLayout android:id="#+id/page_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"/>
<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="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
The FrameLayout in my activity layout is replaced with this fragment layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#android:color/holo_blue_bright"
tools:context=".MainActivity">
<TextView android:text="#string/lorem_ipsum"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:elevation="0dp"
android:theme="#style/AppTheme.TransparentAppBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:title="#string/hello_blank_fragment"
app:popupTheme="#style/AppTheme.OverflowMenu" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

edit for future readers: there's a lot of good information on the subject and the issue on the comments too, make sure to read through them.
original answer:
Your theme is wrong, that's why.
Unfortunately, there're differences on how to activate in in Kitkat or Lollipop. On my code I did it in Java, but you can also achieve it in XML if you want to play with the V21 folders on your resources tree. The name of the parameters will be very similar to the Java counterparts.
Delete the android:windowTranslucentStatus from your XML and in Java use like that:
public static void setTranslucentStatusBar(Window window) {
if (window == null) return;
int sdkInt = Build.VERSION.SDK_INT;
if (sdkInt >= Build.VERSION_CODES.LOLLIPOP) {
setTranslucentStatusBarLollipop(window);
} else if (sdkInt >= Build.VERSION_CODES.KITKAT) {
setTranslucentStatusBarKiKat(window);
}
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static void setTranslucentStatusBarLollipop(Window window) {
window.setStatusBarColor(
window.getContext()
.getResources()
.getColor(R.color. / add here your translucent color code /));
}
#TargetApi(Build.VERSION_CODES.KITKAT)
private static void setTranslucentStatusBarKiKat(Window window) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
then you can call from your activity setTranslucentStatusBar(getWindow());
edit:
making the status bar translucent and drawing behind it (for some reason I cannot understand) are two separate tasks in Android.
I've looked more on my code and I'm for sure have A LOT more android:fitsSystemWindows="true" on my layout than just the CoordinatorLayout.
below are all the Views on my layout with android:fitsSystemWindows="true" on them:
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
ImageView (with the background image)
FrameLayout (with the content of the header)
so my suggestion is to just test/try filling up android:fitsSystemWindows="true" on your XML.

This was really confusing for me but I eventually figured it out for my combination of views which looks like this:
<android.support.v4.widget.SwipeRefreshLayout - **no fitsSystemWindow set**
<android.support.design.widget.CoordinatorLayout- android:fitsSystemWindows="true"
<android.support.design.widget.AppBarLayout - android:fitsSystemWindows="true"
<android.support.design.widget.CollapsingToolbarLayout - android:fitsSystemWindows="true"
<RelativeLayout - android:fitsSystemWindows="true"
<ImageView - android:fitsSystemWindows="true"
I also used the methods posted by Budius in my app to get the transparent status bar working:
Delete the android:windowTranslucentStatus from your XML and in Java use like that:
public static void setTranslucentStatusBar(Window window) {
if (window == null) return;
int sdkInt = Build.VERSION.SDK_INT;
if (sdkInt >= Build.VERSION_CODES.LOLLIPOP) {
setTranslucentStatusBarLollipop(window);
} else if (sdkInt >= Build.VERSION_CODES.KITKAT) {
setTranslucentStatusBarKiKat(window);
}
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static void setTranslucentStatusBarLollipop(Window window) {
window.setStatusBarColor(
window.getContext()
.getResources()
.getColor(R.color. / add here your translucent color code /));
}
#TargetApi(Build.VERSION_CODES.KITKAT)
private static void setTranslucentStatusBarKiKat(Window window) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

If I want to draw behind StatusBar I use CoordinatorLayout as most parent view of Activity (android:fitsSystemWindows="false")
styles.xml(v21)
<style name="MyTheme.NoActionBar.TransparentStatusBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then If you want to change statubarcolor, you have to remove TRANSLUENT_FLAG like this
Window window = activity().getWindow();
if(showTransluent){
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(Color.TRANSPARENT);
}else {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(activity(), R.color.colorPrimaryDark));
}
If I want StatusBar to be transluent and simultanieousy kepping view away from hidding behind StatusBar I use as most parent view FrameLayout with argument
My styles.xml(v21) look like
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="AppTheme.NoStatusBar" parent="AppTheme.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
And styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Maybe the point key here is to be sure that you use AppCompactActivity as well as you use Theme.AppCompact as root for your styles.

Add this
android:fitsSystemWindows="true"
in the inner views of the AppBarLayout, it solved the issue for me

New Android Design Library bug with AppBarLayout and Toolbar

I am using the new Android Design Library based on this example chrisbanes/cheesesquare in github and here
I have run the example and I am having problems with Toolbar inside CheeseDetailActivity. The toolbar isnt shown as it should. Have a look at the images below:
At first image you can see the toolbar isn't shown correctly.
At the second image you can see that the toolbar is shown correctly but the notification bar is white. This happens because I removed from actiivty_detail.xml android:fitsSystemWindows="true" from android.support.design.widget.CoordinatorLayout
I think that fitsSystemWindows should be true and the problem is related with android.support.design.widget.AppBarLayout but I don't have any idea how I can fix this problem. I tried with marginTop with the same height as notificationBar but it didn't work.
Any suggestion is appreciated :)
This is a part of the activity_detail.xml:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Change your Design Library with New Version build.gradle file in app folder like:
compile 'com.android.support:design:22.2.1'
As Updated in +AndroidDevelopers
I got output like:
It will helps you.
Thanks :)

Looks like this is a bug in com.android.support:design:22.2.0.
It will be fixed, it's marked as future release. So lets hope it will be soon.
Links with issues:
https://code.google.com/p/android/issues/detail?id=175240
and https://code.google.com/p/android/issues/detail?id=175069

had the same problem put in style with windowActionBar and windowNoTitle and decided my problem.
<style name="AppTheme.base" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

Here is some working workaround for API 21:
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
marginResult = 0;
int resourceId = getResources().getIdentifier(getString(R.string.identifier_status_bar_height), getString(R.string.identifier_dimen), getString(R.string.identifier_android));
if (resourceId > 0) {
marginResult = getResources().getDimensionPixelSize(resourceId)*2;
}
CollapsingToolbarLayout.LayoutParams params = (CollapsingToolbarLayout.LayoutParams) mToolbar.getLayoutParams();
params.topMargin -= marginResult;
mToolbar.setLayoutParams(params);}

I had same problem, my toolbar was displaying wrong on API level greater than 21. I was using android.support.v7.widget.Toolbar as supportActionBar() and below content is in fragment, see pictures:
on aplication start, toolbar is displaying wrong
and when i colapse android.support.design.widget.CollapsingToolbarLayout, the picture is not hidden completely
I resolved this when i added android:fitsSystemWindows="true" attribute to the root element of view where Toolbar is located.
Now:
toolbar is displaying normal and
picture is hidden completely