Spacing Issue while creating bus layout in recycle

Question

I'm using recycler view with GirdLayout Manager for creating bus layout

my problem is with spacing I'm populating data according to row column

This is how I'm getting layout

This is how i want my layout to be:

i want the item at row 3 and column 2 beside sleeper seat at row 2 column 0 like shown in pic how can i remove that space, item should accommodate according to its upper item.

 customGridAdapter = new CustomGridViewAdapter(getActivity(), busSeatModel, false, fareCategory, BusSeatLayout.this);
                        RtlGridLayoutManager gridLayoutManager = new RtlGridLayoutManager(getActivity(), busSeatModel.getMaxLowerColumn());
                        seatLayout.setLayoutManager(gridLayoutManager);
                        seatLayout.setAdapter(customGridAdapter);

this is my customGridAdapter onBindViewHolder

public class CustomGridViewAdapter extends RecyclerView.Adapter<CustomGridViewAdapter.MyViewHolder> {

Context context;
BusSeatModel busSeatModel;
HashMap<Integer, HashMap<Integer, BusSeatItemModel>> data = new HashMap<>();
LayoutInflater inflater;
boolean upper;
HashMap<Integer, BusSeatItemModel> seatLowerModels;
BusSeatItemModel lowerModel;
int maxColumn = 0;
int maxRow = 0;
BusSeatLayout busSeatLayout;
int fare;

public CustomGridViewAdapter(Context context, BusSeatModel busSeatModel, boolean upper, int fare, BusSeatLayout busSeatLayout) {
    this.context = context;
    this.busSeatModel = busSeatModel;
    inflater = LayoutInflater.from(context);
    this.fare = fare;
    this.busSeatLayout = busSeatLayout;
    this.upper = upper;
    if (upper) {
        data = busSeatModel.getBusSeatUpperModels();
        maxColumn = busSeatModel.getMaxUpperColumn();
        maxRow = busSeatModel.getMaxUpperRow();
    } else {
        data = busSeatModel.getBusSeatLowerModels();
        maxColumn = busSeatModel.getMaxLowerColumn();
        maxRow = busSeatModel.getMaxLowerRow();
    }
}


@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    View view = inflater.inflate(R.layout.seatrow_grid, parent, false);

    MyViewHolder myViewHolder = new MyViewHolder(view);

    return myViewHolder;
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    try {

        int row = GetRow(position);
        int column = GetCol(position);

        Log.d(" Row Column  ", "" + row + "  " + column);

        seatLowerModels = new HashMap<>();

        if (data.containsKey(row)) {
            seatLowerModels = data.get(row);
            if (seatLowerModels.containsKey(column)) {
                lowerModel = seatLowerModels.get(column);
                Log.v(" same fare ", " model fare " + lowerModel.getBaseFare() + " category selected " + fare);
                if (fare == -1) {
                    Log.v("  fare  is all ", "++++    ");

                    holder.imageItem.setImageResource(lowerModel.getDrawableName(false));

                } else {
                    Log.v("  fare  is not all ", "");
                    if (lowerModel.getBaseFare() == fare) {
                        Log.v("  fare  is same ", "");
                        holder.imageItem.setImageResource(lowerModel.getDrawableName(false));
                    } else {
                        Log.v("  fare  is diff ", "");
                        holder.imageItem.setImageResource(lowerModel.getDrawableName(true));
                    }
                }
                holder.imageItem.setVisibility(View.VISIBLE);
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}


private int GetCol(int pos) {
    int col = pos % (maxColumn);
    return col;
}

private int GetRow(int pos) {
    int row = pos / (maxColumn);
    return row;
}

@Override
public int getItemCount() {
    return maxColumn * maxRow;
}


public class MyViewHolder extends RecyclerView.ViewHolder {

    ImageView imageItem;


    public MyViewHolder(View itemView) {
        super(itemView);


        imageItem = (ImageView) itemView.findViewById(R.id.item_image);}
}

}

this is the recyclerview

<RelativeLayout
            android:id="@+id/rlRecycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:gravity="center">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvFareCategory"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:paddingBottom="6dip"
                android:paddingTop="8dip"></android.support.v7.widget.RecyclerView>
        </RelativeLayout>

and seat layout xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:padding="4dp"
    android:visibility="invisible"></ImageView>

</RelativeLayout>

Answer 1

I suggest implementing your recycler view item layout as a TableLayout or a GridLayout, they provide more flexibility in defining row/column spans.

Some useful links:

http://android-pro.blogspot.com.eg/2010/02/table-layout.html https://developer.android.com/guide/topics/ui/layout/grid.html

Answer 2

The problem, of course, arises from the fact that your elements don't have the same height. You need to assign different row spans to the elements. I would suggest assigning the taller elements (the ones on the left) a row span of 2 and 1 for the smaller ones.

I think you could do it with a trick like setting your grid layout manager to have a horizontal orientation and use GridLayoutManager.setSpanSizeLookup(..) to control the span (since yours is horizontal now, the span would act on rows). This would require you to probably rework the logic of getting your elements from the backing array. The alternative would be I am afraid (as far as I know) to implement your own custom layout manager.