Android RecyclerView with 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

packagecom.digitstory.testapplication;

publicclassSMS{

privateStringsenderName,smsContent,smsTime;

publicSMS(StringsenderName,StringsmsContent,StringsmsTime){

this.senderName=senderName;

this.smsContent=smsContent;

this.smsTime=smsTime;

}

publicStringgetSenderName(){

returnsenderName;

}

publicStringgetSmsContent(){

returnsmsContent;

}

publicStringgetSmsTime(){

returnsmsTime;

}

}

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 –

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

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.

Abhishek is a developer cum blogger working more than 4 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.

Follow Abhishek

Previous

Android RecyclerView with example

Next

Featured Post

ExoPlayer is an Android Application level Media Player by Google. It is used for playing media(both audio and video) from local or remote. In this article we will discuss how to play or stream remo ... Read More