CoordinatorLayout using the ViewPager's RecyclerView

Question

I am using the view CoordinatorLayout from android.support.design. I want to attach the app:layout_behavior to the fragment's RecyclerView?

In the example given by Google, they only attach it in the RecyclerView of the same XML file where the CoordinatorLayout was attached.

Is there a way to attach CoordinatorLayout to the fragment's RecyclerView within the ViewPager?

The sample is in this blog post at Android Developers blog.

how u resolved ? i m also facing same issue http://stackoverflow.com/questions/32288013/failed-to-load-fragments-when-tabs-viewpager-inside-scrollview — Erum, Aug 31 '15 at 11:38

score 71 · Accepted Answer · edited Nov 29 '16 at 10:15

Chris Banes has posted a sample on Github which shows exactly what you want to do.

Here is the xml file that defines how one can indirectly attach a coordinator layout to the viewpager's fragments.

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

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

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

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

The idea is to let the viewpager have the layout_behavior attribute.

https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml — androholic, Jun 03 '15 at 20:15
@androholic how u resolved ? http://stackoverflow.com/questions/32288013/failed-to-load-fragments-when-tabs-viewpager-inside-scrollview — Erum, Aug 31 '15 at 11:53
Is it possible to use app:layout_behavior on any view in a viewpager? For example, , non-recyclerview like scrollview? — Song, Dec 22 '15 at 23:23
hi how to design view with scrollable viewpager and recycler card view along with search bar when user scroll down collapse the viewpager images and changes to toolbar looks like google play store app please help me along with navigation drawer — Harsha, Feb 09 '16 at 09:09
This works when I have `RecyclerView` inside the fragment, but when I put `BottomModalSheet` it doesn't work. It doesn't pick up scroll events. Any idea? — Gokhan Arik, Nov 22 '16 at 05:56

Rod_Algonquin · Answer 2 · 2015-07-11T11:03:45.100

14

This might be dumb, but it didn't worked due to the fact that the build tool was not updated in the build.gradle of the application version to 22, I was using 21 that is why it is not working as expected to be.

Edit:

Also what SanderTuit said: adding com.android.support:recyclerview-v7:22.2.0 will also solve the problem

edited Jul 11 '15 at 11:03

answered May 31 '15 at 04:45

Rod_Algonquin

26,074
6
52
63

12

I'd like to add to this that you need the latest RecyclerView as well: com.android.support:recyclerview-v7:22.2.0. – SanderTuit Jun 01 '15 at 16:03
Saved my day! Thanks! – Kiril Aleksandrov Jul 11 '15 at 10:24
Is there a way i can keep all support libraries at the newest Version without editing the build.gradle everytime? – Tomas K Aug 10 '15 at 11:59
1

@TomasK you can always put plus sign after the version to indicate to use latest version of the library, `com.android.support:design:22.+` – Rod_Algonquin Aug 10 '15 at 22:08
I have it like this but it seems like Android Studio is still not updating it. Is there a "check for updates" button? – Tomas K Aug 11 '15 at 08:16
hi how to design view with scrollable viewpager and recycler card view along with search bar when user scroll down collapse the viewpager images and changes to toolbar looks like google play store app please help me along with navigation drawer – Harsha Feb 09 '16 at 09:08

Jam · Answer 3 · 2015-05-30T01:30:08.553

Use a FrameLayout and inject your fragment into that FrameLayout. Then set app:layout_behavior to it. The only thing you need to do is set layout_behavior to a sibling of AppBayLayout and that sibling will below the toolbar.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Is it tested? I mean i have a similar layout, but the toolbar doesn't respond to the scrolling events of viewpager inside my fragment (that is injected into the FrameLayout) — Vamsi Challa, Jun 10 '15 at 09:29
The CoordinatorLayout doesnot scroll at all when Framelayout contains a recycler View. — Roadblock, Aug 17 '15 at 08:36
Works for me with a `RecyclerView` as `Fragment` root in `@+id/frame` — Yaroslav Mytkalyk, Dec 22 '15 at 11:51

score 6 · Answer 4 · answered Feb 04 '17 at 03:51

I recently had the same problem mentioned in the post, and the above solutions did not work for me. Luckily I managed to solve it. So just to share I am posting here

The problem was that in my code I had set

recyclerView.setNestedScrollingEnabled(false);

due to which the appbar was not responding to recyclerView's scrolls despite setting the layout_behaviour attribute to the viewPager. Changing the above-mentioned attribute to

recyclerView.setNestedScrollingEnabled(true);

solved the problem and the appbar started responding to the recylerView's scroll.

U saved my day. I was dumb. I had the same code. And I didn't even know what the code is for when I inserted it. `setNestedScrollingEnabled` is needed if the `RecyclerView` is wrapped with `NestedScrollView` but it will removes `RecyclerView`'s recycle function. — wonsuc, Sep 17 '17 at 18:30

weimin wang · Answer 5 · 2015-09-07T09:58:59.123

After a few tests, I found that put the TabLayout outside AppBarLayout, will works, whatever the viewpager's Fragment contains. This is my main xml.

<com.tqmall.legend.konwledge.view.VerticalSwipeRefreshLayout       xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/swipe_refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFE6ECF0">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/kn_main_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@android:color/black"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <include
                layout="@layout/banner_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:background="#33000000"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/main_fragment_issue_list_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabGravity="center"
            app:tabIndicatorColor="#FF2CA2D5"
            app:tabPaddingEnd="30sp"
            app:tabPaddingStart="30sp"
            app:tabSelectedTextColor="#FF2CA2D5"
            app:tabTextColor="#FF4F5354" />

        <android.support.v4.view.ViewPager
            android:id="@+id/main_fragment_issue_list_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Jeremy Huddleston Sequoia, Sep 07 '15 at 08:23
How to design Flipkart HomeScreen design with coordinatetoolbar with viewpager images and recyclerview searchview layout design — Harsha, Feb 26 '16 at 05:51

score -2 · Answer 6 · answered May 30 '15 at 00:41

I'm having the same problem, i solved the scrolling but putting toolbar and the tabs inside the app bar and wrap it and the viewpager with a coordinatorlayout. Also in the layout of my recycle view(to be inflated) i add the layout_behavior. It works but the problem is everything is over each other.

This is my main page

 <android.support.design.widget.CoordinatorLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/music_foot"

    >
    <android.support.v4.view.ViewPager

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"
        />
    <view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        class="android.support.design.widget.AppBarLayout"
        android:id="@+id/appBar"
        > 
<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#1e88e5"
        android:id="@+id/toolbar"
        app:layout_scrollFlags="scroll|enterAlways"
        ></android.support.v7.widget.Toolbar>
        <view
            android:layout_width="match_parent"
            android:layout_height="56dp"
            class="com.astuetz.PagerSlidingTabStrip"
            android:id="@+id/pager_tabs"
            android:layout_below="@+id/appBar"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
    </view>

and this is my layout for the adapter

   <android.support.v7.widget.RecyclerView

   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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/recycleView" />

If I get it to work better ill tell you.

CoordinatorLayout using the ViewPager's RecyclerView

6 Answers6

Linked

Related