Android RecyclerView overlap items (Card stacks)

Question

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

Thanks in advance.

Hermes

have you done this? I need the same view – Friday

@DenisNek: Sorry, no. Since the LayoutManager approach is not easy, I still use the ListView to do it. – Hermes

@denis Nak did you get anything for this i'm also having the same problem – Mo

github.com/amyu/StackCardLayoutManager – Plesiosaur

Answer 1

You have to write your own LayoutManager or extends LinearLayoutManager

Essie

Thanks for your answer. Could you provide any idea to start with? – Hermes

android.googlesource.com/platform/frameworks/support/+/master/… 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 – Essie

Thank you. I will try that. – Hermes

I found that difficult to extend or modify the LinearLayoutManager. Looking for another easier approach. – Hermes

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 – Essie

Answer 2

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://mcmap.net/q/518843/-how-to-overlap-items-in-linearlayoutmanager-recyclerview-like-stacking-cards

Hanselka

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. – Hermes

@Hermes 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 – Hanselka

To overlap all items you can remove if (itemPosition == 0 cause it is useless if you have padding/margin in recyclerview – Crankpin

Answer 3

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.

Middlebrow