RecyclerView With Multiple Layouts

Question

I am using RecyclerView to display text in CardView but I want to add a Header TextView at the top of the RecyclerView that looks like this:

enter image description here

So I made another layout file "top_header.xml" with just a TextView but I am not sure how to modify the adapter to get both layouts in there.

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {

List<AdapterData> mItems;

public Adapter() {
    super();
    mItems = new ArrayList<AdapterData>();
    AdapterData data = new AdapterData();
    data.setCode("dummytext");
    data.setResult("dummytext");
    mItems.add(data);

    data = new AdapterData();
    data.setCode("dummytext");
    data.setResult("dummytext");
    mItems.add(data);

    data = new AdapterData();
    data.setCode("dummytext");
    data.setResult("dummytext");
    mItems.add(data);

    data = new AdapterData();
    data.setCode("dummytext");
    data.setResult("dummytext");
    mItems.add(data);

    data = new AdapterData();
    data.setCode("dummytext");
    data.setResult("dummytext");
    mItems.add(data);

}

@Override
public int getItemViewType(int position) {
    int viewType = 0;
    return viewType;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == 0) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.top_textview, parent, false));
    }

    return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_view_card_item, parent, false));
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
    AdapterData data = mItems.get(position);
    viewHolder.code.setText(data.getCode());
    viewHolder.result.setText(data.getResult());

}


@Override
public int getItemCount() {
    return mItems.size();
}


class ViewHolder1 extends RecyclerView.ViewHolder{
    public TextView header;

    public ViewHolder1(View itemView) {
        super(itemView);
        header = (TextView)itemView.findViewById(R.id.header_textview);

    }
}

class ViewHolder2 extends RecyclerView.ViewHolder{
    public TextView code;
    public TextView result;

    public ViewHolder2(View itemView) {
        super(itemView);
        code = (TextView)itemView.findViewById(R.id.sims_code);
        result = (TextView)itemView.findViewById(R.id.sims_result);

    }
}


}

ok I have gotten up to this point and I think its right but not sure what must with the current onBindViewHolder code should I create another BindHolder *code updated* — Jacques Krause, Jun 15 '15 at 14:25

score 2 · Answer 1 · answered Jun 15 '15 at 12:01

You need to make three changes:

Implement getItemViewType() on your RecyclerView.Adapter, to return a unique integer for each view type needed by your app, based on the supplied position. So, you would return one value for your header (presumably a position of 0) and another value for everything else.
Pay attention to the viewType parameter passed into onCreateViewHolder(), and create an appropriate RecyclerView.ViewHolder as needed. This in turn probably means that you should have different ViewHolder classes for your header and detail rows.
In onBindViewHolder(), apply binding logic based upon the type of the ViewHolder that you get, so you bind the appropriate data into the ViewHolder. You can use instanceof, or have the ViewHolder classes implement a common interface, or whatever to make this work.

This sample app demonstrates a RecyclerView with section headers that implements the above steps.

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

Have to create different type of View holder and also have bind the data according to view holder views. This Question is already asked and answer Recyclerview and handling different type of row inflation here and it will help you

edited May 23 '17 at 12:10

Community

1
1

answered Jun 15 '15 at 12:06

Amandeep Rohila

3,302
2
24
32

score 0 · Accepted Answer · edited May 23 '17 at 10:30

If you want to add multiple types of views (more than 2 types) and not just a header and "normal" item, CommonsWare answer is perfect. But if the two mentioned types (header and item) are enough for you, the answer can be a lot simpler (from the practical point of view).

There are two relatively simple libraries that you can use for that:

RecyclerViewHeader - super simple to use, but uses a bit "hacky" approach, that sometimes can cause problems. Suitable for relatively simple headers.
HeaderRecyclerView - Suitable for any type of header. Implements approach mentioned by CommonsWare to inflate two types of views. A bit more difficult to use than RecyclerViewHeader but nothing too hard to use on a daily basis.

For disclosure: I am the author of the RecyclerViewHeader. I'm aware of its flaws, therefore I'm not trying to promote it as one-for-all solution, but more as an interesting alternative to complicating your adapter. HeaderRecyclerView is a nice piece of code that can simplify your work. I use it myself when my RecyclerView header gets complicated.

RecyclerView With Multiple Layouts

3 Answers3

Linked