Home » Android » android – Setting span size of single row in StaggeredGridLayoutManager

android – Setting span size of single row in StaggeredGridLayoutManager

Posted by: admin April 23, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Answer:

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.

<pre style="line-height: 100%;font-family:monospace;background-color:#2b2b2b; border-width:0.01mm; border-color:#000000; border-style:solid;padding:4px;font-size:14pt;"><span style="color:#606366;background-color:#313335;"> 1 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">override </span><span style="color:#cc7832;background-color:#2b2b2b;">fun</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> onCreateViewHolder(parent: ViewGroup</span><span style="color:#cc7832;background-color:#2b2b2b;">,</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> viewType: Int): StaggeredProductCardViewHolder {
</span><span style="color:#606366;background-color:#313335;"> 2 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        </span><span style="color:#cc7832;background-color:#2b2b2b;">var</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> isFullSpan = </span><span style="color:#cc7832;background-color:#2b2b2b;">false
</span><span style="color:#606366;background-color:#313335;"> 3 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        </span><span style="color:#cc7832;background-color:#2b2b2b;">var</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> layoutId = R.layout.shr_staggered_product_card_first
</span><span style="color:#606366;background-color:#313335;"> 4 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        </span><span style="color:#cc7832;background-color:#2b2b2b;">if</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> (viewType == </span><span style="color:#6897bb;background-color:#2b2b2b;">1</span><span style="color:#a9b7c6;background-color:#2b2b2b;">) {
</span><span style="color:#606366;background-color:#313335;"> 5 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">            layoutId = R.layout.shr_staggered_product_card_second
</span><span style="color:#606366;background-color:#313335;"> 6 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        } </span><span style="color:#cc7832;background-color:#2b2b2b;">else</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> </span><span style="color:#cc7832;background-color:#2b2b2b;">if</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> (viewType == </span><span style="color:#6897bb;background-color:#2b2b2b;">2</span><span style="color:#a9b7c6;background-color:#2b2b2b;">) {
</span><span style="color:#606366;background-color:#313335;"> 7 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">            layoutId = R.layout.shr_staggered_product_card_third
</span><span style="color:#606366;background-color:#313335;"> 8 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">            isFullSpan = </span><span style="color:#cc7832;background-color:#2b2b2b;">true
</span><span style="color:#606366;background-color:#313335;"> 9 
10 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        }
</span><span style="color:#606366;background-color:#313335;">11 
12 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        </span><span style="color:#cc7832;background-color:#2b2b2b;">val</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> layoutView = LayoutInflater.from(parent.context).inflate(layoutId</span><span style="color:#cc7832;background-color:#2b2b2b;">,</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> parent</span><span style="color:#cc7832;background-color:#2b2b2b;">,</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> </span><span style="color:#cc7832;background-color:#2b2b2b;">false</span><span style="color:#a9b7c6;background-color:#2b2b2b;">)
</span><span style="color:#606366;background-color:#313335;">13 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        (layoutView.layoutParams </span><span style="color:#cc7832;background-color:#2b2b2b;">as</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> StaggeredGridLayoutManager.LayoutParams).isFullSpan= isFullSpan
</span><span style="color:#606366;background-color:#313335;">14 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">        </span><span style="color:#cc7832;background-color:#2b2b2b;">return</span><span style="color:#a9b7c6;background-color:#2b2b2b;"> StaggeredProductCardViewHolder(layoutView)
</span><span style="color:#606366;background-color:#313335;">15 </span><span style="color:#a9b7c6;background-color:#2b2b2b;">    }</span></pre>

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