Setting span size of single row in StaggeredGridLayoutManager

Question

I have a staggered grid that has 2 columns. This is working. What I want is at position 0 for the row to span across the 2 columns. I have done this before quite easily using GridLayoutManger as so:

                mGridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                    @Override
                    public int getSpanSize(int position) {
                        return position == 0 ? 2 : 1;
                    }
                });

StaggeredGridLayoutManager doesn't provide me with this functionality like GridLayoutManager does.

Is there a different way of doing this? I have searched but not found anyone with the same problem, which is surprising as I would think this functionality would be quite useful for my scenario and for infinite scrolling, when a ProgressBar is shown in the last row of the RecyclerView.

Winterfeed

Answer 1

You can use the setFullSpan method.
In this way the item will layout using all span area.

That means, if orientation is vertical, the view will have full width; if orientation is horizontal, the view will have full height.

Something like this:

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

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

Pay attention.
It supports views that span all the columns, but it should be enough for your case.

Inorganic

Exactly what I was looking for. Thanks so much Gabriele! – Winterfeed

What if you want the specific item to span exactly 2 (out of 3) columns? Instead of spanning all columns. – Counterstamp

@AdamJohns you can't do it with this LayoutManager. – Inorganic

That's unfortunate. I'm assuming that means no recyclerview layout managers have that capability out of the box. – Counterstamp

@AdamJohns You can use the GridLayoutManager – Inorganic

An optimization, if all the view of a particular viewType (for example header) are full span you should be set in onCreateViewHolder(). If some view is full span and some isn't you have to do it in onBind – Parimutuel

I'm getting a java.lang.ClassCastException: android.widget.RelativeLayout$LayoutParams cannot be cast to android.support.v7.widget.StaggeredGridLayoutManager$LayoutParams with this method – Birdiebirdlike

@Birdiebirdlike You should ensure that the LayoutManager you have set on your RecyclerView is (or is extending) StaggeredGridLayoutManager – Society

Answer 2

For anyone using Kotlin.

Using isFullSpan in the onBindViewHolder works.

override fun onBindViewHolder(holder: LoadStateViewHolder, loadState: LoadState) {
        holder.bind(loadState)
        val layoutParams = holder.itemView.layoutParams as StaggeredGridLayoutManager.LayoutParams
        layoutParams.isFullSpan = true
    }

Spessartite

Answer 3

As @Daniele Segato said,

Since the ViewHolder should not be changed and we have to keep onBindViewHolder lean., It is better to set the isFullSpan parameter in the onCreateViewHolder method. This LayoutParamter is for the parent View, namely, the RecylcerView, to decide how to layout the children views.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StaggeredProductCardViewHolder {
    var isFullSpan = false
    var layoutId = R.layout.shr_staggered_product_card_first
    if (viewType == 1) {
        layoutId = R.layout.shr_staggered_product_card_second
    } else if (viewType == 2) {
        layoutId = R.layout.shr_staggered_product_card_third
        isFullSpan = true

    }

    val layoutView = LayoutInflater.from(parent.context).inflate(layoutId, parent, false)
    (layoutView.layoutParams as StaggeredGridLayoutManager.LayoutParams).isFullSpan= isFullSpan
    return StaggeredProductCardViewHolder(layoutView)
}

Final Result: Don't use gridLayoutManger's SpanCoutLookUp Method

Obstructionist