Item overlap in recyclerview

Question

I want to overlap first item on second item in recycler view .

this is what I want to achieve:

this is how my recycler view is looking now:

[ this is what i'm getting ]

content inside green border is actually a recyclerView and the first item in parent recycler view and the rating bar layout is the second item in parent recyclerview . please suggest me how can i overlap first item on to second item i have tried this

item_rating_layout:

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        style="@style/LayoutHeightWrapWidthMatchStyling"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="@dimen/padding_large">

        <TextView
            android:id="@+id/tvRatingMessage"
            style="@style/TextStyleNormal.XXLarge"
            android:text="@string/rating_exp" />

        <RatingBar
            android:id="@+id/ratingBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            android:numStars="5"
            android:progressBackgroundTint="@color/gray"
            android:stepSize="1.0"
            android:progressTint="@color/primaryColor"
            android:rating="2.5" />

        <TextView
            android:id="@+id/tvWriteFeedBack"
            style="@style/TextStyleNormal.XXXLarge.primary"
            android:padding="@dimen/padding_medium"
            android:text="Write Feedback"
            android:visibility="gone" />

    </LinearLayout>

item_recycler_view:

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tool="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_24dp"
        android:layout_marginEnd="@dimen/margin_24dp"
        android:background="@color/warranty_card_background">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/btn_shap_without_solid_green"
                android:gravity="center_horizontal"
                android:orientation="vertical">


                <ImageView
                    android:id="@+id/ivProductImage"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_marginTop="@dimen/margin_medium"
                    android:scaleType="fitXY"
                    app:srcCompat="@drawable/ic_original_placeholder" />

                <TextView
                    android:id="@+id/tvName"
                    style="@style/TextStyleNormal.XXLarge.black"
                    android:textStyle="bold"
                    tool:text="Steelbird Air" />

                    <TextView
                        android:id="@+id/tvModel"
                        style="@style/TextStyleNormal.XXLarge"
                        tool:text="SBA-2 Horn Matt Black With Red " />

                <TextView
                    android:id="@+id/tvId"
                    style="@style/TextStyleNormal.XXLarge.gray"
                    android:text="@string/product_id" />

                <TextView
                    android:id="@+id/tvViewProductDetails"
                    style="@style/TextStyleNormal.XLarge.primary"
                    android:text="View product Details" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rvWarrantyCard"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_medium"
                    android:layout_marginBottom="@dimen/margin_medium">

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

Having items overlap is rather tricky. Can't you just add a bit of blue background on bottom of first item to mimick the behavior? — Pawel, May 28 '19 at 11:50

score 2 · Answer 1 · answered May 28 '19 at 13:24

You can use the following ItemDecoration:

  public class OverlapDecoration extends RecyclerView.ItemDecoration {

  private final static int vertOverlap = -90;

  @Override
  public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

    outRect.set(0, vertOverlap, 0, 0);

  }
}

Now when you add the above decoration your next row will be drawn over your previous row. To rectify this make your recyclerview as reverse by using setReverseLayout(true)

You can refer to my question which has almost same requirement

Pinal Gangani · Answer 2 · 2019-09-25T13:02:20.907

0

Use main layout Relative otherwise Frame layout

edited Sep 25 '19 at 13:02

answered May 28 '19 at 12:53

Pinal Gangani

49
8

score 0 · Accepted Answer · answered May 29 '19 at 07:11

I somehow fix my problem by just adding a bit of same color as rating bar background on bottom of first item.

now here is the final xml look alike:

item_recycler_view:

<?xml version="1.0" encoding="utf-8"?>

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

    <LinearLayout
        android:id="@+id/llOverlapView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:background="@color/rating_bar"
        android:orientation="vertical"/>

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/margin_24dp"
            android:layout_marginEnd="@dimen/margin_24dp"
            android:fillViewport="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/btn_shap_without_solid_green"
                android:gravity="center_horizontal"
                android:orientation="vertical">


                <ImageView
                    android:id="@+id/ivProductImage"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_marginTop="@dimen/margin_medium"
                    android:scaleType="fitXY"
                    app:srcCompat="@drawable/ic_original_placeholder" />

                <TextView
                    android:id="@+id/tvName"
                    style="@style/TextStyleNormal.XXLarge.black"
                    android:textStyle="bold"
                    tool:text="Steelbird Air" />

                <TextView
                    android:id="@+id/tvModel"
                    style="@style/TextStyleNormal.XXLarge"
                    tool:text="SBA-2 Horn Matt Black With Red " />

                <TextView
                    android:id="@+id/tvId"
                    style="@style/TextStyleNormal.XXLarge.gray"
                    android:text="@string/product_id" />

                <TextView
                    android:id="@+id/tvViewProductDetails"
                    style="@style/TextStyleNormal.XLarge.primary"
                    android:text="View product Details" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rvWarrantyCard"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_medium"
                    android:layout_marginBottom="@dimen/margin_medium">

                </androidx.recyclerview.widget.RecyclerView>
            </LinearLayout>
        </androidx.core.widget.NestedScrollView>
</FrameLayout>

Big thank to @Pawel

Item overlap in recyclerview

3 Answers3