RecycleView's span size

Question

I'm trying to achieve a layout similar to the picture above with the RecyclerView in conjunction with the GridLayoutManager, i tried setting the setSpanSizeLookup based on position but couldn't mimic the design above..

anyone could help please?

    mRecyclerView = (RecyclerView) contentView;
    mRecyclerView.setHasFixedSize(false);

    GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), 3);
    gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return 3 - (position % 3);
        }
    });

    mRecyclerView.setLayoutManager(gridLayoutManager);

..

What i'm getting

Answer 1

Well, you want alternate "rows" to be evenly split between two cells. Evenly split requires an even number of columns, and 3 is not an even number. So, change that to 2.

Now, you want getSpanSize() to return (by row):

• position 0 = 2 (i.e., span both cells)
• positions 1 and 2 = 1 (i.e., each take up one cell)
• position 3 = 2
• positions 4 and 5 = 1
• etc.

(position % 3) > 0 ? 1 : 2 would seem to give you that.

Answer 2

You can add the following to your onCreate():

   GridLayoutManager layoutManager=new GridLayoutManager(this,10);
    layoutManager.setSpanSizeLookup(new 
    GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {

            int index = position % 2;

            switch(index){
                case 0: return 1;
                case 1: return 2;
                }
         }
  }

after that set layoutmanager to recyclerview

recyclerview.setLayoutManager(layoutManager);

Answer 3

Ok, I found the solution to get this layout first make GrideLayoutManager like this.

GrideLayoutManager gridLayoutManager = new GridLayoutManager(context,2 , LinearLayoutManager.VERTICAL ,false) ;

Here you tell android that one row will consist of 2 span then make getSpanSize like this.

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {

        return  position % 3 == 0 ? 2: 1  
   }
});

That make every position divided by 3 occupy 2 span (one row )

Answer 4

 Try this i tried it for you



val spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
                    override fun getSpanSize(position: Int): Int {
                        if (position == 0) {
                            return 2
                        } else if (position == 1 || position == 2)
                            return 1
                        else if (position == 3)
                            return 2
                        else return 1

    }
    }

     val glm = GridLayoutManager(this, 2)

                glm.spanSizeLookup = spanSizeLookup
                recycler_view.layoutManager = glm

Answer 5

I solved it. this is my code you will get the same desired output

GridLayoutManager mLayoutManager = new GridLayoutManager(this, 2);

    mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {

            int i = 3 - (position % 3);

            switch(i){
                case 1:
                    return 1;
                case 2:
                    return 1;
                case 3:
                    return 2;
                default:    
                    return 2; \\Optional Since it will not have a default case with the given formula
            }