CollapsingToolbar not working with not-so-tall content

natario picture natario · Jun 11, 2015 · Viewed 7k times · Source

I'm pretty sure this is a bug, so I'm asking for a workaround. My layout is like:

<CoordinatorLayout>

    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView/>
            <Toolbar/>
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <android.support.v4.widget.NestedScrollView/> <!-- content here -->

</CoordinatorLayout>

I'm retrieving content from the web, and I don't know how tall it'll be - might be few lines, might be very long. However, I discovered that CollapsingToolbar doesn't work well when content is not big enough to cover the entire screen. Cases:

  • content.height > screen.height : works; swiping top/bottom expands and collapses the toolbar, as well as scrolling content;

  • content.height < screen.height : doesn't. That's not good, because most of the times (content.height + expandedToolbar.height) > screen.height!

In other words, when content is not tall enough, even if content+expandedToolbar is much taller than the whole screen, it doesn't react to scroll gestures and shows some bugs - it might take ten gestures to collapse the toolbar a little bit. So you can hardly reach the bottom part of the content, which is hidden at the bottom because the toolbar is expanded.

Any workaround?

If you want to try, just take the cheesesquare sample project and delete (or reduce) the content inside NestedScrollView in activity_detail.xml [API17 here]

Answer

natario picture natario · Jun 12, 2015

The trick is to add android:layout_gravity="fill_vertical" to the NestedScrollView. This way the toolbar collapses and expands smoothly & reacts to scroll gestures for any non-empty NestedScrollView, no matter its size.

Of course if the scroll view is empty, the toolbar won't collapse by scrolling in the "content" part of the screen. But that doesn't seem so bad to me.

Update

Looks like this solution has some issues with larger contents, as the very bottom part of the content will remain hidden. I could find that the hidden part is (appears to be) as big as the collapsed toolbar height. That makes it easy to define a workaround - just add a margin to the bottom of the ScrollView, so that it gets measured and releases the bottom, hidden part. Thus:

android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"

or whatever size you gave to the Toolbar in your view. Note that this solution fits well with small and large contents, but scrolling is not so smooth with smaller ones.

Update2 (july 2015)

From early tests, it looks that this bug has been fixed in the v22.2.1 release of the Support Design Library.