Divide width between two columns in GridLayoutManager

Question

I used GridLayoutManager as my layout manger for recycler view.

  mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2));

the result is like below:

but I want to divide width between two columns equally. how can I do that?

Anomalism

Answer 1

Try adding this on your recyclerView:

mRecyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            int position = parent.getChildAdapterPosition(view); // item position
            int spanCount = 2;
            int spacing = 10;//spacing between views in grid

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

                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 = 0;
                outRect.right = 0;
                outRect.top = 0;
                outRect.bottom = 0;
            }
        }
    });

Aramanta

Answer 2

Setting the column count like you do:

mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2));

... actually makes the grid splitting into columns of the same width.

This suggests that the problem lies somewhere else, probably in the item layout. I suppose that some whitespaces (paddings/margins) are responsible for the fact that the items are shifted to the right. Try to remove these spacings and check if it works.

If it helps, you can always add new spacing with ItemDecoration but it isn't the reason for the incorrect size of your columns.

I think that turning on Show Layout Bounds option may be helpful for you.

Honan

there is no gap between columns in your solution almost useless – Endoergic

Answer 3

I wrote a library for equal spacing which supports Vertical/Horizontal, LTR/RTL, LinearLayout/GridLayout manager and Edge inclusion. Its basically a single file, so you can copy paste that file into your code.

I tried to support StaggeredGridLayout but span index returned by this layout is not reliable. I would be glad to hear any suggestion for that.

Alwitt

Answer 4

You can use custom ItemDecoration and you can split the space as you want :

SpacesItemDecoration can help you with this:

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.bottom = space;

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

In your acitivty or fragment :

int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.spacing);
        spacesItemDecoration = new SpacesItemDecoration(spacingInPixels);

      recyclerview.addItemDecoration(spacesItemDecoration);

You can change the outRect.left & outRect.Right as per your need

Sloven

Yes but it has some changes if you can see – Sloven

Answer 5

You can use ItemDecoration for this purpose,have a look at here

And there are some very good answers here also

Monocle