Collapsing toolbar and nestedscrollview not scrolling smoothly

Question

Nested scroll view scrolls smoothly on scrolling down but on scroll up it is sluggish.Collapsing toolbar(with an image view and framelayout) upon scrolling up doesn't renders its content(remains blank). I have tried every flag in collapsing toolbar.

<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    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="wrap_content"
        android:fitsSystemWindows="true"

        app:contentScrim="?attr/colorPrimary"

        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="100dp"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/pic"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

        <include
            android:id="@+id/framelayout"
            layout="@layout/header_layout"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            android:minHeight="100dp"/>


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


<!-- Your Scrollable View -->
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"

    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="24dp">



      </LinearLayout>



</android.support.v4.widget.NestedScrollView>


<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#da1b75"
    android:orientation="horizontal"
    android:textColor="#ffffff"
    android:theme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_anchor="@id/appbar"
    app:layout_collapseMode="pin"
    app:title="">



</android.support.v7.widget.Toolbar>

shouldn't the toolbar be inside the collapsing toolbar layout.? there should be only one parallax view and other view should be toolbar in collapsing toolbar layout i guess — Ravi Theja, Feb 27 '16 at 07:24
Are there complex Views in your NestedScrollView?Does your NestedScrollView scrolls smoothly without CoordinatorLayout? — sockeqwe, Mar 28 '16 at 00:03

score 9 · Answer 1 · answered Jan 11 '17 at 11:53

Make the direct child of nested scrollview clickable ( incase you don't have just one child element,add a layout and put all your UI elements into it and make the layout clickable)
android:clickable="true"
I was facing similar issue and this worked for me !

Here's the code I have been working on -

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.testrecycler.MaterialActivity"
>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:fitsSystemWindows="true"
    >
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleTextAppearance="@style/expandedappbar"
        app:collapsedTitleTextAppearance="@style/collapsedappbar"
        app:statusBarScrim="@color/colorPrimaryDark"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/sample"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

<include layout="@layout/content_material" />

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

And here is the file content_material.xml having NestedScrollView.It has one child element(TextView) which has been made clickable.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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/content_material"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="test.testrecycler.MaterialActivity"
tools:showIn="@layout/activity_material">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:text="This is an association football club formed in 1983, based in the town of Dover, Kent, England. In the 1989–90 season Dover
    Athletic won the Southern League championship, but failed to gain promotion to the Football Conference as the club's ground did not meet
    the required standard. Three seasons later the team won the title again and this time gained promotion to the Conference, where they spent
    nine seasons before being relegated. The club was transferred to the Isthmian League Premier Division in 2004, but another poor season led
    the club to a further relegation. After three seasons in the Isthmian League Division One South, the club won the championship and promotion
    back to the Premier Division, and the following season won another championship and promotion to Conference South. In the 2013–14 season,
    Dover defeated Ebbsfleet United to return to the Conference Premier after a twelve-year absence. Nicknamed the Whites for their white shirts,
    they have played at the Crabble Athletic Ground since the club's formation. Their best performance in the FA Cup was reaching the third
    round proper in both the 2010–11 and 2014–15 seasons. (Full article...)
    Recently featured: Kalki Koechlin Rogue River (Oregon) Operation Ironside
    Archive By email More featured articles...
    his time gained promotion to the Conference, where they spent
    nine seasons before being relegated. The club was transferred to the Isthmian League Premier Division in 2004, but another poor season led
    the club to a further relegation. After three seasons in the Isthmian League Division One South, the club won the championship and promotion
    back to the Premier Division, and the following season won another championship and promotion to Conference South. In the 2013–14 season,
    Dover defeated Ebbsfleet United to return to the Conference Premier after a twelve-year absence. Nicknamed the Whites for their white shirts,
    they have played at the Crabble Athletic Ground since the club's formation. Their best performance in the FA Cup was reaching the third
    round proper in both the 2010–11 and 2014–15 seasons. (Full article...)" />
</android.support.v4.widget.NestedScrollView>

Sandesh Baliga · Answer 2 · 2018-12-11T12:48:38.270

3

UPDATE: You can reduce image size by simply right clicking on the image in ANDROID STUDIO and Convert image to webp. This will drastically reduce image size

Its very simple. I struggled a lot and finally got to know its a problem with high resolution image I had placed in src of ImageView. Solution: Just lower the resolution of the image keeping dimensions same. (Probably using Photoshop).

Worked for me

edited Dec 11 '18 at 12:48

answered Apr 24 '17 at 03:13

Sandesh Baliga

427
4
16

score 0 · Answer 3 · answered Mar 27 '16 at 23:49

I think you forget closing tag for CoordinatorLayout. Also, put toolbar on CollapsingToolbarLayout

<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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="wrap_content"
            android:fitsSystemWindows="true"

            app:contentScrim="?attr/colorPrimary"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="100dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/pic"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                app:layout_scrollFlags="scroll|exitUntilCollapsed" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#da1b75"
                android:orientation="horizontal"
                android:textColor="#ffffff"
                android:theme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_anchor="@id/appbar"
                app:layout_collapseMode="pin"
                app:title="Your title">

            </android.support.v7.widget.Toolbar>


<!-- What is this for?

            <include
                android:id="@+id/framelayout"
                layout="@layout/header_layout"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:minHeight="100dp"/>
-->

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


    <!-- Your Scrollable View -->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">



          </LinearLayout>



    </android.support.v4.widget.NestedScrollView>

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

score 0 · Answer 4 · answered Jul 04 '16 at 17:08

0

I was facing a similar issues with layout containing coordinator layout and Fragments which contained RecyclerView. I added following code in CollapsingToolbarLayout to make scrolling smooth.

app:layout_scrollFlags="scroll|enterAlways"

answered Jul 04 '16 at 17:08

Rohan Kandwal

8,402
7
67
103

score 0 · Answer 5 · answered Jul 19 '18 at 17:14

CoordinatorLayout and CollapsingToolbarLayout smooth scroll is a bug and Google still has not fixed it. :|

remove NestedScrollView. RecyclerView with app:layout_behavior="@string/appbar_scrolling_view_behavior" That's enough and fix.

you can use third party library: https://github.com/henrytao-me/smooth-app-bar-layout

score 0 · Answer 6 · answered Apr 07 '20 at 16:33

0

If your manifest file has a android:hardwareAccelerated="false" line, delete it.

answered Apr 07 '20 at 16:33

Jetwiz

363
2
12

score 0 · Answer 7 · answered Apr 30 '20 at 14:22

After several attumpts, i found the right solution, not the right once but it will fixing your issue,

just try to change CollapsingToolbarLayout layout_scrollInterpolator from decelerate_interpolator to a liniare one like: linear_interpolator.

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMargin="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/linear_interpolator">

I hope that will help you.

Collapsing toolbar and nestedscrollview not scrolling smoothly

7 Answers7

Linked