0

I have a problem with the CollapsingToolbarLayout. I don't want to scroll the NestedScrollView to the end because it leaves a lot of blank space if content, text in my case, is short. Here are screenshots:

enter image description here

And:

enter image description here

Here's XML:

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_description"
        >



        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll"
            >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax">

             <android.support.v4.view.ViewPager
                    android:id="@+id/image_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_above="@+id/dots_holder" />
                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="15dp"
                    android:id="@+id/dots_holder"
                    android:paddingTop="2dp"
                    android:paddingBottom="2dp"
                    android:gravity="center"
                    android:layout_alignParentBottom="true"
                    android:visibility="gone" />

            </RelativeLayout>


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



    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:padding="8dp"
        android:id="@+id/nested_scrollView">

      <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEXT"
                android:id="@+id/name"
                android:textSize="@dimen/abc_text_size_headline_material"
                android:textColor="@color/abc_primary_text_material_light" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEXT"
                android:id="@+id/othernames"
                android:layout_below="@+id/name"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:textColor="@color/secondary_text_default_material_light" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="first"
                android:id="@+id/season_head"
                android:layout_alignParentBottom="false"
                android:layout_alignParentLeft="false"
                android:layout_below="@+id/othernames"
                android:layout_marginTop="12dp"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:textColor="@color/abc_primary_text_material_light" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="second"
                android:id="@+id/places_head"
                android:layout_marginTop="12dp"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:textColor="@color/abc_primary_text_material_light"
                android:layout_below="@+id/season" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEXT"
                android:id="@+id/season"
                android:layout_below="@+id/season_head"
                android:layout_marginTop="@dimen/desc_clauses_margin"
                android:textSize="@dimen/abc_text_size_body_1_material"
                android:textIsSelectable="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEXT"
                android:id="@+id/places"
                android:layout_below="@+id/places_head"
                android:textSize="@dimen/abc_text_size_body_1_material"
                android:layout_marginTop="@dimen/desc_clauses_margin" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="third"
                android:id="@+id/description_head"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:textColor="@color/abc_primary_text_material_light"
                android:layout_below="@+id/places"
                android:layout_marginTop="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEXT"
                android:id="@+id/description"
                android:layout_below="@+id/description_head"
                android:textSize="@dimen/abc_text_size_body_1_material"
                android:layout_marginTop="@dimen/desc_clauses_margin" />
    </android.support.v4.widget.NestedScrollView>

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

I'd want to stop scrolling exactly when the content is over.

Daniel
  • 2,339
  • 9
  • 21
  • 28
Nemesis
  • 13
  • 3
  • The issue is that when you use `AppBarLayout` and `appbar_scrolling_view_behavior`, the view beneath the `AppBarLayout` (in your case `NestedScrollView`) is sized as though the app bar is *already* scrolled out of view, then positioned under the app bar cutting off the bottom. So on that initial scroll, you may think that something is actually scrolling, but the entire scroll view is merely moving up while the app bar moves out of the way. So achieving your result involves some tricky code for measuring the content and disabling the scroll behavior based on its size. Sorry. – kris larson Jul 06 '16 at 19:58
  • Unfortunately, i couldn't come up with a solution for CollapsingToolbarLayout, but i have found a simple solution for parallax effect just like in collapsing toolbar, here is the solution: http://stackoverflow.com/a/34421687/6475516 – Nemesis Jul 08 '16 at 11:20

1 Answers1

2

A bit late to respond to this question but I think there are other developers who have similar question hence responding to it now. To understand why this is happening we have to understand these core concepts:

  • CoordinatorLayout is actually a FrameLayout with some custom changes to give the behavior we see. So when we use AppBarLayout and NestedScrollView as children, they essentially overlap each other. CoordinatorLayout gets the height of AppBarLayout and makes sure that NestedScroll view is shown below AppBarLayout (if it was normal FrameLayout it would show underneath or over the AppBar based on the order). This is why we see the screen like to screenshot 1 above.

  • But why blank space? when you scroll up CoordinatorLayout is scrolling AppBarLayout up and collapsing the CollapsingToolBar but also moving the NestedScrollView up to give a scrolling behavior. When NestedScrollView reaches to the top, now the screen has the whole view to show the content. Since our NestedScrollView has wrap_content, it is actually taking only space which is required for showing the context(TextView) and the rest of the area is app/activity default background. Our activity and the NestedScrollView background is the same hence it gives a feeling that your NestedScrollView is taking the whole space but actually not. Try setting a different color background to NestedScrollView and it will make more sense.

  • If you really want to achieve the behavior mentioned above, one way to do is to avoid NestedScrollView and pull the RelativeLayout out and make it a child of outer CoordinatorLayout and it will show the expected result. The side effect of this is that you won't get the scroll effect on TextView content but toolbar will work. If you want scrolling behavior, you have to use NestedScrollView and this will behave the same even without the Coordinator because there is not much to cover the whole screen and ought to see the blank space. Hope this helps.

Vab
  • 74
  • 6