24

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]

natario
  • 24,954
  • 17
  • 88
  • 158

1 Answers1

27

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.

Community
  • 1
  • 1
natario
  • 24,954
  • 17
  • 88
  • 158
  • 2
    I already used the v23.0.1. But the bottom part of the content inside my NestedScrollView, which is inside CollapsingToolbarLayout, is still hidden. And as you said, it's in the size of the Toolbar. What could be wrong? Should I open a new question? – Dark Leonhart Oct 16 '15 at 11:32
  • @Dark You mean a NestedScrollView inside CollapsingToolbarLayout? Yes, we would need to see your layout. Let me know if you wish. – natario Oct 16 '15 at 12:39
  • I have the other issue: part of the bottom content is never visible (for example, button), but after screen rotation... magic! my content is fully visible now! I have no ideas how to fix it. global layout listener, invalidation, request layout not works. Also layout_marginBottom works bad after screen rotation, and I should to use android:paddingBottom="?attr/actionBarSize". – VKDev Feb 02 '16 at 05:26
  • My issue is the same as VKDev above. If I attempt to use your fix it works the first time the layout is inflated but leaves a margin on the bottom of the screen after rotating. Please help. – Luke Allison Mar 09 '16 at 05:24
  • 1
    Please see the link here http://stackoverflow.com/questions/35893187/using-the-master-detail-template-in-viewpager-fragments-download-link . The issue isn't solved by upgrading the libraries. – Luke Allison Mar 09 '16 at 13:45