Android RecyclerView overlap items (Card stacks)

Question

How can I overlap items in RecyclerView? Like stacking cards.

Thanks in advance.

@DenisNek: Sorry, no. Since the LayoutManager approach is not easy, I still use the ListView to do it. — shiami, Mar 11 '16 at 06:26
@denis Nak did you get anything for this i'm also having the same problem — , May 18 '18 at 08:46

score 17 · Answer 1 · edited May 23 '17 at 11:47

17

To overlap recyclerView rows, you can use this.

Add this class to your activity. You can customize the vertOverlap.

   public class OverlapDecoration extends RecyclerView.ItemDecoration {

    private final static int vertOverlap = -40;

    @Override
    public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        final int itemPosition = parent.getChildAdapterPosition(view);
        if (itemPosition == 0) {
            return; }
        outRect.set(0, vertOverlap, 0, 0);


    }
} `

After that add your decoration to recyclerView before setting its layout manager, and we are done.

    mRecyclerView.addItemDecoration(new OverlapDecoration());
    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

Thanks to the @MojoTosh https://stackoverflow.com/a/29067942/6255073

edited May 23 '17 at 11:47

Community

1
1

answered Aug 29 '16 at 23:21

opsenes

379
5
15

I have reply the solution and there is a problem: It has a strange behavior that only show items that can be draw entirely. It won't show the top-part of the next item below the bottom most one. – shiami Aug 31 '16 at 13:25
@shiami Could you explain it explicitly? A screenshot of your current problem maybe. In my case first row stays same and other rows are overlapping properly – opsenes Sep 01 '16 at 10:25
To overlap all items you can remove `if (itemPosition == 0` cause it is useless if you have padding/margin in recyclerview – Neuron Aug 18 '19 at 20:56

score 0 · Accepted Answer · answered Sep 01 '15 at 02:43

0

You have to write your own LayoutManager or extends LinearLayoutManager

answered Sep 01 '15 at 02:43

Derek Fung

8,171
1
25
28

Thanks for your answer. Could you provide any idea to start with? – shiami Sep 01 '15 at 05:06
1

https://android.googlesource.com/platform/frameworks/support/+/master/v7/recyclerview/src/android/support/v7/widget/LinearLayoutManager.java You should start with reading the source of `LinearLayoutManager`, actually you would need to modify most of the code at the end. I believe You can start with copying the whole source code as your own `CardStackLayoutManager`, and try editing `onLayoutChildren` – Derek Fung Sep 01 '15 at 05:11
Thank you. I will try that. – shiami Sep 01 '15 at 05:13
I found that difficult to extend or modify the LinearLayoutManager. Looking for another easier approach. – shiami Sep 01 '15 at 10:05
Yes, it is not easy to make LayoutManager. Maybe you can try just to fake it by some drawings, e.g. have each item add a child as the top part of the item below – Derek Fung Sep 01 '15 at 10:11

score 0 · Answer 3 · answered Mar 09 '23 at 00:03

opsenes answer works great! But I added a percentage calculation instead of a fixed value so that it can work for multiple devices and screens.

class ItemDecorator() : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        val position = parent.getChildAdapterPosition(view)
        if (position != 0) {
            val widthOverlapPercentage = 0.25
            val previousView = parent[position - 1]
            val overlapWidth = previousView.width * widthOverlapPercentage
         outRect.left = overlapWidth.toInt() * -1
        }
    }
}

My solution is based on a horizontal RecyclerView, so if you want to implement Vertical, just switch previousView.width with previousView.height, and outRect.left with outRect.top.
You can also set the percentage of the overlapping where 0 is no overlap, and 1 is full overlap.

Android RecyclerView overlap items (Card stacks)

3 Answers3

Linked