CollapsingToolbarLayout ImageView is not scrollable

Question

Using cheesesquare - android support library example is it possible to make the Header ImageView scroll-able?

<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_scrollFlags="scroll" 
            app:layout_collapseMode="parallax" />
            ...
    </android.support.design.widget.CollapsingToolbarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    ....

Notice that i've added added android:fillViewport="true" to NestedScrollView and also added app:layout_scrollFlags="scroll" to the ImageView but when trying to scroll from the ImageView nothing happens.

Answer 1

OK, I did some research in the bug reports, and this is a known bug within the Design Support Library.

Check out the bug report here

Excerpt

I have taken a look at the implementation that backs CoordinatorLayout/AppBarLayout/the Behavior classes etc. The AppBarLayout uses the behaviour defined in AppBarLayout.Behavior by default. This extends ViewOffsetBehavior which in turn extends Behavior. The base Behavior class has the methods onInterceptTouchEvent() and onTouchEvent(), both of which return false (meaning "we don't want to handle touch events"). These methods are not overridden by either ViewOffsetBehavior or AppBarLayout.Behavior, meaning that the touch is left unhandled - which is why it does nothing.

A possible workaround for third-party developers would be to extend AppBarLayout.Behavior and implement onInterceptTouchEvent() and onTouchEvent() and manipulate the app bar accordingly.

Videos

These show the current and intended behavior. These are also from the bug report.

• https://youtu.be/xWadOVEaTSY
• https://youtu.be/J8ITp6RusZo

Answer 2

I found a workaround by embedding the imageView in a NestedScrollView:

  <android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:id="@+id/appbar"
    android:background="@color/transparent"
    android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/transparent"
        app:toolbarId="@+id/toolbar"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll"
             app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <ImageView
                tools:ignore="UnusedAttribute"
                tools:src="@drawable/placeholder"
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:minHeight="200dp"/>
        </android.support.v4.widget.NestedScrollView>
        <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            android:elevation="0dp"
            android:layout_width="match_parent"
            app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

But I haven't tested it in prod as I met another issue with the fling to top gesture which is interrupted when the recyclerview reaches the top ( as explained in the bug report).

Answer 3

From testing this on support library 23.1.1, this issue seems to have been fixed.

compile 'com.android.support:design:23.1.1'

You can now put into your CollapsingToolbarLayout anything, ImageView, RelativeLayout, TextView and it will scroll as intended.