0

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>
Jenea Vranceanu
  • 4,530
  • 2
  • 18
  • 34
Sukesh Saxena
  • 201
  • 2
  • 18

1 Answers1

1

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);
            }
        }
    });
Mohammed Alaa
  • 3,140
  • 2
  • 19
  • 21
  • Thanks @Mohammed Alaa your suggestion did help to put recyclerview at the bottom of the blue line however when I am running code recyclerview list item is over the image and touching the top. Putting code for Recyclerview that is used in the activity. RecyclerView recyclerView = (RecyclerView)findViewById(R.id.testrecyclerview); recyclerView.setLayoutManager(new LinearLayoutManager(this)); recyclerView.setAdapter(mAdapter); – Sukesh Saxena Sep 18 '20 at 03:21
  • do you want to achieve collapsing toolbar behavior ? – Mohammed Alaa Sep 18 '20 at 11:50
  • Thanx for your response. What i want is Image part until blue line to collapse when you scroll up. On click blue line, you will again able to expand or collapse the upper portion irrespective of your position of scroll bar. – Sukesh Saxena Sep 18 '20 at 15:58
  • I had edited the answer, hope it will help you ,to get Material stuff add `implementation 'com.google.android.material:material:1.3.0-alpha02'` – Mohammed Alaa Sep 18 '20 at 19:17
  • Thanks a Ton @Mohammed Alaa!!!!!. It solves my problems. Much appreciated your efforts in helping me out. Have a grate Weekend!!!!! – Sukesh Saxena Sep 18 '20 at 19:46
  • one query would like to restrict blue bar on the top while scrolling up continue. How can I achieve this? – Sukesh Saxena Sep 18 '20 at 20:13
  • Indeed this is accepted Answer!!!!!!!!.Thanks a lot for all the support that you have extended. – Sukesh Saxena Sep 19 '20 at 02:45