Recyclerview - Overlap items bottom to top

Question

I have set the negative margin for items like this:-

ItemDecoration.java

public class ItemDecorator extends RecyclerView.ItemDecoration {
    private final int mSpace;

    public ItemDecorator(int space) {
        this.mSpace = space;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view);
        if (position != 0)
            outRect.top = mSpace;
    }
}

MainActivity.java

recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.addItemDecoration(new ItemDecorator(-80));

This causes top item to stack lowest and next item after the top item overlaps it. I want top item to overlap its next item and so on.

Current View

Required View

score 19 · Accepted Answer · answered Nov 18 '16 at 13:58

19

Try this way and render your recycler view in reverse direction.

LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setReverseLayout(true);
        layoutManager.setStackFromEnd(true);
        recyclerView.setLayoutManager(layoutManager);

Here is the working example GitHub Link

answered Nov 18 '16 at 13:58

Tasneem

793
8
24

Perfect answer! – Bilal Haider Makki Nov 18 '16 at 14:10
2

If someone is using Bilal's ItemDecorator, when you do this, the last card will be at the top. So make sure that the position you do not want the offset on, is not 0 but itemCount - 1. Also this top item will be item3, instead of item1 – Boy Feb 21 '18 at 11:58
@Tasneem its showing reverse list first item is at last and last one is first – Nikunj Paradva Jun 07 '18 at 04:42
@Tasneem any solution for top item view overlap on bottom item view – Nikunj Paradva Jun 07 '18 at 04:43
@NikunjParadva , I did not get you. Could you please explain or problem more in detail. – Tasneem Jul 03 '18 at 06:11
1

example:- if arraylist is {1,2,3,4,5} then its shows as {5,4,3,2,1} – Nikunj Paradva Jul 03 '18 at 07:12
1

@NikunjParadva you have to reverse your input list to work or just ignore reversing and set z index for your items' view. – Ali Samawi Jan 02 '19 at 11:22

score 7 · Answer 2 · answered Jul 23 '20 at 10:22

As of 2020 there is new interface ChildDrawingOrderCallback. It defines the order of drawing elements in recycler view. Can be used like so:

class BackwardsDrawingOrderCallback : RecyclerView.ChildDrawingOrderCallback {
    override fun onGetChildDrawingOrder(childCount: Int, i: Int) = childCount - i - 1
}

And then

recyclerView.setChildDrawingOrderCallback(BackwardsDrawingOrderCallback())

So there is no need to set neither reverse order nor stack from end anymore.

Dev Soni · Answer 3 · 2022-08-09T13:25:20.223

0

You can create overlapping Ite Decorator by using: Check this link

class OverlappingItemDecoration : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        if (parent.getChildAdapterPosition(view) != RecyclerView.NO_POSITION) {
            outRect.set(0, 0, 0, - 60)
        }
    }
}

edited Aug 09 '22 at 13:25

answered Mar 22 '22 at 02:08

Dev Soni

489
4
12

score 0 · Answer 4 · answered Jan 11 '23 at 00:56

The easiest way to achieve overlap is using margin with minus values inside recycler view item like so:

image_item.xml

<com.google.android.material.imageview.ShapeableImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/authorIV"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginStart="-8dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_default_avatar"
    app:roundPercent="50" />

score -3 · Answer 5 · answered Nov 18 '16 at 12:38

-3

Try overriding this method.

@Override
public int getItemViewType(int position) {
    return super.getItemViewType(position);
}

answered Nov 18 '16 at 12:38

Sridhar

668
1
11
22

1

Thanks for your answer. really appreciate it. I think you miss understood my question. i have added pictures for better understanding of my requirement. Please have a look. – Bilal Haider Makki Nov 18 '16 at 12:41

Recyclerview - Overlap items bottom to top

5 Answers5

Linked