26

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="bgnosis@gmail.com" />
                            <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="alternate@email.com" />
                            <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>

example

Nick
  • 1,733
  • 1
  • 14
  • 24
chase
  • 261
  • 3
  • 6

6 Answers6

15

Just add 

android:layout_gravity="fill_vertical"

in your NestedScrollView. :)

venturidoo
  • 393
  • 1
  • 9
  • 2
    This answer doesn't actually fix the issue. It simply causes the collapsing toolbar and content to collapse all the way to the top, leaving a gap at the bottom of the screen. It does look better than having a gap between the toolbar and the content, but does not actually address the issue. – chase Nov 16 '15 at 14:35
  • 1
    CollapsingToolbar... It's just a waste of time. On some devices the GUI is cut of. – Martin Pfeffer Jan 02 '16 at 21:39
  • How can we achieve this same effect in case of `RecyclerView` in place of `NestedScrollView`? – Vipul Asri Mar 05 '16 at 08:20
  • Thanks buddy, its very helpful. – Android Boy Jun 06 '16 at 11:49
4

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.

natario
  • 24,954
  • 17
  • 88
  • 158
  • 1
    This and DPanic284's answers should be the correct answers. They work like a charm. – Weava Dec 01 '16 at 16:52
  • I have used this which works perfectly. but there is a problem that in my layout I have used many edit texts to which have to set dynamic text which causes layout to elongate.but this scroll behaviour cannot re-measure layout changes. – Afzal Khan Feb 07 '20 at 09:48
2

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.

Ankii Rawat
  • 2,070
  • 17
  • 17
1

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.

juanmeanwhile
  • 2,594
  • 2
  • 24
  • 26
1

Add below line

android:layout_gravity="fill_vertical"

to your Nested ScrollView

NarenderNishad
  • 1,058
  • 1
  • 17
  • 31
1

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

app:scrimVisibleHeightTrigger="?attr/actionBarSize"

Community
  • 1
  • 1
DPanic284
  • 11
  • 1
  • 1