CollapsingToolbarLayout not collapsing when using ScrollView (and NestedScrollView)

Question

I´m trying to use CollapsingToolbarLayout with a ScrollView but I do not get it to work. I try this:

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_below="@+id/toolbar"
                android:scrollbars="none"
                android:overScrollMode="never"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:behavior_overlapTop="192dp"
                android:layout_height="match_parent">

            <LinearLayout android:layout_width="match_parent"
                          android:orientation="vertical"
                          android:padding="@dimen/medium_padding"
                          android:layout_height="match_parent">

                          <!-- my content -->


            </LinearLayout>

        </android.support.v4.widget.NestedScrollView>



        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
        <ImageView
                android:src="@drawable/fondo_drawer"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                android:minHeight="100dp"/>

    </android.support.design.widget.CollapsingToolbarLayout>

I tested with ScrollView and NestedScrollView unsuccessfully.

Any ideas? Thanks in advance!

Answer 1

I ran into the same mistake abhishek's answer is perfect.

I want to add little bit. If you do android:fitsSystemWindows="true" only for AppBarLayout it will work, you don't have to set it for ImageView and ToolBar - since they are part of AppBarLayout and this will be applicable for them as well.

Have a look here - https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec#.an1hvz44l

System windows are the parts of the screen where the system is drawing either non-interactive (in the case of the status bar) or interactive (in the case of the navigation bar) content.

Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.

Answer 2

i think

android:fitsSystemWindows="true" is the cause.

check about my simple working example code.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/product_detail_main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:apptools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/product_detail_appBar_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/detail_product_collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:foregroundGravity="bottom|right"
            android:foregroundTintMode="add"
            android:clipToPadding="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="@dimen/space_xxlarge"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/image"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/product_toolBar_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin"
              app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
              app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
           app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
 ........
<android.support.design.widget.CoordinatorLayout

you can check this link http://inthecheesefactory.com/blog/android-design-support-library-codelab/en