Rafique Mohammed
Rafique Mohammed

Reputation: 3816

Nested RecyclerView with CoordinatorLayout

My question is just like the question asked here : Scroll behavior in nested RecyclerView with horizontal scroll

Similar to the Google Play store UI, I have a nested RecyclerView(Horizontal) inside a parent RecyclerView(Vertical scroll). The parent RecyclerView is a child of CoordinatorLayout in which the toolbar expands and collapse whenever the parent RecyclerView is being scrolled.

Everything works fine when we touch outside of the child RecyclerView (Check image 1 below) and scroll up then the CollapsingToolbar gets collapsed but when i touch one of the the child RecyclerView and scroll up then the collapsing of CollapsingToolbar doesn't happens.

[The below image shows when we touch between Featured and Trending and scroll-up] enter image description here

[The below image shows when we touch on Featured list and scroll-up] enter image description here

UPDATE :

activity of CoordinatorLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coord_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ChannelHubOld">

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        android:fitsSystemWindows="true">
        <RelativeLayout
            android:background="@color/pkDarkGrey"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/sidebar_header"/>
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/my_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:theme="@style/ActionBarWidget"/>

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

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

<!-- Parent RecyclerView --->

    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_view_pagelayout"
        />

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

Upvotes: 27

Views: 18063

Answers (4)

Jonas
Jonas

Reputation: 1

If anyone is wondering how to solve the same problem but with inner horizontal ViewPager2, here is the solution:

(viewpager.getChildAt(0) as? RecyclerView)?.isNestedScrollingEnabled = false.

If you're wondering why getChildAt(0), well ViewPager2 is a ViewGroup which contains RecyclerView as its child. So setting isNestedScrollingEnabled = false straight to ViewPager2 - will not work since we need to target RecyclerView.

Upvotes: 0

fast3r
fast3r

Reputation: 1308

Had the same issue. Fixed by setting setNestedScrollingEnabled(false) on the horizontal nested RecyclerViews. It seems like the nested scroll wasn't intercepted properly by the CoordinatorLayout.Behavior when not setting this. Try it out!


NOTE: you also have to add a layout behavior (example: app:layout_behavior="@string/appbar_scrolling_view_behavior" ) to the inner (nested) RecyclerView for this to work

Upvotes: 56

Simon
Simon

Reputation: 19948

I have a solution for you and I tried this recently so it should work.

Inside your recyclerview, put in your nestedScrollView instead of the other way around like Scroll behavior in nested RecyclerView with horizontal scroll suggested.

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

            <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true"
                >
            </android.support.v4.widget.NestedScrollView>

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

Upvotes: -5

Siddhesh
Siddhesh

Reputation: 1380

Check Creating Collapsing effect. this might help you.

code from link if link gets broken.

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>

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

Upvotes: 0

Related Questions