Recyclerview with 2 lists in one view?

Question

Good day,

I have this screen I want to make where it displays both winners and losers of a bid.

How it needs to look is like this:

TextView - Winners
Name and bid amount
Name and bid amount
Name and bid amount
--------------------
Textview - Losers
Name and bid amount
Name and bid amount
Name and bid amount
Name and bid amount

The response from the webservice is as below:

{
  "winningBids": [
    {
      "amount": 500,
      "quantity": 1,
      "name": "Craig",
      "status": "WINNING"
    }
  ],
  "losingBids": [
    {
      "amount": 461,
      "quantity": 1,
      "name": "Bob",
      "status": "LOSE"
    },
    {
      "amount": 460,
      "quantity": 1,
      "name": "James",
      "status": "LOSE"
    }
  ]
}

I thought about having 2 RecyclerViews on the same screen but I dont think that would work out as this list on Both winning and losing can be quite lengthy which means 2 sections of different scrolling areas. Is there a way I can have both the winning and losing in the same recyclerview with the Headings indicating the list of winners and losers as well as the line between the list of winners and losers?

My screen is currently:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior"
  tools:context="com.example.app.BiddingHistoryActivity"
  tools:showIn="@layout/activity_bidding_history">

  <android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:padding="@dimen/padding_16"
    android:background="@drawable/border_bottom"
    android:layout_height="wrap_content"/>
</RelativeLayout>

My row is a simple TextView for the name and a TextView for the amount of the bid.

Your ideas on how I can implement this would be greatly appreciated.

Thank you

Answer 1

Create different ViewHolders for you different Views: TYPE_HEADER_WINNER, TYPE_HEADER_LOOSER, TYPE_ITEM.

Follow the instructions for the complete Adapter here.

Modifications:

 private static final int TYPE_HEADER_WINNER = 0;
 private static final int TYPE_HEADER_LOOSER = 1;
 private static final int TYPE_ITEM = 2;

 @Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == TYPE_ITEM) {
        //inflate your layout and pass it to view holder
        return new VHItem(null);
    } else if (viewType == TYPE_HEADER_WINNER) {
        //inflate your layout and pass it to view holder
        return new VHHeaderWinner(null);
    } else if (viewType == TYPE_HEADER_LOOSER) {
        //inflate your layout and pass it to view holder
        return new VHHeaderLooser(null);
    }

    throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder instanceof VHItem) {
        String dataItem = getItem(position);
        //cast holder to VHItem and set data
    } else if (holder instanceof VHHeaderWinner) {
        //cast holder to VHHeaderWinner and set data for header.
    } else if(holder instanceof VHHeaderLooser){        
        //cast holder to VHHeaderLooser and set data for header.
    }
}

@Override
public int getItemCount() {
    return data.length + 2; //Since you have 2 headers
}

@Override
public int getItemViewType(int position) {
    if (position == 0)
        return TYPE_HEADER_WINNER;
    if (position == winnerCount + 1) 
        return TYPE_HEADER_LOOSER;           

    return TYPE_ITEM;
}

class VHHeaderLooser extends RecyclerView.ViewHolder {
    Button button;

    public VHHeader(View itemView) {
        super(itemView);
    }
}

class VHHeaderWinner extends RecyclerView.ViewHolder {
    Button button;

    public VHHeader(View itemView) {
        super(itemView);
    }
}