Collapsing toolbar. The problem with RecyclerView inside NestedScrollView

31 Views Asked by At

I use UI with CollapsingToolbarLayout. Inside of NestedScrollView i use horizontal RecyclerView.

My idea is when i scroll layouts inside NestedScrollView the AppBarLayout must collapse.

See my layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".fragments.Home">

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            android:theme="@style/Theme.eShop">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <TextView
                    android:id="@+id/shop_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:fitsSystemWindows="true"
                    android:fontFamily="@font/clicker_script"
                    android:scaleType="centerCrop"
                    android:text="Best Store"
                    android:textAlignment="center"
                    android:textColor="@color/md_theme_dark_background"
                    android:textSize="60sp"
                    android:textStyle="bold"
                    app:layout_collapseMode="parallax"
                    tools:ignore="HardcodedText,TextContrastCheck" />

            </com.google.android.material.appbar.CollapsingToolbarLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.eShop">

                <com.google.android.material.search.SearchBar
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/icon_search"
                    android:text="@string/search"
                    tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.core.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:focusableInTouchMode="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusableInTouchMode="false"
                android:orientation="vertical">

                <androidx.cardview.widget.CardView
                    android:id="@+id/card_categories"
                    android:layout_width="match_parent"
                    android:layout_height="160dp"
                    android:theme="@style/Theme.itemCardStyle">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <androidx.recyclerview.widget.RecyclerView
                            android:id="@+id/recycler_categories"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:focusableInTouchMode="false"
                            android:orientation="horizontal" />

                    </LinearLayout>

                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/card_newitems"
                    android:layout_width="match_parent"
                    android:layout_height="320dp"
                    android:theme="@style/Theme.itemCardStyle">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <TextView
                            android:id="@+id/missing_alert_newitems"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:fontFamily="@font/montserrat_thin"
                            android:text="@string/missingItems" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/title_newitems"
                                android:layout_width="wrap_content"
                                android:layout_height="45dp"
                                android:fontFamily="@font/montserrat_thin"
                                android:gravity="center"
                                android:paddingStart="10dp"
                                android:text="@string/newitems"
                                android:textSize="20sp"
                                android:textStyle="bold" />

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/recycler_newitems"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="horizontal" />

                        </LinearLayout>

                    </RelativeLayout>

                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/card_promotion"
                    android:layout_width="match_parent"
                    android:layout_height="320dp"
                    android:theme="@style/Theme.itemCardStyle">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <TextView
                            android:id="@+id/missing_alert_promotion"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:fontFamily="@font/montserrat_thin"
                            android:text="@string/missingItems" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/title_promotion"
                                android:layout_width="wrap_content"
                                android:layout_height="45dp"
                                android:fontFamily="@font/montserrat_thin"
                                android:gravity="center"
                                android:paddingStart="10dp"
                                android:text="@string/promotion"
                                android:textSize="20sp"
                                android:textStyle="bold" />

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/recycler_promotion"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="horizontal" />

                        </LinearLayout>

                    </RelativeLayout>

                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/card_favourites"
                    android:layout_width="match_parent"
                    android:layout_height="320dp"
                    android:theme="@style/Theme.itemCardStyle">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <TextView
                            android:id="@+id/missing_alert_favourites"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:fontFamily="@font/montserrat_thin"
                            android:text="@string/missingItems" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/title_favourites"
                                android:layout_width="wrap_content"
                                android:layout_height="45dp"
                                android:fontFamily="@font/montserrat_thin"
                                android:gravity="center"
                                android:paddingStart="10dp"
                                android:text="@string/favourites"
                                android:textSize="20sp"
                                android:textStyle="bold" />

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/recycler_favourites"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="horizontal" />

                        </LinearLayout>

                    </RelativeLayout>

                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/card_cart"
                    android:layout_width="match_parent"
                    android:layout_height="320dp"
                    android:theme="@style/Theme.itemCardStyle">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <TextView
                            android:id="@+id/missing_alert_cart"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:fontFamily="@font/montserrat_thin"
                            android:text="@string/missingItems" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/title_cart"
                                android:layout_width="wrap_content"
                                android:layout_height="45dp"
                                android:fontFamily="@font/montserrat_thin"
                                android:gravity="center"
                                android:paddingStart="10dp"
                                android:text="@string/cart"
                                android:textSize="20sp"
                                android:textStyle="bold" />

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/recycler_cart"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="horizontal" />

                        </LinearLayout>

                    </RelativeLayout>

                </androidx.cardview.widget.CardView>

            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

When i touch the TextView and drag to up or down screen the collapsing of the AppBarLayout is operable. But when i touch the RecyclerView and drag to up or down screen collapsing of the AppBarLayout doesnt work, i have scroll view only inside of NestedScrollView.

I used custom LinearLayoutManager where i disabled vertical scrolling with but UI in this case is inconvenient - synchronous vertical and horizontal scrolling of the screen is ugly.

How collapse AppBarLayout when i drug up or down screen in case when i touch RecyclerView?

0

There are 0 best solutions below