How to reduce space between columns in recycler view(GridLayoutManager) in android

Question

I am using GridLayoutManager of recyclerview to display custom gallery in my app. I have implementated all the features like gallery. But there is a small thing Im stuck with. In one row I have 3 images. But I need to reduce the space between the images. While doing so , I dont want to show more than 3 images in a row, but the image size (if needed) can increase.

this may help you http://stackoverflow.com/questions/28531996/android-recyclerview-gridlayoutmanager-column-spacing — H Raval, Mar 28 '16 at 06:35
Thank you ,I had tried this, but there is no space adding in the top of first imageview. and extra space added in last imageview. also the horizontal and vertical spacing is not even. — D Agrawal, Mar 28 '16 at 06:57

score 4 · Accepted Answer · answered Mar 28 '16 at 08:13

You can use custom RecyclerViewItemDecorator:

public class RecyclerViewItemDecorator extends RecyclerView.ItemDecoration {
  private int spaceInPixels;

  public RecyclerViewItemDecorator(int spaceInPixels) {
    this.spaceInPixels = spaceInPixels;
  }

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

    if (parent.getChildLayoutPosition(view) == 0) {
        outRect.top = spaceInPixels;
    } else {
        outRect.top = 0;
    }
  }
}

Then add it to your RecyclerView:

// For example 10 pixels
int spaceInPixels = 10;
mRecyclerView.addItemDecoration(new RecyclerViewItemDecorator(spaceInPixels));

Hope it helps!

Sanoop Surendran · Answer 2 · 2016-03-28T09:31:20.077

Use this for the recycler view,

    this.mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
    this.mRecyclerView.addItemDecoration(new HorizontalDividerItemDecoration.Builder(getContext())
            .color(Color.DKGRAY)
            .build());
    this.mRecyclerView.addItemDecoration(new VerticalDividerItemDecoration.Builder(getContext())
            .color(Color.DKGRAY)
            .build());

and in your layout file for each item, set the Image in such a way to meet the edges of the container.

eg:

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/RlayoutGrid"
  android:layout_width="220dp"
  android:layout_height="170dp"
  android:background="@android:color/black">


    <ImageView
      android:id="@+id/prefence_imageButton"
      android:layout_width="match_parent"
      android:layout_height="170dp"
      android:background="@android:color/black"
      android:focusable="false"
      android:focusableInTouchMode="false"
      android:scaleType="fitXY"
      />

</RelativeLayout>

and add this to your build.gradle

 compile 'com.yqritc:recyclerview-flexibledivider:1.2.4'

It says, cannot resolve HorizontalDividerItemDecoration.Builder and VerticalDividerItemDecoration.Builder — D Agrawal, Mar 28 '16 at 07:06
@DAgrawal you've forgotten to add the dependency. Yea, I'm necroposter. — 0neel, Nov 25 '16 at 07:17

score 0 · Answer 3 · answered Nov 27 '17 at 12:34

To remove spacing you can use outRect.setEmpty()

RecyclerView.ItemDecoration divider = new RecyclerView.ItemDecoration(){
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.setEmpty();
    }
};
grid.addItemDecoration(divider);

How to reduce space between columns in recycler view(GridLayoutManager) in android

3 Answers3