Recycler View With Gridlayout Manager

Question

I'm using RecyclerView with GridLayout manager to make seat booking layout like travels.

My problem is how to auto detect spancount when my column is random?

I know spanCount = recyclerViewWidth / singleItemWidth;, but the problem is singleItemWidth is different, as the seat width is different.

This is the desired layout that I want:

... but I'm currently getting something like this:

This is the code I'm using to arrange the seat layout:

    gridLayoutManager=new GridLayoutManager(this,totalRows, LinearLayoutManager.VERTICAL,
            false);
    gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            int rows=Integer.parseInt(upperlist.get(position).get("row"));
             return (rows);///(int) (mRecyclerView.getMeasuredWidth()/ 10);
        }
    });
     mRecyclerView.setLayoutManager( gridLayoutManager);
    MyAdapter myAdapter=new MyAdapter(this,gridArray);

... where upperlist hold these values:

 [{cols=8, seatNumber=29U, row=4, zindex=1}, 
  {cols=6,seatNumber=23U, row=4, zindex=1},
  {cols=4,seatNumber=21U,row=4, zindex=1}, 
  {cols=2, seatNumber=11U, row=4, zindex=1}, 
  {cols=0,seatNumber=9U,row=4, zindex=1},

  {cols=8,seatNumber=25U, row=2, zindex=1}, 
  {cols=6,seatNumber=17U, row=2, zindex=1}, 
  {cols=4,seatNumber=13U, row=2, zindex=1}, 
  {cols=2,seatNumber=5U,  row=2, zindex=1}, 
  {cols=10, seatNumber=D2U,row=2, zindex=1}, 
  {cols=0, seatNumber=1U, row=2, zindex=1}, 

  {cols=8, seatNumber=26U, row=1, zindex=1},
  {cols=6,seatNumber=18U, row=1, zindex=1}, 
  {cols=4,seatNumber=14U, row=1, zindex=1},
  {cols=2,seatNumber=6U,  row=1, zindex=1}, 
  {cols=0,seatNumber=2U,  row=1, zindex=1}]

This is a single list, where I'm having different values for rows and columns. I therefore need a generalized method which can work on all layouts.

Answer 1

I guess the "cols" parameter definies the column the item should be placed, right? If that's the case, you should take the max value of all items for this parameter. In this case "10". As all items seem to span 2 cloumns, each item has a span-size of 2 and the max span index is 11. Therefore your span-count should be 12 (indizes from 0 to 11).

Now you'll have to figure out the empty spaces. E.g. there is no item at all in row 3 and according to your data, row 1 & 4 have an empty element at the end. So you should define a empty item (-> viewtype!) that represents a blank space in your layout.

Finally, sort the list of items by their row-index and column index, so that you achieve this structure:

[ //row 1
  {cols=0, seatNumber=2U, row=1, zindex=1},
  {cols=2, seatNumber=6U, row=1, zindex=1}, 
  {cols=4, seatNumber=14U, row=1, zindex=1},
  {cols=6, seatNumber=18U, row=1, zindex=1},
  {cols=8, seatNumber=26U, row=1, zindex=1},
  {cols=10, row=1, zindex=1}, //an empty element

  //row 2
  {cols=0, seatNumber=1U, row=2, zindex=1},
  {cols=2, seatNumber=5U,  row=2, zindex=1},  
  {cols=4, seatNumber=13U, row=2, zindex=1}, 
  {cols=6, seatNumber=17U, row=2, zindex=1},
  {cols=8, seatNumber=25U, row=2, zindex=1},  
  {cols=10, seatNumber=D2U,row=2, zindex=1}, 

  //row 3 (just empty elements)
  {cols=0, row=3, zindex=1},
  {cols=2, row=3, zindex=1},
  {cols=4, row=3, zindex=1},
  {cols=6, row=3, zindex=1},
  {cols=8, row=3, zindex=1},
  {cols=10, row=3, zindex=1},

  //row 4
  {cols=0, seatNumber=9U, row=4, zindex=1},
  {cols=2, seatNumber=11U, row=4, zindex=1},
  {cols=4, seatNumber=21U, row=4, zindex=1}, 
  {cols=6, seatNumber=23U, row=4, zindex=1},
  {cols=8, seatNumber=29U, row=4, zindex=1},
  {cols=10, row=4, zindex=1} //an empty element
]

And modify the remaining code in this way:

columnCount = computeTotalColumnCount(...); //
addEmptyElements(...); // add empty elements to your data structure (upperList or gridArray)

gridLayoutManager=new GridLayoutManager(this, columnCount, LinearLayoutManager.VERTICAL,
            false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return 2;
        }
    });

If you want the span-size of each items to be more flexible, you should add a new parameter to each item, so that an item looks like this:

{cols=0, seatNumber=2U, row=1, zindex=1, spansize=2}

You can than modify your SpanSizeLookup to this:

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return Integer.parseInt(upperList.get(i).get("spansize"));
        }
   });

I hope this helps ;)