CODEWITHSUNDEEP
androidandroid-recyclerview
Fazle Rabbi
Fazle Rabbi

Reputation: 340

LayoutManager for RecyclerView Grid with different cell width in android

enter image description here

StaggeredGridLayoutManager doesn't seem to allow customizing a cell width or span multiple columns (except full span) for vertical orientation.

How to create a layout like the above image? What will be the perfect Layout Manager in this case... GridLayoutManager or StaggeredGridLayoutManager?

Upvotes: 2

Views: 4583

Answers (2)

Fazle Rabbi
Fazle Rabbi

Reputation: 340

Well, I have solved it! The solution is:-

GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
        layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
//                if (position % 3 == 0) {
//                    Log.e("TAG", "Position: " + position +" position % 3= " + position % 3 + " return 2");
//                    return 2;
//                } else {
//                    Log.e("TAG", "Position: " + position +" position % 3= " + position % 3 + " return 1");
//                    return 1;
//                }
                if (position % 3 == 0 || position % 3 == 1) {
                    Log.e("TAG", "Position: " + position +" position % 3= " + position % 3 + " return 1");
                    return 1;
                } else {
                    Log.e("TAG", "Position: " + position +" position % 3= " + position % 3 + " return 2");
                    return 2;
                }
//                return (3 - position % 3);
            }
        });

Upvotes: 1

Volodymyr Yatsykiv
Volodymyr Yatsykiv

Reputation: 3211

Instead of using StaggeredGridLayoutManager you can use GridLayoutManager. To have different column count in row you have to override setSpanSizeLookup.

Example:

GridLayoutManager gridLayoutManager = new GridLayoutManager(getAppContext(), spanCount);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        //define span size for this position
        //for example, if you have 2 column per row, you can implement something like that:
        if(position == youRule) {
            return 2; //item will take 2 column (full row size)
        } else {
            return 1; //you will have 2 rolumn per row
        }
    }
});

Pay attention that spanSize <= spanCount

Upvotes: 6

Related Questions