RecycleView's span size

Question

enter image description here

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
enter image description here

its long video but I suggest you to see this https://www.youtube.com/watch?v=-C5I1DAviJ8 — N J, Jun 17 '15 at 10:38

score 7 · Accepted Answer · answered Jun 17 '15 at 11:07

7

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.

answered Jun 17 '15 at 11:07

CommonsWare

986,068
189
2,389
2,491

if i want 3 Column 2 Column 3 Column , how can i achieve tht – Mo Adel Jul 20 '15 at 01:52
is there any performance issues in using spans? (for example what if the layout has 12 columns per row, and the actual items will be 3 or 4 per row). – Mu Sa Feb 20 '17 at 16:58
1

@MuSa: I am not aware of any. Make sure that your `getSpanSize()` method is fast, though. – CommonsWare Feb 20 '17 at 17:05

score 1 · Answer 2 · answered May 08 '17 at 10:50

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
            }

score 0 · Answer 3 · answered Mar 19 '18 at 07:29

 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

score 0 · Answer 4 · answered May 04 '18 at 10:59

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 )

score -2 · Answer 5 · edited Feb 03 '18 at 16:55

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

RecycleView's span size

5 Answers5

Linked