CollapsingToolbarLayout and NestedScrollView not working

Question

I am trying to implement CollapsingToolbarLayout with a NestedScrollView and it is displaying the TextView within the NestedScrollView at the bottom and not allowing, scrolling or collapsing the Toolbar. I have gotten this to work with a RecyclerView but not NestedScrollView. When I remove app:layout_behavior="@string/appbar_scrolling_view_behavior the Toolbar collapses but the NestedScrollView is not below the AppBarLayout. Any solutions or suggestions to fix this?

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:fitsSystemWindows="true">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Hello"
                android:textColor="#000"
                android:textSize="16sp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <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">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="134dp"
                android:background="@color/primary"
                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>
</android.support.design.widget.CoordinatorLayout>

Result

enter image description here

Add `android:fitsSystemWindows="true"` in CoordinatorLayout and the NestedScrollView. Next move the nestedScrollview above the AppBarLayout. — Psypher, Jul 04 '15 at 17:22
@ɥʇᴉɾuɐɹ Just updated my answer with what you asked. Still same result. — Eugene H, Jul 04 '15 at 17:29
@ɥʇᴉɾuɐɹ If you have a simple working example of this, post it and I will test it out. — Eugene H, Jul 04 '15 at 17:32
Change `android:layout_height="300dp"` in the AppbarLayout. Ya I had refereed to a project earlier, let.me search that. Meanwhile try this out — Psypher, Jul 04 '15 at 17:37
@ɥʇᴉɾuɐɹ Tried it out, still no luck. Any luck on that reference? — Eugene H, Jul 04 '15 at 17:52
Check this out https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/activity_detail.xml — Psypher, Jul 04 '15 at 17:57
@ɥʇᴉɾuɐɹ It ended up working. Thanks. One thing I noticed, was that if there is not enough views to fill the screeen, it automatically aligns them to the bottom, which could have been causing the issue earlier. — Eugene H, Jul 04 '15 at 18:11
@ɥʇᴉɾuɐɹ Btw Thanks a lot. If you post your answer below I will mark it as correct. — Eugene H, Jul 04 '15 at 21:55
Isn't AppBarLayout supposed to be the first child of CoordinatorLayout? — Eugen Pechanec, Jul 05 '15 at 10:14
It's a known bug, see: https://code.google.com/p/android/issues/detail?id=175732 — Huby, Jul 06 '15 at 20:40

score 8 · Accepted Answer · edited Jul 05 '15 at 15:19

8

Change to some certain height in the AppbarLayout. Example:

android:layout_height="300dp".

The main problem being, the nested scroll view does not have enough views to cause a scroll. Hence the parallax effect would not work.

Here is a working example that uses NestedScrollView and CollapsingToolbarLayout

edited Jul 05 '15 at 15:19

Eugene H

3,520
3
22
39

answered Jul 05 '15 at 01:10

Psypher

10,717
12
59
83

I didn't need to set a specific size on my NestedScrollView, just had to set the height to match_parent instead of wrap_content and I was able to collapse the AppBarLayout without any views in the scrollview. – Danuofr Mar 29 '18 at 21:46

score 0 · Answer 2 · answered Jul 11 '15 at 02:13

I had the same problem and wrote kind of quick fix for that. Assuming, that your LinearLayout containing "Hello" label is bound to mContainer and your Toolbar is bound to mToolbar you can use this:

private void fixNestedScrollViewScrolling() {
    final int bottomMargin = getScreenHeight() - mContainer.getHeight() - mToolbar.getHeight();
    final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
            mContainer.getLayoutParams());
    layoutParams.setMargins(0, 0, 0, bottomMargin);
    mContainer.setLayoutParams(layoutParams);
}

private int getScreenHeight() {
    final Display display = getWindowManager().getDefaultDisplay();
    final Point size = new Point();
    display.getSize(size);
    return size.y;
}

This fix method is called in onCreate method of my Activity:

@Override
protected void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_single_post);

    fixNestedScrollViewScrolling();

    // some other stuff here ...
}

Ilia Grabko · Answer 3 · 2019-04-23T17:54:02.480

I had to add CoordinatorLayout to make it works:

<androidx.coordinatorlayout.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"
    xmlns:tools="http://schemas.android.com/tools">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="136dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <!--Your layout here-->

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--And here-->

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

PS: with android support library change androidx.coordinatorlayout.widget.CoordinatorLayout to android.support.design.widget.CoordinatorLayout

and androidx.core.widget.NestedScrollView to android.support.v4.widget.NestedScrollView

CollapsingToolbarLayout and NestedScrollView not working

3 Answers3