CollapsingToolbarLayout not collapsing when using viewpager

Question

I have search all questions here related to my question but none helped so far. What I am trying to achieve is to have the middle toolbar collapse when the the fragment in the ViewPager is scrolled down and the TabLayout will just pin. Here's the structure of my main layout file. Nothing happens when I scroll down.

Please help me. Any help would be greatly appreciated

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" >
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_height="72dp"
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <RelativeLayout android:id="@+id/relativeLayout"
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                android:layout_gravity="top"
                android:paddingRight="20dp"
                android:paddingLeft="20dp"
                android:layout_height="wrap_content">

                <TextView android:id="@+id/tv_song_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#FFFFFF"
                    android:layout_alignParentLeft="true"
                    android:textSize="20sp"
                    android:ellipsize="marquee"
                    android:singleLine="true"
                    android:text="Bloody Stream"/>
                <TextView android:id="@+id/tv_artist"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/tv_song_name"
                    android:textSize="15sp"
                    android:fontFamily="Sans-serif-light"
                    android:textColor="#9E9E9E"
                    android:text="by Coda"/>
            </RelativeLayout>

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

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:layout_below="@+id/tool_bar"
        android:layout_gravity="center_horizontal"
        android:layout_alignParentStart="true"
        android:fitsSystemWindows="true"
        app:tabGravity="fill"
        app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>


<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_file_download_white_24dp" />

score 2 · Answer 1 · answered Aug 23 '16 at 03:46

2

The scrolling container in your Fragment must support nested scrolling. This means you should use either a NestedScrollView or a RecyclerView.

answered Aug 23 '16 at 03:46

Karakuri

38,365
12
84
104

My fragment layout structure has a root of RelativeLayout with a child SwipeRefreshlayout. Should I enclose the SwipeRefreshlayout with NestedScrollView? – Joseph Avegail Tadiarca Aug 23 '16 at 03:49
I'm not sure, I don't use SwipeRefreshLayout, you will have to experiment with it and see. – Karakuri Aug 23 '16 at 04:07
I have the same problem like this user and applied the fix but still mine won't scroll. http://stackoverflow.com/questions/37520497/fragment-within-collapsingtoolbarlayout-with-viewpager-wont-slide-down – Joseph Avegail Tadiarca Aug 23 '16 at 14:39

score 0 · Answer 2 · answered Sep 18 '16 at 17:24

Seems like I have to include the toolbar that has the navigation back button inside the CollapsingToolbarLayout. It's working as what I intended now. Thank you for all the answers.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/smooth_appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">


    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_height="wrap_content"
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        app:titleEnabled="false"
        android:fitsSystemWindows="true"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
        app:popupTheme="@style/AppTheme.PopupOverlay">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:layout_marginTop="?android:attr/actionBarSize"
            app:layout_collapseMode="parallax">

CollapsingToolbarLayout not collapsing when using viewpager

2 Answers2