26


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.

Community
  • 1
  • 1
Aung Pyae
  • 1,590
  • 2
  • 16
  • 25

2 Answers2

39

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.

MojoTosh
  • 1,886
  • 1
  • 18
  • 23
  • 1
    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 '15 at 20:00
  • 2
    I understand that this answer might not suit everyone, but I don't understand the down-votes. It does work, even if as shiami notes, it doesn't show the top of the item below. This is still the only answer anyone has provided for this 9-month old question, and the only suggested approach that doesn't require a custom layout manager. – MojoTosh Sep 22 '15 at 18:31
  • 1
    For those who want to know how to avoid the top item, try something like: `final int itemPosition = parent.getChildAdapterPosition(view); if (itemPosition == RecyclerView.NO_POSITION) { return; }` to get the position of the view. Skip the `outRect.set()` line for the top item. – h_k Jan 22 '16 at 22:06
  • perfect, exactly what i was looking for – Khurram Shehzad Jun 08 '16 at 07:05
  • 1
    For not stacking first item. `int itemPosition = parent.getChildAdapterPosition(view); if (itemPosition != 0) { outRect.set(yourOffset, 0, 0, 0); }` – jignesh.world Jan 04 '17 at 12:58
  • Hey may you possibly help me making something like [this stack](http://cdn1.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/Array/screenshot_2014-11-14-14-43-57.png?itok=Xd8fXQY2)? – Alex Newman Jan 07 '17 at 13:15
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
    }
}
Sanjayrajsinh
  • 15,014
  • 7
  • 73
  • 78