CODEWITHSUNDEEP
androidandroid-recyclerviewoverlap
shiami
shiami

Reputation: 7264

Android RecyclerView overlap items (Card stacks)

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

Thanks in advance.

Upvotes: 8

Views: 11441

Answers (3)

Red M
Red M

Reputation: 2789

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.

Upvotes: 0

opsenes
opsenes

Reputation: 399

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

Upvotes: 17

Derek Fung
Derek Fung

Reputation: 8211

You have to write your own LayoutManager or extends LinearLayoutManager

Upvotes: 0

Related Questions