Android RecyclerView with multiple view type (multiple view holder)
We have explained earlier how to implement Android RecyclerView. But in that article, we have explained about a normal RecyclerView means each row has the same UI. That means a RecyclerView with only a single view type. Now in this article, we will implement RecyclerView with multiple view type.
Here it is an example of Android RecyclerView with multiple views. Let’s get started for implementation.
We have just change RecyclerView adapter to make it compatible with multiple views. For that, here we will make multiple view holder for the single RecyclerView.
Now here we will create a RecyclerView with two different views. One for call layout and another one for email layout. So let’s create two layouts for two different items in recyclerview: item_call.xml and item_email.xml
item_call.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal"
android:layout_margin="1dp"
android:padding="8dp">
<ImageView
android:id="@+id/imgCall"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="center_vertical"
android:layout_margin="8dp"
android:src="@android:drawable/stat_sys_phone_call"
android:tint="#000000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/txtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:text="Robert"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txtAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:text="Manhattan"
android:textColor="#5d5d5d"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>item_email.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal"
android:layout_margin="1dp"
android:padding="8dp">
<ImageView
android:id="@+id/imgMail"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="center_vertical"
android:layout_margin="8dp"
android:src="@android:drawable/ic_dialog_email"
android:tint="#000000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/txtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:text="Robert"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txtAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:text="Manhattan"
android:textColor="#5d5d5d"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>Now we have one model class Employee. We use the same model class for both view holders. In that class, we have two fields, phone and email. So if we keep phone blank that means value for email is mandatory and same vice-versa if we keep email blank that means a value of a phone is mandatory. So if a phone is blank then RecyclerView shows email UI and if an email is blank then RecyclerView shows call UI. Let’s create ArrayList for that.
ArrayList<Employee> employees = new ArrayList<>();
Employee employee = new Employee();
employee.setName("Robert");
employee.setAddress("New York");
employee.setPhone("+61234456");
employees.add(employee);
employee = new Employee();
employee.setName("Tom");
employee.setAddress("California");
employee.setEmail("tom_frank@gmail.com");
employees.add(employee);
employee = new Employee();
employee.setName("Smith");
employee.setAddress("Philadelphia");
employee.setEmail("smith_carrol@gmail.com");
employees.add(employee);
employee = new Employee();
employee.setName("Ryan");
employee.setAddress("Canada");
employee.setPhone("+612001456");
employees.add(employee);
employee = new Employee();
employee.setName("Mark");
employee.setAddress("Boston");
employee.setEmail("mark_walmerd@gmail.com");
employees.add(employee);
employee = new Employee();
employee.setName("Adam");
employee.setAddress("Brooklyn");
employee.setPhone("+61211780");
employees.add(employee);
employee = new Employee();
employee.setName("Kevin");
employee.setAddress("New Jersey");
employee.setPhone("+94221035");
employees.add(employee);// set adapter
EmployeeAdapter adapter = new EmployeeAdapter(this, employees);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recylerView.setAdapter(adapter);
Now let’s do code in the recyclerview adapter.
Normally we extend adapter class to RecyclerView.Adapter<CustomViewHolder> but here there are multiple view holders. So we extend adapter to RecyclerView.Adapter<RecyclerView.ViewHolder>. So 3 overrided methods are there. onCreateViewHolder, onBindViewHolder and getItemCount in recyclerview adapter class.
Now override another method getItemViewType() and code as below in that method. This is our viewType logic that how we differentiate employees ArrayList from call to email.
@Override
public int getItemViewType(int position) {
if (TextUtils.isEmpty(employees.get(position).getEmail())) {
return TYPE_CALL;
} else {
return TYPE_EMAIL;
}
}TYPE_CALL and TYPE_EMAIL are two static values with 1 and 2 respectively in adapter class.
private static int TYPE_CALL = 1;
private static int TYPE_EMAIL = 2;Now create view holder with multiple views like this:
class CallViewHolder extends RecyclerView.ViewHolder {
private TextView txtName;
private TextView txtAddress;
CallViewHolder(@NonNull View itemView) {
super(itemView);
txtName = itemView.findViewById(R.id.txtName);
txtAddress = itemView.findViewById(R.id.txtAddress);
}
}
class EmailViewHolder extends RecyclerView.ViewHolder {
private TextView txtName;
private TextView txtAddress;
EmailViewHolder(@NonNull View itemView) {
super(itemView);
txtName = itemView.findViewById(R.id.txtName);
txtAddress = itemView.findViewById(R.id.txtAddress);
}
}
Now code as below in onCreateViewHolder and onBindViewHolder method in recyclerview adapter:
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
View view;
if (viewType == TYPE_CALL) { // for call layout
view = LayoutInflater.from(context).inflate(R.layout.item_call, viewGroup, false);
return new CallViewHolder(view);
} else { // for email layout
view = LayoutInflater.from(context).inflate(R.layout.item_email, viewGroup, false);
return new EmailViewHolder(view);
}
}@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
if (getItemViewType(position) == TYPE_CALL) {
((CallViewHolder) viewHolder).setCallDetails(employees.get(position));
} else {
((EmailViewHolder) viewHolder).setEmailDetails(employees.get(position));
}
}
Create method setCallDetails and setEmailDetails in CallViewHolder and EmailViewHolder respectively.
private void setCallDetails(Employee employee) {
txtName.setText(employee.getName());
txtAddress.setText(employee.getAddress());
}private void setEmailDetails(Employee employee) {
txtName.setText(employee.getName());
txtAddress.setText(employee.getAddress());
}
That’s it. Android RecyclerView with multiple views (multiple view holder) implementation complete. You can create more complex RecyclerView using this like Flipkart dashboard and facebook feed page. Yes, you can create more and more multiple views in a single RecyclerView.
You can also add header in RecyclerView and footer in RecyclerView using this feature. Here in below example, there are only 3 types: header, footer and call in a single recyclerview using multiple recyclerview view types. Try your self for this kind of UI.
Hope you like this article. See you later!
Find source here.