Center Horizontal last row using span Recycler GridLayoutManager

Question

I am trying to make items of the last row center horizontal in recycler view. I am using GridLayoutManager in order to achieve the functionality. Using setSpanSizeLookup, I want to adjust span size for the last row as pointed by posts on SO, but unfortunately I can't keep track which row is currently being populated, so my logic isn't working.

What I want to achieve is:

Code:

static private int NUM_OF_COLUMNS = 3;

final GridLayoutManager manager = new GridLayoutManager(getBaseActivity(), NUM_OF_COLUMNS);

        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {

            int rowNum = 0;

            @Override
            public int getSpanSize(int position) {

                int spanSize = 1;

                if(position == 0)
                    rowNum = 0; //reset it

                //check if it is last row
                int numOfRows = (int) Math.ceil((double) list.size() / NUM_OF_COLUMNS);
                if(rowNum == numOfRows - 1) {
                    //get num of items in last row
                    int items = list.size() - (NUM_OF_COLUMNS * rowNum);
                    if(items == 1)
                        spanSize = 3;
                }

                if(rowNum % NUM_OF_COLUMNS == 0) //if last element
                    rowNum++;

                return spanSize;
            }
        });

        recyclerView.setLayoutManager(manager);

Above code is managing row number since I don't know how to get current row and column position for grid. Can anyone point towards right direction? Thanks.

Norval

ever figure this out? – Igor

@Igor nopes. What I know is you need to make your own layout manager for this problem. – Norval

Answer 1

Take a look at this. It's google library which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

in Activity

  FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
        layoutManager.setFlexWrap(FlexWrap.WRAP);
        layoutManager.setFlexDirection(FlexDirection.ROW);
        layoutManager.setAlignItems(AlignItems.CENTER);
        viewDecks.setLayoutManager(layoutManager);

in Adapter.ViewHolder

ViewGroup.LayoutParams lp = itemView.getLayoutParams();
            if (lp instanceof FlexboxLayoutManager.LayoutParams) {
                FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
                flexboxLp.setFlexGrow(1.0f);
                flexboxLp.setAlignSelf(AlignSelf.CENTER);
            }

and make sure you set android:layout_gravity="center"

Gleason

@Norval did it help you? – Gleason

No It is stretching the row – Saddletree

Answer 2

I believe with known number of items in the adapter, it is possible to write with simple extension for GridLayoutManager class.

I just needed this so here is working solution...

/**
 * Get grid layout manager with special optimization for span of the last row.
 * In case, last row won't have same number of items as previous rows, its content
 * will be spread over whole row.
 *
 * @param ctx current context
 * @param spanCount number of items per row
 * @param itemsCount number of items in adapter
 * @param orientation manager orientation
 * @param reverseLayout flag for orientation direction
 */
fun getGridManagerLastRowCenter(ctx: Context, spanCount: Int, itemsCount: Int,
        @RecyclerView.Orientation orientation :Int, reverseLayout: Boolean)
        : GridLayoutManager {

    // get number of items in last row
    val lastRowCount = itemsCount % spanCount
    if (lastRowCount == 0) {
        return GridLayoutManager(ctx, spanCount, orientation, reverseLayout)
    }

    // number of rows with all items
    val fullRows = itemsCount / spanCount
    // "span" counter for whole row (as minimum divider)
    val rowSpan = spanCount * lastRowCount
    // span value for item in the first rows
    val baseRowItemSpan = rowSpan / spanCount
    // span value for item in the last row
    val lastRowItemSpan = rowSpan / lastRowCount

    // return generated manager
    return GridLayoutManager(ctx, rowSpan, orientation, reverseLayout).apply {
        spanSizeLookup = object: GridLayoutManager.SpanSizeLookup() {

            override fun getSpanSize(position: Int): Int {
                return if (position / spanCount < fullRows) {
                    baseRowItemSpan
                } else {
                    lastRowItemSpan
                }
            }
        }
    }
}

Usage with the simple call

rv.layoutManager = UtilsListAco.getGridManagerLastRowCenter( ctx, 3, items.size, RecyclerView.VERTICAL, false)

Swatter

this works but partially.... suppose top row has 3 and second row has 2 then 2 should come at the center between the upper 2 rings. – Lyrebird