Span multiple columns with RecyclerView

Question

So what I am trying to go for is having a staggered layout but the first item in the list needs to span two columns. The first two rows are also a fixed height. I have everything working except the first item spanning two columns.

I am using the RecyclerView.Adapter with the StaggeredGridLayoutManager. Doesn't seem like it is out of the box functionality. I assume I can make a custom layout manager I'm just not sure where to start. I have tried searching but I can't find anything about how to get items to span multiple columns.

The image below is what what I am looking for in the list.

Staggered layout

The first Item always spans two columns. I had to put negative right margin to get the results. The second item is a dummy item with visibility set to INVISIBLE. — DDukesterman, Apr 29 '15 at 20:16
Is it possible that you share your code about that solution? I'm trying to achieve the same result but without success. — MHogge, May 08 '15 at 08:09
@DDukesterman did my reply help you? If so, could you please accept it? Thanks. — mato, May 16 '15 at 20:03
Hi, will you please post your adapter code, I'm facing small issue. — RobinHood, Jan 20 '16 at 05:50
Any luck with the implementation ? I am looking for a similar implementation. — Debjit, Feb 05 '18 at 12:44

mato · Answer 1 · 2016-04-16T01:54:54.077

54

Currently, StaggeredGridLayoutManager only supports views that span all the columns (for a vertically configured layout), and not an arbitrary number of them.

If you still want to span them across all the columns, you should do this in the adapter implementation:

public final void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
    layoutParams.setFullSpan(true);
}

~~IMHO, StaggeredGridLayoutManager is still under heavy development and Google wants us to use it for feedback :(~~

edited Apr 16 '16 at 01:54

answered Dec 15 '14 at 19:41

mato

1,461
10
17

attempting this - getLayoutParams is returning null. Anyone any luck? – Jason Van Anden Jul 17 '15 at 18:36
@JasonVanAnden, getLayoutParams was also returning me null. Maybe my answer can help you. – ljmelgui Aug 25 '15 at 17:41
Hmmm that shouldn't happen at the time `onBindViewHolder` is called... Maybe you have another issue somewhere else and you are just workarounding it. – mato Aug 27 '15 at 17:07
So it's impossible to do it by using GridLayoutManager ? – android developer Nov 16 '15 at 00:13
Not quite 'under heavy development' as the `StaggeredGridLayoutManager` appears to be mostly unchanged more than one year later. – Jozua Mar 29 '16 at 14:19
java.lang.ClassCastException: android.support.v7.widget.RecyclerView$i cannot be cast to android.support.v7.widget.StaggeredGridLayoutManager – Jul 30 '18 at 11:48

score 11 · Answer 2 · answered Aug 25 '15 at 17:38

What I did to span all columns for a vertically configured layout was create new LayoutParams and set full span to true in the adapter implementation:

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    layoutParams.setFullSpan(true);
    viewHolder.itemView.setLayoutParams(layoutParams);
}

score 0 · Answer 3 · answered Nov 19 '20 at 15:56

The solution proposed by ljmelgui works fine but can be mixed with mato answer for a minor optimization by trying to reuse the layoutParams in case they exist:

public final void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
    if ( layoutParams == null ) {
          layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    }
    layoutParams.setFullSpan(true);
    viewHolder.itemView.setLayoutParams(layoutParams);
}

Span multiple columns with RecyclerView

3 Answers3

Linked