Stop CollapsingToolbar from collapsing after Neste

Question

In Android, how can I get the CollapsingToolbar to stop collapsing if the NestedScrollView runs out of content to scroll? This functionality currently exists in the Contacts app on Android 5.1.1. However, in my code when the NestedScrollView stops scrolling the toolbar continues to collapse leaving gap between the two.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <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"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="@dimen/content_padding_normal"
            app:expandedTitleMarginEnd="64dp">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:titleTextAppearance="@style/ActionBar.TitleText"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="@dimen/keyline_2">
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/element_spacing_normal">
                <include
                    layout="@layout/ViewLoadingIndeterminate" />
                <LinearLayout
                    android:id="@+id/progress_status_container"
                    style="@style/ConnectionFieldContainer"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:orientation="vertical"
                    android:visibility="visible">
                    <Spinner
                        android:id="@+id/progress_status"
                        android:layout_width="match_parent"
                        style="@style/Text.ConnectionField" />
                    <TextView
                        style="@style/Text.ConnectionLabel"
                        android:text="@string/mobile.customer.connect.progress.status" />
                </LinearLayout>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/element_spacing_normal">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <LinearLayout
                        android:id="@+id/email1_container"
                        style="@style/ConnectionFieldContainer"
                        android:orientation="horizontal"
                        tools:visibility="visible">
                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_weight="1"
                            android:orientation="vertical">
                            <TextView
                                android:id="@+id/email1"
                                style="@style/Text.ConnectionField"
                                tools:text="[e-mail]" />
                            <TextView
                                style="@style/Text.ConnectionLabel"
                                android:text="@string/mobile.customer.connect.email1" />
                        </LinearLayout>
                        <ImageButton
                            android:id="@+id/action_email1"
                            style="@style/Button.ConnectionAction"
                            android:src="@drawable/ic_email_black_24dp" />
                    </LinearLayout>
                    <LinearLayout
                        android:id="@+id/email2_container"
                        style="@style/ConnectionFieldContainer"
                        android:orientation="horizontal"
                        tools:visibility="visible">
                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_weight="1"
                            android:orientation="vertical">
                            <TextView
                                android:id="@+id/email2"
                                style="@style/Text.ConnectionField"
                                tools:text="[e-mail]" />
                            <TextView
                                style="@style/Text.ConnectionLabel"
                                android:text="@string/mobile.customer.connect.email2" />
                        </LinearLayout>
                        <ImageButton
                            android:id="@+id/action_email2"
                            style="@style/Button.ConnectionAction"
                            android:src="@drawable/ic_email_black_24dp" />
                    </LinearLayout>
                    <LinearLayout
                        android:id="@+id/phone_day_container"
                        style="@style/ConnectionFieldContainer"
                        android:orientation="horizontal"
                        tools:visibility="visible">
                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_weight="1"
                            android:orientation="vertical">
                            <TextView
                                android:id="@+id/phone_day"
                                style="@style/Text.ConnectionField"
                                tools:text="801-555-1234" />
                            <TextView
                                style="@style/Text.ConnectionLabel"
                                android:text="@string/mobile.customer.connect.phone.day" />
                        </LinearLayout>
                        <ImageButton
                            android:id="@+id/action_call_phone_day"
                            style="@style/Button.ConnectionAction"
                            android:src="@drawable/ic_call_black_24dp" />
                        <ImageButton
                            android:id="@+id/action_text_phone_day"
                            style="@style/Button.ConnectionAction"
                            android:src="@drawable/ic_textsms_black_24dp" />
                    </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/create_reminder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/collapsing_toolbar"
        app:layout_anchorGravity="bottom|right|end"
        app:borderWidth="0dp"
        app:elevation="@dimen/shadow_size"
        android:layout_marginBottom="@dimen/keyline_1"
        android:layout_marginRight="@dimen/keyline_1"
        android:src="@drawable/ic_alarm_add_white_24dp"
        app:backgroundTint="?attr/colorAccent" />
</android.support.design.widget.CoordinatorLayout>

Answer 1

Just add

android:layout_gravity="fill_vertical"

in your NestedScrollView. :)

Answer 2

Today I made a custom Behavior that does just this.

It extends AppBarLayout.ScrollingViewBehavior, so must be set on your scrolling view (NestedScrollView or whatever).

You can find it on Github, let me know if it works.

The key part is programmatically setting the AppBarLayout collapsed height based on the content height, so that when it’s over, the scrolling stops.

Answer 3

Add below line

android:layout_gravity="fill_vertical"

to your Nested ScrollView

Answer 4

I suggest to use natario's solution along with below piece of code to avoid scrimming appBarLayout when scrolling.

app:scrimVisibleHeightTrigger="?attr/actionBarSize"

Answer 5

Make your NestedScrollView as

 <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:scrollbars="none">

The CollapsingToolbarLayout will collapse and NestedScrollView contents will work as you need.

Answer 6

a Quick solution that may not be suitable is, in activity creation, measure the screen height and assign to your nestedScrollView child as minimunHeight. This wont prevent the Appbar from scrolling, but your content will scroll all the way up.

 //Calculate screen height in pixels
 DisplayMetrics displaymetrics = new DisplayMetrics();
 getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
 mScreenHeight = displaymetrics.heightPixels;

 //Get Statusbar size
 int statusBatHeight = 0;
 int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
 if (resourceId > 0) {
      mStatusBarHeight = getResources().getDimensionPixelSize(resourceId);
 }

 mContainer = (FrameLayout) findViewById(R.id.fragment_container);
 mContainer.setMinimumHeight(mScreenHeight - mStatusBarHeight);

Another solution (not the quick one) would be to extend NestedScrollView and override dispatchNestedPreScroll(). This method it is used to tell Coordinator Layout that you have scroll certain amount of pixels. The idea is to calculate if you have already scrolled all the pixels and then call super.dispatchNestedScrollView() or not.

To calculate if you have already displayed all the content you will need the screen size, iterate through your children to measure the content, and how much have you already scrolled.

Things get a little more complicated with the fling.