Q:

Issue with coordinator layout and toolbar

I am making a layout where i want my image to be drawn behind the status bar. I am using a coordinator layout for this but have encountered a strange problem.
When i am using the code given below i am able to achieve this
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<ImageView
    android:id="@+id/album_art_playing"
    android:layout_width="match_parent"
    android:layout_height="360dp"
    android:fitsSystemWindows="true"/>

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"/>
.....
</android.support.design.widget.CoordinatorLayout>

But when i move my toolbar view above the image view i am getting this and the layout file looks 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"/>

<ImageView
    android:id="@+id/album_art_playing"
    android:layout_width="match_parent"
    android:layout_height="360dp"
    android:fitsSystemWindows="true"/>
....
</android.support.design.widget.CoordinatorLayout>

I am unable to understand why moving the toolbar widget above the image view changes the behaviour of the image view and the image is not drawn behind the status bar.  And how can i achieve this. I want my image to be brawn behind the status bar but also want my toolbar title and icon to appear which as of now does not.

A:

You're right, 

perhaps overlapped by the image view.

Because CoordinatorLayout extends FrameLayout from android documentation of CoordinatorLayout 

CoordinatorLayout is a super-powered FrameLayout.

So it inherits all the properties of FrameLayout so whenever you place a view after another view it will overlap the view. 
Now comes the main problem 
Why a white/grey colored status bar is visible when you change the order of toolbar?
It is because from lollipop or above system can draw a translucent status bar if you use following in your theme  (This won't work if you're not using this)
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

so in your first image, it is showing a grey color because you haven't defined a background color of the toolbar(it only considers the view underneath it, in this case, toolbar is underneath it), Just change the color of your toolbar to pink and it will show a preview like this 

I think you will get the idea when you change the color of the toolbar. 
Just in case if you want a transparent toolbar then you will have to set 100% transparent background color to your toolbar and be sure to set 
in OnCreate of actvity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); 
and in your theme:
<item name="android:statusBarColor">@android:color/transparent</item>

