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.

Brana

Did you ever find a way to accomplish this? – Cumulus

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

Is it possible that you share your code about that solution? I'm trying to achieve the same result but without success. – Granophyre

@Brana did my reply help you? If so, could you please accept it? Thanks. – Illconsidered

Hi, will you please post your adapter code, I'm facing small issue. – Teth

Any luck with the implementation ? I am looking for a similar implementation. – Spec

Answer 1

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 :(

Illconsidered

attempting this - getLayoutParams is returning null. Anyone any luck? – Waldemar

@JasonVanAnden, getLayoutParams was also returning me null. Maybe my answer can help you. – Manometer

Hmmm that shouldn't happen at the time onBindViewHolder is called... Maybe you have another issue somewhere else and you are just workarounding it. – Illconsidered

So it's impossible to do it by using GridLayoutManager ? – Nanci

Not quite 'under heavy development' as the StaggeredGridLayoutManager appears to be mostly unchanged more than one year later. – Periostitis

java.lang.ClassCastException: android.support.v7.widget.RecyclerView$i cannot be cast to android.support.v7.widget.StaggeredGridLayoutManager – Expeditious

Answer 2

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

Manometer

Answer 3

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

Billbug