Android Multiple row layout using RecyclerView

Description: In this post I'm gonna show you how we can have multiple row layout in Android's Material Design  RecyclerView  using   getItemViewType.

compile 'com.android.support:cardview-v7:23.0.0'
compile 'com.android.support:recyclerview-v7:23.0.0'

GitHub Project HERE

So lets get started :-)

Step 1: Create Recycler Adapter by overriding getItemViewType method and giving the type for different layout as shown below.

@Override

public int getItemViewType(int position) {

    MultipleRowModel multipleRowModel = multipleRowModelList.get(position);

    if (multipleRowModel != null)
        return multipleRowMod.type;

    return super.getItemViewType(position);
}

Step 2: Create a viewHolder as per viewType .  We can create different row layout using viewType .

Note: viewType in onCreateviewholder is retured from getItemViewType in Step 1.

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

    View view = null;

    if (viewType == AppConstant.FIRST_ROW)
        view = inflater.inflate(R.layout.view_row_first, parent, false);
    else if (viewType == AppConstant.OTHER_ROW)
        view = inflater.inflate(R.layout.view_row_other, parent, false);

    return new MultipleRowViewHolder(view, viewType);
}

Step 3: Lets integrated all this in one RecyclerView adapter.

public class MultipleRowAdapter extends RecyclerView.Adapter<MultipleRowViewHolder> {

    private LayoutInflater inflater = null;
    private List<MultipleRowModel> multipleRowModelList;

    public MultipleRowAdapter(Context context, List<MultipleRowModel> multipleRowModelList){
        this.multipleRowModelList = multipleRowModelList;
        inflater = LayoutInflater.from(context);
    }

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

        View view = null;

        if (viewType == AppConstant.FIRST_ROW)
            view = inflater.inflate(R.layout.view_row_first, parent, false);
        else if (viewType == AppConstant.OTHER_ROW)
            view = inflater.inflate(R.layout.view_row_other, parent, false);

        return new MultipleRowViewHolder(view, viewType);
    }

    @Override
    public void onBindViewHolder(MultipleRowViewHolder holder, int position) {
        holder.multipleContent.setText(multipleRowModelList.get(position).modelContent);
    }

    @Override
    public int getItemCount() {
        return (multipleRowModelList!= null && multipleRowModelList.size() > 0 ) ? multipleRowModelList.size() : 0;
    }

    @Override
    public int getItemViewType(int position) {

        MultipleRowModel multipleRowModel = multipleRowModelList.get(position);

        if (multipleRowModel != null)
            return multipleRowModel.type;

        return super.getItemViewType(position);
    }

}

Step 4: Finally our MainActivity looks something like this.

public class MainActivity extends AppCompatActivity {

    private RecyclerView multipleRowRecyclerView;
    private MultipleRowAdapter multipleRowAdapter;

    private List<MultipleRowModel> multipleRowModelList = new ArrayList<>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        multipleRowRecyclerView = (RecyclerView)findViewById(R.id.multipleRowRecyclerView);
        multipleRowRecyclerView.setHasFixedSize(true);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, OrientationHelper.VERTICAL, false);
        multipleRowRecyclerView.setLayoutManager(linearLayoutManager);
        multipleRowRecyclerView.setItemAnimator(new DefaultItemAnimator());

        fillAdapter();

        multipleRowAdapter = new MultipleRowAdapter(MainActivity.this, multipleRowModelList);

        multipleRowRecyclerView.setAdapter(multipleRowAdapter);
    }

    private void fillAdapter() {

        int type;

        String content;

        for (int i = 0; i < 10; i++) {

            if (i == 0 || i == 5 || i == 9) {
                type = AppConstant.FIRST_ROW;
                content = "Type 1: This is Multiple row layout";
            } else {
                type = AppConstant.OTHER_ROW;
                content = "Type 2";
            }

            multipleRowModelList.add(new MultipleRowModel(type , content));
        }
    }
}

GitHub Project HERE

Sample Output :

Read More