Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add column spacing in RecyclerView with GridLayoutManager

Android Recyclerview GridLayoutManager column spacing Here is the question, the first answer does not work well in my project,and it makes the spacing bigger between item and item. the second answer is quite perfect.But if RecyclerView has headers,it does not work well. Then I fixed it.

import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Android Studio
 * User: Ailurus(ailurus@foxmail.com)
 * Date: 2015-10-28
 * Time: 15:20
 */
public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

    private int spanCount;
    private int spacing;
    private boolean includeEdge;
    private int headerNum;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge, int headerNum) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
        this.headerNum = headerNum;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view) - headerNum; // item position

        if (position >= 0) {
            int column = position % spanCount; // item column

            if (includeEdge) {
                outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
                outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)

                if (position < spanCount) { // top edge
                    outRect.top = spacing;
                }
                outRect.bottom = spacing; // item bottom
            } else {
                outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
                outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
                if (position >= spanCount) {
                    outRect.top = spacing; // item top
                }
            }
        } else {
            outRect.left = 0;
            outRect.right = 0;
            outRect.top = 0;
            outRect.bottom = 0;
        }
    }
    }
}

If you want to use it, just do as the following.

int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.grid_layout_margin);
recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, spacingInPixels, true, 0));
@wogenhaosini

This comment has been minimized.

Copy link

@wogenhaosini wogenhaosini commented Dec 6, 2016

Thank you very much。

@WMTAndroidJaymin

This comment has been minimized.

Copy link

@WMTAndroidJaymin WMTAndroidJaymin commented Jan 2, 2017

Thanks...

@DarkSpikeX

This comment has been minimized.

Copy link

@DarkSpikeX DarkSpikeX commented Jan 6, 2017

thanks

@eltray

This comment has been minimized.

Copy link

@eltray eltray commented Jan 25, 2017

Perfect! Thanks man.

@Fomovet

This comment has been minimized.

Copy link

@Fomovet Fomovet commented Jun 21, 2017

Thank you very much! You are my brother

@burakkarabonial

This comment has been minimized.

Copy link

@burakkarabonial burakkarabonial commented Aug 16, 2017

Great, thanks!

@tatocaster

This comment has been minimized.

Copy link

@tatocaster tatocaster commented Sep 11, 2017

just a converted into Kotlin

class GridSpacingItemDecoration(private val spanCount: Int, private val spacing: Int, private val includeEdge: Boolean, private val headerNum: Int) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State?) {
        val position = parent.getChildAdapterPosition(view) - headerNum // item position

        if (position >= 0) {
            val column = position % spanCount // item column

            if (includeEdge) {
                outRect.left = spacing - column * spacing / spanCount // spacing - column * ((1f / spanCount) * spacing)
                outRect.right = (column + 1) * spacing / spanCount // (column + 1) * ((1f / spanCount) * spacing)

                if (position < spanCount) { // top edge
                    outRect.top = spacing
                }
                outRect.bottom = spacing // item bottom
            } else {
                outRect.left = column * spacing / spanCount // column * ((1f / spanCount) * spacing)
                outRect.right = spacing - (column + 1) * spacing / spanCount // spacing - (column + 1) * ((1f /    spanCount) * spacing)
                if (position >= spanCount) {
                    outRect.top = spacing // item top
                }
            }
        } else {
            outRect.left = 0
            outRect.right = 0
            outRect.top = 0
            outRect.bottom = 0
        }
    }
}
@bubblexin

This comment has been minimized.

Copy link

@bubblexin bubblexin commented Apr 10, 2018

Thanks.This is useful.

@naveedahmad99

This comment has been minimized.

Copy link

@naveedahmad99 naveedahmad99 commented Mar 13, 2019

One Extra Brace remove from the end. Thanks

@jasperx21

This comment has been minimized.

Copy link

@jasperx21 jasperx21 commented Mar 4, 2020

Awesome. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.