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.

I have the same problem; however, it is because my image fills in the entire screen. So there is nothing I can scroll. I created a workaround to allow scrolling via setting the bottom margin. However, this does not allow me to scroll the ImageView — Christopher Rucinski, Jun 26 '15 at 07:20

score 4 · Answer 1 · answered Jun 26 '15 at 07:48

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.

Thanks for your answer Christopher. I voted it up (-: – royB Jun 26 '15 at 18:57 — royB, Jun 26 '15 at 18:57

score 2 · Answer 2 · answered Jul 08 '15 at 15:36

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

score 0 · Answer 3 · answered Feb 03 '16 at 17:42

0

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.

answered Feb 03 '16 at 17:42

Simon

19,658
27
149
217

It works until you add bottom sheet layout. http://stackoverflow.com/questions/36939982/scrolling-is-not-working-with-coordinatorlayout-parallax-image-bottomsheetla/36968467#36968467 – traninho May 01 '16 at 22:01

CollapsingToolbarLayout ImageView is not scrollable

3 Answers3

Excerpt

Videos

Linked