How to Overlap items in LinearLayoutManager - RecyclerView (like stacking cards)

Question

Is that possible to overlap the items from RecyclerView ?
I am trying that with LinearLayoutManager.
My requirements are just the same as in LinearLayoutManager and I just need to overlap the items inside from top to bottom. (like stacking cards)

I have seen some variant by using ListView. So, I figure it would be possible in RecyclerView too.But, after some times of exploration, I feel like its gonna take quite some time to implement a custom layout manager and quite an extent of understanding on this.(I looked into Dave's post about Building Custom LayoutManager )

So, now I am thinking I might just need to use ListView variation based on my requirement instead of dealing with this much complexity of Custom Layout Manager.

But, I just need to make the items inside to overlap. I feel like there might be some other direction that I haven't aware yet. Pls let me know if there is any apart from above ListView varient and Custom Layout Manager.

I will also post my findings below here.

Answer 1

I assume you're looking for a partial overlap (e.g. deck of cards slightly fanned out). If so, this seems fairly simple with RecyclerView and a custom ItemDecoration. Here's a trivial example of one that overlaps the items by 90px vertically:

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);    } } 

This example hard codes the offset, but if your list items vary in height you'll need to measure and add logic for this.

Add this decoration to the RV before setting the layoutmanager. I've tried it with a StaggeredGrid but it should work with LinearLayout and Grid LM's as well.

Answer 2

You can achieve using ItemDecoration of RecyclerView

set ItemDecoration :

var customAdapter = CustomListAdapter() recyclerView.addItemDecoration(MyItemDecoration()) // here set decoration in recyclerview recyclerView.layoutManager = LinearLayoutManager(context) recyclerView.adapter = customAdapter 

create ItemDecoration class :

class MyItemDecoration : RecyclerView.ItemDecoration() {      private val overlapValue = -60      override fun getItemOffsets(outRect : Rect, view : View, parent : RecyclerView, state : RecyclerView.State) {         outRect.set(0, 0, 0, overlapValue)  // args is : left,top,right,bottom     } }