CoordinatorLayout using the ViewPager's RecyclerView

AndroidAndroid AppcompatAndroid RecyclerviewAndroid Design-LibraryAndroid Coordinatorlayout

Android Problem Overview


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.

Android Solutions


Solution 1 - Android

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.

Solution 2 - Android

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

Solution 3 - Android

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>

Solution 4 - Android

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.

Solution 5 - Android

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>

Solution 6 - Android

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRod_AlgonquinView Question on Stackoverflow
Solution 1 - AndroidandroholicView Answer on Stackoverflow
Solution 2 - AndroidRod_AlgonquinView Answer on Stackoverflow
Solution 3 - AndroidJamView Answer on Stackoverflow
Solution 4 - AndroidMajeed KhanView Answer on Stackoverflow
Solution 5 - Androidweimin wangView Answer on Stackoverflow
Solution 6 - AndroidTarek SrourView Answer on Stackoverflow