CoordinatorLayout using ViewPager RecyclerView

Question

I am using the CoordinatorLayout view from android.support.design . I want to bind app:layout_behavior to a RecyclerView fragment?

In the example provided by Google, they only attach it to the RecyclerView the same XML file where the CoordinatorLayout was attached.

Is there a way to bind CoordinatorLayout to a RecyclerView fragment within the ViewPager ?

A sample is in this blog post on the Android Developers Blog.

Answer 1

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

Here is an xml file that defines how you can indirectly attach a coordinator location to view 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 allow the viewpager to have the layout_behavior attribute.

Answer 2

It might be dumb, but it didn’t work because the build tool was not updated in build.gradle version of the application to 22, I used 21, so it doesn’t work properly.

Edit:

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

Answer 3

Use FrameLayout and paste the fragment into this FrameLayout. Then set app: layout_behavior to it. The only thing you need to do is set layout_behavior to the brother from AppBayLayout, and that the brother will be 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> 

Answer 4

I recently had the same issue that was mentioned in the post and the above solutions did not work for me. Fortunately, I managed to solve this. So, just to share, I post here

The problem was that in my code I installed

 recyclerView.setNestedScrollingEnabled(false); 

due to which the application panel did not respond to recyclerView scrolls, despite the fact that the layout_behaviour attribute for viewPager was set. Change the above attribute to

 recyclerView.setNestedScrollingEnabled(true); 

solved the problem, and the application bar began to respond to scrolling recylerView.

Answer 5

After several tests, I found that putting a TabLayout outside of the AppBarLayout would work, regardless of what the Viewpager 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> 

Answer 6

I have the same problem, I decided to scroll, but placed the toolbar and tabs inside the application panel and wrapped it, and the viewpager with the coordinator. Also in the layout of my processing view (for pumping) I add layout_behavior. It works, but the problem is that everything is on top of 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 adapter layout

  <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 make it work better, tell me.