Develop Reference

Coordinator Layout, Toolbar top margin weird background

I am trying to implement a CoordinatorLayout in which I need a shrinking card view. I plan to have different layouts for expanded and shrunk state of this card view later on. I have successfully implemented empty card view but I am getting a weird background in top margin of this card view.
Its difficult to explain in words so here are the pictures
Here is how my XML looks like for this activity
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:layout_margin="16dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<!--<android.support.v7.widget.CardView-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:background="#color/colorAccent"-->
<!--android:layout_margin="8dp"/>-->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
I want this toolbar to float like a card view. Let me know if more details are needed from my end.
You can find full source code on Github Here.

You are setting layout_margin to your AppBarLayoutwhich sets margin for this view vertically as well as horizontally (simply for top, bottom, right and left).
If you want to set margin from a specific side then you have to set margins manually by layout_marginLeft, layout_marginRight, layout_marginBottom and layout_marginTop.
So simply, if you want to remove top margin. Then simply set margins manually as,
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp">
<!-- your components here -->
</android.support.design.widget.AppBarLayout>

I ended up adding the same amount padding to the CoordinatorLayout
android:paddingTop="16dp"
change android:layout_margin="16" in your AppBarLayout to
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
I have tested it and it works

remove attribute android:fitsSystemWindows="true" in android.support.design.widget.CoordinatorLayout

Coordinator Layout content is showing behind the status bar

I'm building a toolbar with a map fragment as part of it. The toolbar is fixed in position and is opaque.
Whenever the view's content is scrolled upwards, the map fragment moves with it but it is visible above the toolbar (and therefore between the status bar itself and the statusbar's orange background).
This is the resulting issue:
If I scroll a bit more, the scrim fades in normally, but too late.
Is there a way of not drawing the content when it goes above the toolbar? Or a way of making the status bar background to be drawn in front of the AppBarLayout content?
I've tried drawing a view in front of the AppBarLayout (right below the statusbar), but once the MapFragment is scrolled all the way up, it is then brought to front of that view, making the MapFragment visible during a small instant.
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/promotion_details_image_height"
android:clickable="true"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/orange"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="none"
tools:context=".restaurants.stores.StoresFragment" />
<ImageView
android:id="#+id/minimizeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/stores_details_minimize_margin"
android:clickable="true"
android:contentDescription="#null"
android:paddingTop="#dimen/status_bar_height"
android:src="#drawable/selector_map_minimize_btn"
android:visibility="gone" />
<include
android:id="#+id/cardDetailsLayout"
layout="#layout/store_card_small_detail"
android:layout_width="match_parent"
android:layout_height="#dimen/stores_details_card_height"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:visibility="gone" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.app.views.FontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="#string/store_toolbar_text"
android:textColor="#color/white"
android:textSize="#dimen/toolbar_text_size"
app:font="#string/fontFlamaMedium" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Edit:
In the layout xml the android:layout_behavior attribute associated with my RecyclerView, but the toolbar's content has the correct behaviour, the problem is that it is visible under the statusbar, which I don't want it to.

You should remove your argument:android:fitsSystemWindows="true"
More about this on this blogPost from a google developper :
https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec

Remove this attribute from Toolbar
android:background="?attr/colorPrimary"
And add this attribute to CollapsingToolbar
app:contentScrim="?attr/colorPrimary"
The contentScrim will control the color of the Toolbar and ensure the color only appears when the background image has faded out

Android CollapsingToolbarLayout Title background

I'm working with the CollapsingToolbarLayout from the new Android Design Support Library.
I have set its title and it is working fine, the only problem I still have is that when you scroll, the text is lost, depending on the image in the background.
What I'd like to do, is set a background to the CollapsingToolbarLayout title, but I haven't find a way to do it.
Is there anyway to achieve this?
Layout:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/ivBigImage"
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="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_gravity="fill_vertical"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:id="#+id/cvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<LinearLayout
style="#style/Image.Info.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/description"
android:textAppearance="#style/TextAppearance.AppCompat.Title"/>
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Setting up the CollapsingToolbarLayout title in the activity:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Some title here");
Edit:
Here you can see a sequence of images when I collapse the toolbar. You can see how the title text is not readable. The problem is that I don't have control of the images that I show, so for some images it looks ok, but for others, like this example, it doesn't look good at all and it is not readable. What I had in mind was maybe add some kind of background to the text, so there is always the same color at the back of the text and it is always readable.

Use a text protection scrim(scroll down a bit). My example assumes the title text is white, so some tweaks may be necessary to optimize for your case.
Inside your CollapsingToolbarLayout, add the following after ivBigImage:
<View
android:layout_width="match_parent"
android:layout_height="#dimen/sheet_text_scrim_height_top"
android:background="#drawable/scrim_top"
app:layout_collapseMode="pin"/>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/sheet_text_scrim_height_bottom"
android:layout_gravity="bottom"
android:layout_alignBottom="#+id/image"
android:background="#drawable/scrim_bottom"/>
In your Drawable folder, add:
scrim_top.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:startColor="#color/translucent_scrim_top"
android:centerColor="#color/translucent_scrim_top_center"
android:endColor="#android:color/transparent"/>
</shape>
and scrim_bottom.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:startColor="#color/translucent_scrim_bottom"
android:centerColor="#color/translucent_scrim_bottom_center"
android:endColor="#android:color/transparent"/>
</shape>
For colors, you should make these darker in initial testing so it's more obvious you have it working, but for production I used:
<color name="translucent_scrim_top">#26000000</color>
<color name="translucent_scrim_top_center">#0C000000</color>
<color name="translucent_scrim_bottom">#2A000000</color>
<color name="translucent_scrim_bottom_center">#0D000000</color>
And for dimensions, I used a height of 88dp.

Use a text protection scrim from the example of Amagi82 and add on the CollapsingToolbarLayout the app:expandedTitleTextAppearance parameter.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
.
app:expandedTitleTextAppearance="#style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"
.
.
app:layout_scrollFlags="scroll|exitUntilCollapsed">
For example add this on you style xml:
<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
<item name="android:shadowDy">0</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowRadius">8</item>
<item name="android:shadowColor">#android:color/black</item>
</style>

Edit:
If you want to change the color of the toolbar once it has "shrunk", you need to set the contentScrim attribute of the collapsing toolbar layout to that color:
<android.support.design.widget.CollapsingToolbarLayout
app:contentScrim="#color/[color you want]"
...>
Pointing the value of this attribute to the color you want the toolbar to turn into will solve your issue, as I understand it.
Hope that answers your question!

That's a lot of work do achieve here by writing that much of code.
I achieved that by 2 ways.
1 A simple workaround by using a View with TransparentBlack color
CODE>>
Code explaination:1 The CollapsingToolbarLayout has a style with only a text size.2 Default CollapsingToolbarLayout margin bottom is overridden to 16dp.3. Our header with parallax collapseMode is a RelativeLayout with an ImaveView and a View.4. This simple View with a BG at the bottom of the top header Relative layout with colour of contrast (here #77000000), acts as the BG for CollapsingToolbarLayout's collapsed Title in white color.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/redeem_detail_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_window_background"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="16dp"
app:expandedTitleTextAppearance="#style/CollapsingTitleStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--header view-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/redeem_detail_top_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/splash" />
<!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
<View
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#color/black_transparent" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/redeem_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Redeem" />
</android.support.design.widget.CollapsingToolbarLayout>
Images for style 1:
a) When CollapsingToolbarLayout Title is Expanded Fully:
b) When CollapsingToolbarLayout Title is shrinking upon scroll up:
2 Answer above
Method is mentioned already by Joao Ferreira.
Here is what it looks like with shadowRadius=16: Notice the Shadow
PS please update or ask more if any confusions :)

Animating logo along with collapsing toolbar within CoordinatorLayout

I want to implement collapsible toolbar with a logo in the following manner:
Flexible Space with overlapping content, like shown here (have this already);
Parallaxed pattern in this space that gets scrimmed with solid color (have this too)
A horizontally-centered logo, which must appear right above the content but float upwards as toolbar collapses:
In action it should be something like Pesto's leaves here (not necessarily resizable, but that would be a plus):
Here's my layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivityFragment"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<!-- card content -->
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The problem is, wherever I try to place the logo picture, either it doesn't move like I need it too, or everything breaks. It feels like a custom Behavior might be required. Unfortunately neither of the tutorials I found on the new Design library explain how to extend it — only how to use provided stuff. There's no source code of it released, the decompiled code has no comments and is extremely tangled, and the fact that I'm not yet very comfortable with Android's layouting internals makes it even worse.
Please help?

Okay, I sorta did it!
My solution is horrible, so I'll still be expecting for better ones :)
I went on and created a custom view CollapsingLogoToolbarLayout, which is a subclass of CollapsingToolbarLayout. The latter class is where title transition is taken care of — so in my subclass I placed the logic that changed properties of the logo view, namely its translationY based on "expanded-ness" fraction. Gist with code is here. Now after I found suitable offset parameters, my layout looks like this:
...
<com.actinarium.random.common.CollapsingLogoToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:logoViewId="#+id/collapsing_logo"
app:collapsedViewOffset="0dp"
app:expandedViewOffset="-56dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
<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.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/collapsing_logo"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/random_logo"/>
</FrameLayout>
</com.actinarium.random.common.CollapsingLogoToolbarLayout>
...

ImageView in CollapsingToolbarLayout not covering full height?

I have some issues trying to implement the new CollapsingToolbarLayout. Scrolling, expanding and collapsing do work fine, but my ImageView (no matter what type of resource I set) does not cover the full height of the expanded toolbar. See here:
Here I set android:src="#color/red" on the image view, but it never covers the real toolbar. It doesn't work with bitmaps either. I am posting my layout below.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- content -->
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_height="#dimen/appbar_expanded_height"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#color/red_600"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- I load fragments here -->
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<!-- nav drawer -->
<fragment
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
Seems to me that the only difference with, for example, the cheese-Chris Banes-app, is that I'm giving app:layout_behavior to a FrameLayout. However, inside that frame I load fragments that have a NestedScrollView as the root view, and this seems to work fine.

I had the same problem, the collapsing toolbar did not cover the full height of Image, But fixed with removing single line from the AppBarLayout. That is you just need remove android:fitsSystemWindows="true and you are done.
<android.support.design.widget.AppBarLayout
android:layout_height="#dimen/appbar_expanded_height"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
remove the last line, that is as.
android:fitsSystemWindows="true"
that's it, good to go...

I found the blue strip was the toolbar background. Namely, I had:
<item name="toolbarStyle">#style/MyToolbarStyle</item>
in my theme, and:
<style name="MyToolbarStyle">
<item name="android:background">?attr/colorPrimary</item>
</style>
I used to have this to tint toolbars with colorPrimary. However if you want to move to the design library, you should get rid of it: the collapsed toolbar color is already managed by the app:contentScrim attribute on the CollapsingToolbarLayout.