Android: scrolling recyclerview issues inside viewpager

Question

I have a RecyclerView inside the ViewPager that only occupies the bottom half of the screen, and I want the whole screen to scroll if the RecyclerView receives a vertical scroll event.

The user interface hierarchy in a nutshell:

 CoordinatorLayout --- AppBarLayout --- Toolbar --- Bunch of static LinearLayouts, occupy most of screen --- TabLayout --- ViewPager --- Fragments with RecyclerView 

What I have :

As far as I understand, RecyclerView memory efficient and tries to fit into any space available on the screen. In my application, I have ViewPager hosting several tabs, each of which has a RecyclerView for displaying different things.

Could you give me some ideas on what I can do to make the whole screen? I guess the best shot is to add a parallax CollapsingToolbarLayout to the static content in the middle of the screen. I even tried to do this, but the user interface was completely broken. This is complicated since I want the content in the middle of the screen to scroll, rather than the toolbar at the top. I was not lucky with NestedScrollView , it is obvious that its compatibility with ViewPager and CoordinatorLayout not direct.

What I want:

Primary occupation:

 <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.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar_contributor" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:focusableInTouchMode="true"> <android.support.v7.widget.SearchView android:id="@+id/searchview_contributor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:icon="@drawable/ic_search_white_24dp" app:defaultQueryHint="Bla bla" app:iconifiedByDefault="false"/> <ImageButton android:layout_width="24dp" android:layout_height="24dp" android:background="@android:color/transparent" android:src="@drawable/ic_person_outline_black_24dp"/> </android.support.v7.widget.Toolbar> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:text="La Bla"/> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:text="Bla Bla"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <!-- Bunch of stuff, but irrelevant --> <android.support.design.widget.TabLayout android:id="@+id/tablayout_profile" android:layout_width="match_parent" android:layout_height="40dp"/> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager_profile" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

Snippet inside Viewpager:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview_photos" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> 

Thanks in advance!

Update: The responses I received (for which I am grateful) came too late. If anyone knows which is the correct answer, please let me know!

Answer 1

 public class CustomRecyclerView extends RecyclerView { public CustomRecyclerView(Context context) { super(context); } public CustomRecyclerView(Context context, AttributeSet attrs) { super(context, attrs); } public CustomRecyclerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } int lastEvent = -1; boolean isLastEventIntercepted = false; private float xDistance, yDistance, lastX, lastY; @Override public boolean onInterceptTouchEvent(MotionEvent e) { switch (e.getAction()) { case MotionEvent.ACTION_DOWN: xDistance = yDistance = 0f; lastX = e.getX(); lastY = e.getY(); break; case MotionEvent.ACTION_MOVE: final float curX = e.getX(); final float curY = e.getY(); xDistance += Math.abs(curX - lastX); yDistance += Math.abs(curY - lastY); lastX = curX; lastY = curY; if (isLastEventIntercepted && lastEvent == MotionEvent.ACTION_MOVE) { return false; } if (xDistance > yDistance) { isLastEventIntercepted = true; lastEvent = MotionEvent.ACTION_MOVE; return false; } } lastEvent = e.getAction(); isLastEventIntercepted = false; return super.onInterceptTouchEvent(e); } 

}

Just change your recyclerview with this.

Answer 2

I did something very similar to this with CollapsingToolbarLayout .

The trick here is to have two toolbars: one at the top with the search, and the other a toolbar designed to collapse the layout.

The search toolbar will have app:collapseMode="pin" .

Your button bar will have app:collapseMode="pin" .

Your LinearLayout under the button bar will have a default reset mode so that it scrolls. You can even give a parallax effect using app:collapseMode="parallax" .

Your TabLayout will have app:collapseMode="pin" so that it scrolls under the button bar and there are contacts.

Your ViewPager must be outside CollapsingToolbarLayout and have the app:layout_behavior="@string/appbar_scrolling_view_behavior" attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" .

CollapsingToolbarLayout will want to display the title. Just call setTitle(null) on the collapsible toolbar and set your real title on the search toolbar.

You can place the navigation and menus in the search toolbar and toolbar, and they should work as expected.

I will send XML later; I just wanted this answer to start.

Answer 3

It looks like you just skip the app:layout_scrollFlags . You must add it both in the Toolbar and in the line headers. For example, you can use: app:layout_scrollFlags="scroll|enterAlways"

As I can see, your ViewPager already has app:layout_behavior="@string/appbar_scrolling_view_behavior" , but it should work right after you specify scrollFlags