Sukesh Saxena
Sukesh Saxena

Reputation: 211

How Can I have Recyclerview below blue line in the CoordinatorLayout?

I want to have Reclyclerview positioned below the blue line. How can I achieve that? Currently, it looks like below. I have tried using appbarlayout but with that view under appbar slightly get raised which I don't want. Thanks in advance!

Desired result

My XML file is as follows:

     <?xml version="1.0" encoding="utf-8"?>
     <androidx.coordinatorlayout.widget.CoordinatorLayout 
     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_anchorGravity="top"
        android:id="@+id/top"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/cheese_2"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        app:layout_anchorGravity="bottom"
        android:id="@+id/middle"
        app:layout_anchor="@id/top"
        android:layout_height="7dp"
        android:background="@color/colorPrimary">

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        app:layout_anchorGravity="bottom"
        android:id="@+id/extra"
        app:layout_anchor="@id/middle"
        android:layout_height="7dp"
        android:background="@color/colorPrimary">


    </LinearLayout>

    <androidx.core.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_anchorGravity="bottom"
        app:layout_anchor="@id/extra"


        android:layout_width="match_parent"

        android:layout_height="wrap_content">
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"


            android:layout_height="@dimen/_200sdp"/>


    </androidx.core.widget.NestedScrollView>

   </androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 0

Views: 112

Answers (1)

Mohammed Alaa
Mohammed Alaa

Reputation: 3320

change your layout to be like this

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/toolbarImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/my_image"
            app:layout_collapseMode="parallax" />


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


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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:orientation="vertical"
    app:layout_anchor="@id/appBar"
    app:layout_anchorGravity="bottom"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <View
        android:id="@+id/vExpandCollapse"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_20sdp"
        android:layout_gravity="top"
        android:background="@color/colorPrimary"
        app:layout_collapseMode="pin" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </androidx.core.widget.NestedScrollView>
</LinearLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

to expand or collapse the layout I have get the answer from this answer

public boolean isAppBarExpanded(AppBarLayout abl) {
            final CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) abl.getLayoutParams()).getBehavior();
            return (behavior instanceof AppBarLayout.Behavior) && (((AppBarLayout.Behavior) behavior).getTopAndBottomOffset() == 0);
}

then code to click event

 View view = findViewById(R.id.vExpandCollapse);
 AppBarLayout layout = findViewById(R.id.appBar);

 view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (isAppBarExpanded(layout)) {
                layout.setExpanded(false);
            } else {
                layout.setExpanded(true);
            }
        }
    });

Upvotes: 1

Related Questions