Categories
Android

Android RecyclerView with multiple ViewHolders

Android RecyclerView Multiple ViewHolders
Android RecyclerView Multiple ViewHolders

In our last article we discussed about Android RecyclerView showing how it works. But that was a simple example to start with. We saw how phone calls objects are being displayed. Now, what if we have to display multiple type of objects? For say, if we want to display messages/SMS with call logs? As we created a ViewHolder showing call logs data, is it possible to show messages along with that? Yes, it is possible, but in a other way i.e. using multiple ViewHolders. We need just little bit of change to our previous application.

To achieve our goal we need to create another ViewHolder so that message/SMS objects can get reference to it display as required.

CHANGES TO PREVIOUS CODE

We will change some parts of our previous code for Android RecyclerView. Here are the changes we need to do in a brief.

  • Create message or SMS object.
  • Add some demo SMS object to our list to display them.
  • Create layout for SMS for Adapter cell.
  • Create another ViewHolder for SMS type.
  • Identify object type(whether call or SMS).
  • After identification attach particular ViewHolder by object type.
  • Display data for single cell by object type.

Enough readings, Right? Now let’s start coding. We are skipping the basic part to set up a RecyclerView. If you are not familiar with it, just read our previous article about Android RecyclerView. We will be focusing in multiple viewholders only.

First of all we will create our SMS object. This looks like –

SMS.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
package com.digitstory.testapplication;
 
public class SMS {
   private String senderName,smsContent,smsTime;
       public SMS(String senderName, String smsContent, String smsTime) {
       this.senderName = senderName;
       this.smsContent = smsContent;
       this.smsTime = smsTime;
   }
   public String getSenderName() {
       return senderName;
   }
   public String getSmsContent() {
       return smsContent;
   }
   public String getSmsTime() {
       return smsTime;
   }
}
 
 

Next, let’s add some demo SMS objects along with our call objects in RecyclerViewActivity. We will mix up them in order to experiment multiple viewholders working properly or not. Here we go –

RecyclerViewActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
package com.digitstory.testapplication;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
 
public class RecyclerViewActivity extends AppCompatActivity {
   private RecyclerView recyclerView;
   private LinearLayoutManager linearLayoutManager;
   private List<Object> callSMSList;
   private CallSMSAdapter callSMSAdapter;
  
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_recycler_view);
       recyclerView=(RecyclerView)findViewById(R.id.recyclerView);
       // Set Layout Manager
       linearLayoutManager=new LinearLayoutManager(this);
       recyclerView.setLayoutManager(linearLayoutManager);
       // Limiting the size
       recyclerView.setHasFixedSize(true);
       // Initialize list items
       init();
   }
   private void init(){
       callSMSList =new ArrayList<>();
       // Initiating Adapter
       callSMSAdapter =new CallSMSAdapter(RecyclerViewActivity.this);
       recyclerView.setAdapter(callSMSAdapter);
       // Adding some demo data(Call &amp; SMS Objects).
       // You can get them from your data server
       callSMSList.add(new Call("John","9:30 AM"));
       callSMSList.add(new Call("Rob","9:40 AM"));
       callSMSList.add(new SMS("Sandy","Hey, what's up?","9:42 AM"));
       callSMSList.add(new Call("Peter","9:45 AM"));
       callSMSList.add(new SMS("John","Are you writing blog?","9:48 AM"));
       callSMSList.add(new Call("Jack","9:50 AM"));
       callSMSList.add(new Call("Bob","9:55 AM"));
       callSMSList.add(new SMS("Kora","Thanks dude","9:57 AM"));
       callSMSList.add(new Call("Sandy","10:00 AM"));
       callSMSList.add(new Call("Kate","10:05 AM"));
       callSMSList.add(new SMS("Nick","Let's hang up","10:10 AM"));
       callSMSList.add(new Call("Roger","10:15 AM"));
       callSMSList.add(new Call("Sid","10:20 AM"));
       callSMSList.add(new Call("Kora","10:25 AM"));
       callSMSList.add(new Call("Nick","10:30 AM"));
       callSMSList.add(new SMS("Rose","Bring me some chocolates","1035:10 AM"));
       callSMSList.add(new Call("Mia","10:40 AM"));
       callSMSList.add(new Call("Scott","10:45 AM"));
       // Set items to adapter
       callSMSAdapter.setCallSMSFeed(callSMSList);
       callSMSAdapter.notifyDataSetChanged();
   }
}
 
 

As you can see in the above snippet, we have added some SMS objects in our feed. Now it’s time to design how the cell for SMS will look like. We already defined layout for calls(Check this article). So the code for SMS type layout will be –

sms_feed_layout.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="5dp"
    android:layout_margin="3dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:padding="10dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/ic_sms"
            android:layout_width="30dp"
            android:layout_height="30dp" />
        <RelativeLayout
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:textSize="18sp"
                android:textColor="#E91E63"
                android:id="@+id/senderName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:textSize="16sp"
                android:textColor="#000"
                android:layout_marginTop="2dp"
                android:layout_below="@+id/senderName"
                android:id="@+id/smsContent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:textSize="14sp"
                android:textColor="#666"
                android:layout_marginTop="2dp"
                android:layout_below="@+id/smsContent"
                android:id="@+id/smsTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>
 
 

We have changed it a little with color to differentiate it with call cell layout.

ADAPTER FOR MULTIPLE VIEWHOLDERS

Next, we will modify our adapter a little to implement multiple viewholders. After changing it will look like below

CallSMSAdapter.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
 
package com.digitstory.testapplication;
 
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
 
 
public class CallSMSAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final static int TYPE_CALL=1,TYPE_SMS=2;
    private List<Object> callSMSFeed =new ArrayList();
    // Context is not used here but may be required to
    // perform complex operations or call methods from outside
    private Context context;
 
    // Constructor
    public CallSMSAdapter(Context context){
        this.context=context;
    }
 
    public void setCallSMSFeed(List<Object> callSMSFeed){
        this.callSMSFeed = callSMSFeed;
    }
 
    // We need to override this as we need to differentiate
    // which type viewHolder to be attached
    // This is being called from onBindViewHolder() method
    @Override
    public int getItemViewType(int position) {
        if (callSMSFeed.get(position) instanceof Call) {
            return TYPE_CALL;
        } else if (callSMSFeed.get(position) instanceof SMS) {
            return TYPE_SMS;
        }
        return -1;
    }
 
    // Invoked by layout manager to replace the contents of the views
    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
        int viewType=holder.getItemViewType();
        switch (viewType){
            case TYPE_CALL:
                Call call=(Call)callSMSFeed.get(position);
                ((CallViewHolder)holder).showCallDetails(call);
                break;
            case TYPE_SMS:
                SMS sms=(SMS)callSMSFeed.get(position);
                ((SMSViewHolder)holder).showSmsDetails(sms);
                break;
        }
    }
 
    @Override
    public int getItemCount(){return callSMSFeed.size();}
 
    // Invoked by layout manager to create new views
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // Attach layout for single cell
        int layout = 0;
        RecyclerView.ViewHolder viewHolder;
        // Identify viewType returned by getItemViewType(...)
        // and return ViewHolder Accordingly
        switch (viewType){
            case TYPE_CALL:
                layout=R.layout.calls_feed_layout;
                View callsView = LayoutInflater
                        .from(parent.getContext())
                        .inflate(layout, parent, false);
                viewHolder=new CallViewHolder(callsView);
                break;
            case TYPE_SMS:
                layout=R.layout.sms_feed_layout;
                View smsView = LayoutInflater
                        .from(parent.getContext())
                        .inflate(layout, parent, false);
                viewHolder=new SMSViewHolder(smsView);
                break;
            default:
                viewHolder=null;
                break;
        }
        return viewHolder;
    }
 
    // First ViewHolder of object type Call
    // Reference to the views for each call items to display desired information
    public class CallViewHolder extends RecyclerView.ViewHolder {
 
        private TextView callerNameTextView,callTimeTextView;
 
        public CallViewHolder(View itemView) {
            super(itemView);
            // Initiate view
            callerNameTextView=(TextView)itemView.findViewById(R.id.callerName);
            callTimeTextView=(TextView)itemView.findViewById(R.id.callTime);
        }
 
        public void showCallDetails(Call call){
            // Attach values for each item
            String callerName   =call.getCallerName();
            String callTime     =call.getCallTime();
            callerNameTextView.setText(callerName);
            callTimeTextView.setText(callTime);
        }
    }
 
    // Second ViewHolder of object type SMS
    // Reference to the views for each call items to display desired information
    public class SMSViewHolder extends RecyclerView.ViewHolder {
 
        private TextView senderNameTextView,smsContentTextView, smsTimeTextView;
 
        public SMSViewHolder(View itemView) {
            super(itemView);
            // Initiate view
            senderNameTextView =(TextView)itemView.findViewById(R.id.senderName);
            smsContentTextView =(TextView)itemView.findViewById(R.id.smsContent);
            smsTimeTextView =(TextView)itemView.findViewById(R.id.smsTime);
        }
 
        public void showSmsDetails(SMS sms){
            // Attach values for each item
            String senderName   =sms.getSenderName();
            String smsContent   =sms.getSmsContent();
            String smsTime     =sms.getSmsTime();
            senderNameTextView.setText(senderName);
            smsContentTextView.setText(smsContent);
            smsTimeTextView.setText(smsTime);
        }
    }
}
 
 

Clearly, we can see their are two ViewHolders here CallViewHolder & SMSViewHolder and they are being invoked from onCreateViewHolder() method. They are identified by their viewType returned by getItemViewType(two constants : TYPE_CALL & TYPE_SMS) that sets viewType by class type. After they are attached, every cell are being decorated with information by calling showCallDetails() or showSmsDetails() from onBindViewHolder() method. onBindViewHolder() determines by calling received ViewHolder’s getItemViewType() method which we have overwritten as per our requirement (The TYPE_CALL & TYPE_SMS hack).

So, by now, we can expect you have a clear idea of RecyclerView with multiple ViewHolders. Thus we can also implement our adapter for 3,4 or many type of objects. Feel free to comment if you have any query or doubt. Share this article to inspire us.

By Abhishek Pachal

Abhishek is a developer cum blogger working more than 6 years. He loves programming especially open stack technologies. He has decent knowledge in Android development, Wordpress, MongoDB, Node.js and so on. Beside this Abhishek finds himself busy in painting, front-end designing.