CODEWITHSUNDEEP
androidandroid-layoutandroid-recyclerviewgridlayoutmanager
salmanseifian
salmanseifian

Reputation: 1082

Divide width between two columns in GridLayoutManager

I used GridLayoutManager as my layout manger for recycler view.

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

the result is like below: enter image description here

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

Upvotes: 8

Views: 13492

Answers (5)

Alireza Farahani
Alireza Farahani

Reputation: 2539

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.

enter image description here

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.

Upvotes: 2

Tenten Ponce
Tenten Ponce

Reputation: 2506

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;
            }
        }
    });

Upvotes: 10

paulina_glab
paulina_glab

Reputation: 2487

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.

Upvotes: 3

Dheeraj Joshi
Dheeraj Joshi

Reputation: 1582

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

And there are some very good answers here also

Upvotes: 0

Abubakker Moallim
Abubakker Moallim

Reputation: 1658

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

Upvotes: 1

Related Questions