ImageView in CollapsingToolbarLayout not covering full height?

Question

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.

Answer 1

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...

Answer 2

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.