How to use layout_below in CoordinatorLayout

Question

hello im trying to use layout below in CoordinatorLayout but it dosent work like relativelayout i tried this solution but didnt worked for me

in my layout i have three main elements one is a tool bar then there is a horizontal recycler view then there is a vertical recyclerview ,the horizontal one should hide when vertical scrolls there is some issue in relativelayout where the scroll is not smoth but after implementing CoordinatorLayout the scroll is smoth but the horizontal is now showing behind the verticlal and top

EDIT

i have tried a answer its working but still there is a issue where the scroll for the vertical recyclerview is not smoth here is Here is the screen recording for refrence

EDIT 2

Ok the question i asked is about CoordinatorLayout but im facing many issues with it and becuase in the future i may include more views in the layout and that can be a hastle for me ,so now i replaced CoordinatorLayout with relativelayout but there is a small issue with the scroll animation of the vertical recyclerview which is almost same that i shown in the video the minor change is now there is a text view above the horizontal one

here is the code

    <RelativeLayout 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="match_parent"
    android:background="@color/black"
    tools:ignore="ExtraText">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include
            android:id="@+id/tool_bar"
            layout="@layout/tool_bar" />

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

    <TextView
        android:id="@+id/view_all_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/appBarLayout"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20dp"
        android:text="@string/view_all"
        android:textColor="@color/white"
        android:textStyle="bold" />

    <!--    Horizontal RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/postRecyclerView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_all_text"
        android:background="@color/black"
        android:orientation="horizontal"
        android:overScrollMode="never"
        app:reverseLayout="true" />

    <!--    Vertical RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewHome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/postRecyclerView1"
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:overScrollMode="never" />

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerEffect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/appBarLayout">

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

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

            <include layout="@layout/post_item_container_shimmer_home" />

        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

</RelativeLayout>

Java Code for recyclerview

//        this is for one item per scroll Vertical RecyclerView
        SnapHelper snapHelper = new PagerSnapHelper();
        snapHelper.attachToRecyclerView(verticalRecyclerView);
//        TextView
        view_all.setOnClickListener(v -> requireActivity().getSupportFragmentManager().beginTransaction()
                .replace(R.id.fragment_container, Search_Fragment.class, null)
                .addToBackStack(String.valueOf(new Home_Fragment()))
                .commit());

//        Method For Hiding Horizontal RecyclerView When Vertical RecyclerView Scrolls
        verticalRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(@NonNull @NotNull RecyclerView recyclerView, int dx, int dy) {
                if (recyclerView.canScrollVertically(-1)) {
                    horizontalRecyclerView.setVisibility(View.GONE);
                    view_all.setVisibility(View.GONE);
                } else {
                    if (!(horizontalRecyclerView.getVisibility() == View.VISIBLE)) {
                        horizontalRecyclerView.setVisibility(View.VISIBLE);
                        view_all.setVisibility(View.VISIBLE);


                    }
                }
            }
        });

please don't add `[Android]` to your question title, that's what tags are for — a_local_nobody, Jun 14 '21 at 08:26

score 1 · Answer 1 · answered Jun 14 '21 at 08:24

Coordinator Layout is like a FrameLayout. Attributes of RelativeLayout not work on it.

Add this line to your AppBarLayout

app:layout_behavior="com.google.android.material.appbar.AppBarLayout$Behavior"

Add a RelativeLayout like below and put your views inside that and use attributes of RelativeLayout

    <RelativeLayout
        android:id="@+id/relative_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
    
    </RelativeLayout>

ok it works but then the same issue comes up the scroll is not smoth when i used relative layout — Vasant Raval, Jun 14 '21 at 08:33

MojoJojo · Answer 2 · 2021-06-17T05:33:52.240

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@android:color/black">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <include
            android:id="@+id/toolbar"
            layout="@layout/layout_toolbar" />
    </com.google.android.material.appbar.AppBarLayout>

    <!-- NESTED SCROLLVIEW -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/appBarLayout">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/view_all_text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="TOP TEXTVIEW"
                android:textColor="@color/white"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <!--    Horizontal RecyclerView-->
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/postRecyclerView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:overScrollMode="never"
                app:layout_constraintTop_toBottomOf="@id/view_all_text"
                app:reverseLayout="true" />

            <!--    Vertical RecyclerView-->
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerViewHome"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:orientation="vertical"
                android:overScrollMode="never"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/postRecyclerView1" />

            <com.facebook.shimmer.ShimmerFrameLayout
                android:id="@+id/shimmerEffect"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

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

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />

                    <include layout="@layout/post_item_container_shimmer_home" />
                </LinearLayout>
            </com.facebook.shimmer.ShimmerFrameLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

ok its working but there is some little issue in the scroll the scroll is not smoth for the vertical recyclerview ,can you help me with that if possible — Vasant Raval, Jun 15 '21 at 05:39
please check the question i have updated with the code you provide and a screen recording for the issue im talking about — Vasant Raval, Jun 15 '21 at 05:47
@VasantRaval, I've seen the screen recording but not able to understand your problem. Maybe you've mentioned something in the class. Can you describe it more? — MojoJojo, Jun 16 '21 at 06:14
@VasantRaval, why are you setting the `visibility` of horizontal `RecyclerView` in `addOnScrollListener` of vertical `RecyclerView`, if I already added that in `CollapsingToolbar`? There is no point to use the `CollapsingToolbar` if you are doing this. I think you shouldn't use that `addOnScrollListener`. — MojoJojo, Jun 17 '21 at 04:39
ok im sorry for the late reply , i have tried adding CoordinatorLayout but im facing many issues with it becuase in the future i may include more views in the layout and that can be a hastle for me ,so now i replaced CoordinatorLayout with relativelayout but there is a small issue with the scroll animation of the vertical recyclerview which is almost same that i shown in the video the minor change is now there is a text view above the horizontal one , i have updated the code of the xml you will understand it better ,and sorry for the late reply again — Vasant Raval, Jun 17 '21 at 05:03
Now, it looks like that `NestedScrollView` can solve your problem. Please check my updated answer. — MojoJojo, Jun 17 '21 at 05:35
im very sorry to inform that i have tried it but the scroll has improved a little bit but images that are now not getting that rounded corners and not even match the size that i defined it , here is a recordng https://drive.google.com/file/d/18nNV-KHEqkDcGnXqU0O0UinTMSYP5stO/view?usp=sharing ,you will undertand it better — Vasant Raval, Jun 17 '21 at 05:52
AFAIK, this is not a big deal to manage multiple `RecyclerView`s in a single `NestedScrollView`. Maybe you are not handling the code properly in your `Activity`/`Fragment` and in `Adapter`. — MojoJojo, Jun 17 '21 at 06:19

How to use layout_below in CoordinatorLayout

2 Answers2