Android Recyclerview GridLayoutManager column spacing

Asked 15/2, 2015 at 22:31 Answered 31/10, 2022 at 11:33

Solved android gridview android-recyclerview gridlayoutmanager

322

How do you set the column spacing with a RecyclerView using a GridLayoutManager? Setting the margin/padding inside my layout has no effect.

Bah answered 15/2, 2015 at 22:31 Comment(4)

Have you tried subclassing GridLayoutManager and overriding generateDefaultLayoutParams() and kin? – Triacid 15/2, 2015 at 22:35

I have not, I thought there would have been a method I was just not seeing to set the spacing the like grid view. I will try that – Bah 15/2, 2015 at 22:44

https://mcmap.net/q/100931/-how-to-determine-column-position-in-staggered-grid-layout-manager – Emanuele 13/5, 2019 at 19:45

try this gist.github.com/Arpit0492/cf14df02ddf53741df5dde864002e89c – Ouzo 6/2, 2020 at 8:39

395

RecyclerViews support the concept of ItemDecoration: special offsets and drawing around each element. As seen in this answer, you can use

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
  private int space;

  public SpacesItemDecoration(int space) {
    this.space = space;
  }

  @Override
  public void getItemOffsets(Rect outRect, View view, 
      RecyclerView parent, RecyclerView.State state) {
    outRect.left = space;
    outRect.right = space;
    outRect.bottom = space;

    // Add top margin only for the first item to avoid double space between items
    if (parent.getChildLayoutPosition(view) == 0) {
        outRect.top = space;
    } else {
        outRect.top = 0;
    }
  }
}

Then add it via

mRecyclerView = (RecyclerView) rootView.findViewById(R.id.my_recycler_view);
int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.spacing);
mRecyclerView.addItemDecoration(new SpacesItemDecoration(spacingInPixels));

Caducity answered 16/2, 2015 at 1:17 Comment(14)

Use 'outRect.top = space' and remove 'outRect.bottom' if you don't want to mess with the 'if for the first position'. ;-] – Argyres 20/4, 2015 at 18:1

@zatziky - yep, if you already use top and bottom padding as part of your RecyclerView (and use clipToPadding="false"), then you can restructure things slightly. If you don't however, you'd just be moving the if check to be the last time (as you'd still want the bottom padding on the last item). – Caducity 20/4, 2015 at 18:4

I tried this and unless I added android:clipToPadding="false" and android:padding="@dimen/spacing" to the RecyclerView the outside spacing did not match the spacing between items. I have tried all the answers below and think the solution by @yqritc was the cleanest and simplest. – Kame 1/7, 2015 at 1:51

@ianhanniballake, while this works when using a single span layout manager, it fails for multi-span layout manager. – Inquiline 21/7, 2015 at 13:42

It worth to mention, that you have to modify all fields of outRect. otherwise you can get the offset of the previous view. – Gondi 12/8, 2015 at 7:22

If you do it this way with GridLayoutManager - all first items of the 2nd, 3rd...nth column will stick to top (because there is no space). So I think it is better to do .top = space / 2 and .bottom = space / 2. – Dextrin 10/2, 2016 at 23:55

How you can apply only bettween column and bottom ? [img]spacebetween[img] , for example I solve this problem in gridview normal with " android:horizontalSpacing="2dp" android:verticalSpacing="2dp"" in recycle I don't know how – Fredericksburg 4/4, 2016 at 13:43

getChildAdapterPosition (instead of getChildLayoutPosition) is better in most cases, I was getting problems refreshing itemDecorations after views had switched positions - the new layout hasn't finished while the getItemOffsets is called.... – Hinze 15/11, 2016 at 16:55

Do not forget set grid item root layout layout_width="match_parent" – Coniferous 27/11, 2017 at 12:23

this parent.getChildLayoutPosition(view) == 0 puts second item in first row a little lower. I think it should be edited – Karly 17/9, 2018 at 6:45

This answer does not answer the original question. The emphasis of question is on GridLayoutManager . The answer will not work on multi-column/row layouts – Emanuele 13/5, 2019 at 19:25

you didn't consider span count – Halloran 25/3, 2020 at 13:42

only first item from the first row will have top margin. the second wont. change the if to: if (parent.getChildLayoutPosition(view) < columnsCount) and take columnsCount as argument. or use edwardaa answer. – Cystolith 24/7, 2020 at 22:1

for some reason I have to set outRect.bottom and outRect.top to -20 to get to some acceptable row spacing. – Disforest 25/11, 2021 at 20:24

559

Following code works well, and each column has same width:

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

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

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

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view); // item position
        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
            }
        }
    }
}

Usage

1. no edge

enter image description here

int spanCount = 3; // 3 columns
int spacing = 50; // 50px
boolean includeEdge = false;
recyclerView.addItemDecoration(new GridSpacingItemDecoration(spanCount, spacing, includeEdge));

2. with edge

enter image description here

int spanCount = 3; // 3 columns
int spacing = 50; // 50px
boolean includeEdge = true;
recyclerView.addItemDecoration(new GridSpacingItemDecoration(spanCount, spacing, includeEdge));

Birkle answered 8/6, 2015 at 4:51 Comment(19)

Works unless you have items that have various spans, like headers. – Jeopardize 1/7, 2015 at 17:51

Great answer; one tip: spacing is in px (so you can convert dp to px using Math.round(someDpValue * getResources().getDisplayMetrics().density)) – Mourning 3/3, 2016 at 19:40

Its working fine but i am having a problem, i am using GridLayoutManager with spanCount of 2(default) but user can change the spanCount so when spanCount changes from default position there is a much more visible padding on some positions like if spanCount will 3 than padding/margin on 2,3 8,9 12,13 etc. – Chadd 15/3, 2016 at 8:13

Works great! But I have some problems with StaggeredGridLayoutManager. imgur.com/XVutH5u horizontal margins sometimes differs. – Turgot 25/3, 2016 at 10:38

@HarisQureshi I had same problem. You have to remove item decoration every time you change spanCount. – Castora 23/5, 2016 at 5:56

Works great, thank you, however there is a problem with odd number of columns. The right hand column does not align with the edge of the screen, it has one or two pixels of padding. So I take the padding, reset it to zero, then I distribute to the middle column. This is done by dividing the distributable amount by two, adding to the left/right and adding any remainder to the right. For this to work I pre-calculate all of the spacings once in my constructor (instead of each time the list scrolls) and store them in an array of left/right values. Hope this helps – Pneumoencephalogram 14/6, 2016 at 10:41

You should use

StaggeredGridLayoutManager.LayoutParams lp = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();         int position = lp.getSpanIndex();

to get the position instead of parent.getChildAdapterPosition(view); this will solve the issues with bad calculations. – Whitby 12/8, 2016 at 13:5

Best solution there is, thank you. If you have problems with first item in recycler view, from the code you put in for GridSpacingItemDecoration, remove last if(position >= spanCount){outRect.top = spacing;} and you are good to go. Many thanks to @edwardaa – Swen 2/11, 2016 at 13:47

I have question in your answer. I have the same situation that can not make Images center. cause I have many sizes images that load in ImageView and I put attribute with a fixed size in dp and CropCenter but it not actually center. why it happends? – Cajolery 7/1, 2017 at 7:30

This doesn't work when layout is rtl (for 2 columns or more). currently the space between columns is not right when in rtl mode. you need to replace: outRect.left with outRect.right when it is in rtl. – Ashlieashlin 17/7, 2017 at 6:15

@Jeopardize Including Header is much easier than you think, As you can see, in "getItemOffsets", it's setting it's own position. So what you would do is, make ItemDecoration with boolean value "withHeader", and in "getItemOffsets", >> if( withHeader) { if( position == 0 ) return; else position--; } – Seeley 22/12, 2017 at 6:33

If you have a toggle switch that toggles between list to grid, don't forget to call recyclerView.removeItemDecoration() before setting any new Item decoration. If not then the new calculations for the spacing would be incorrect. – Bastille 2/4, 2018 at 16:47

This decision has a problem: items can be not the same width. It depends on space and column count. So i've made some changes in this answer: https://mcmap.net/q/98745/-android-recyclerview-gridlayoutmanager-column-spacing – Byrom 27/9, 2018 at 13:54

excellent calculation for the left & right. perfect same spacing – Oruro 1/11, 2018 at 13:48

This is the more generic answer and should have been the marked one – Vancevancleave 20/4, 2019 at 8:20

It worked, but I can't understand the calculation, can someone explain in more detail? Why can't I set left for all items except the last one and set right for only last one? – Calutron 26/4, 2020 at 13:25

@Jeopardize Have you found another solution for multiple spans? This one works fine but as soon as I have .setSpanSizeLookup Some of the spacing is messed up – Magog 28/9, 2020 at 17:3

Add parenthesis around (spacing / spanCount) for more stable integer division rounding. Without them I had first column 161px wide, second and third 160px and the last one 159px. – Bonsai 23/3, 2022 at 9:26

This answer has a bug, when the Adapter performs the notifyItemRemoved animation, the removed item's will flicker. You need to use the following code to get the correct position in getItemOffsets.

int position = parent.getChildAdapterPosition(view); // item position         if (position == RecyclerView.NO_POSITION) {             position = parent.getChildLayoutPosition(view);         }         if (position == RecyclerView.NO_POSITION) {             return;         }

– Mesothorax 18/6, 2022 at 10:19

395

RecyclerViews support the concept of ItemDecoration: special offsets and drawing around each element. As seen in this answer, you can use

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
  private int space;

  public SpacesItemDecoration(int space) {
    this.space = space;
  }

  @Override
  public void getItemOffsets(Rect outRect, View view, 
      RecyclerView parent, RecyclerView.State state) {
    outRect.left = space;
    outRect.right = space;
    outRect.bottom = space;

    // Add top margin only for the first item to avoid double space between items
    if (parent.getChildLayoutPosition(view) == 0) {
        outRect.top = space;
    } else {
        outRect.top = 0;
    }
  }
}

Then add it via

mRecyclerView = (RecyclerView) rootView.findViewById(R.id.my_recycler_view);
int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.spacing);
mRecyclerView.addItemDecoration(new SpacesItemDecoration(spacingInPixels));