RecyclerView with Multiple View Types – Chat App Example

As we all know that RecyclerView is a UI component to show lists in Android. In this tutorial, you will learn, How to create a RecyclerView with Multiple View Types in Java Android. It’s is a chat App example. In this example, 2 types of views (text message in and out) are considered.

Following is the step by step guide to populating multiple views in RecyclerView. But if you are only looking for a Sample Custom Adapter, you can find it here, Java Adapter & Kotlin Adapter.

1. Add RecyclerView Dependency in Your App Level build.gradle

implementation "androidx.recyclerview:recyclerview:1.0.0" 
// or if you are using support library instead of Androidx then 
// implementation 'com.android.support:recyclerview-v7:28.0.0'

2. Incoming Message Layout

Create a Layout XML file with the name “item_text_in” and copy the following code in it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/main_layout">

    <RelativeLayout
        android:id="@+id/message_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:padding="10dp"
        android:background="@android:color/white">

        <TextView
            android:id="@+id/message_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="120dp"
            android:maxWidth="250dp"
            android:layout_below="@+id/username_text"
            android:layout_alignParentLeft="true"
            android:textSize="16sp"
            android:textColor="@android:color/black"
            android:text="Hi" />

        <TextView
            android:id="@+id/date_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/message_text"
            android:layout_below="@+id/message_text"
            android:textSize="11sp"
            android:textColor="#b3b3b3"
            tools:text="11:34" />

    </RelativeLayout>
</RelativeLayout>

3. Outgoing Message Layout

Create a Layout XML file with the name “item_text_out” and copy the following code in it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/main_layout">

    <RelativeLayout
        android:id="@+id/message_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:padding="10dp"
        android:background="#5089fa"
        android:layout_alignParentRight="true">

        <TextView
            android:id="@+id/message_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="120dp"
            android:maxWidth="250dp"
            android:layout_below="@+id/username_text"
            android:layout_alignParentLeft="true"
            android:textSize="16sp"
            android:textColor="@android:color/white"
            android:text="Hi" />

        <TextView
            android:id="@+id/date_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/message_text"
            android:layout_below="@+id/message_text"
            android:textSize="11sp"
            android:textColor="@android:color/white"
            tools:text="11:34" />

    </RelativeLayout>
</RelativeLayout>

4. Message Model Class

Create a Java class with the name “MessageModel” and copy the following code in it.

import java.util.Date;

public class MessageModel {

    public String message;
    public int messageType;
    public Date messageTime = new Date();
    // Constructor
    public MessageModel(String message, int messageType) {
        this.message = message;
        this.messageType = messageType;
    }
}

5. Custom Adapter Class

Create a Java class with the name “CustomAdapter” and copy the following code in it.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.text.DateFormat;
import java.util.ArrayList;
import androidx.recyclerview.widget.RecyclerView;

public class CustomAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final Context context;
    ArrayList<MessageModel> list;
    public static final int MESSAGE_TYPE_IN = 1;
    public static final int MESSAGE_TYPE_OUT = 2;

    public CustomAdapter(Context context, ArrayList<MessageModel> list) { // you can pass other parameters in constructor
        this.context = context;
        this.list = list;
    }

    private class MessageInViewHolder extends RecyclerView.ViewHolder {

        TextView messageTV,dateTV;
        MessageInViewHolder(final View itemView) {
            super(itemView);
            messageTV = itemView.findViewById(R.id.message_text);
            dateTV = itemView.findViewById(R.id.date_text);
        }
        void bind(int position) {
            MessageModel messageModel = list.get(position);
            messageTV.setText(messageModel.message);
            dateTV.setText(DateFormat.getTimeInstance(DateFormat.SHORT).format(messageModel.messageTime));
        }
    }

    private class MessageOutViewHolder extends RecyclerView.ViewHolder {

        TextView messageTV,dateTV;
        MessageOutViewHolder(final View itemView) {
            super(itemView);
            messageTV = itemView.findViewById(R.id.message_text);
            dateTV = itemView.findViewById(R.id.date_text);
        }
        void bind(int position) {
            MessageModel messageModel = list.get(position);
            messageTV.setText(messageModel.message);
            dateTV.setText(DateFormat.getTimeInstance(DateFormat.SHORT).format(messageModel.messageTime));
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == MESSAGE_TYPE_IN) {
            return new MessageInViewHolder(LayoutInflater.from(context).inflate(R.layout.item_text_in, parent, false));
        }
        return new MessageOutViewHolder(LayoutInflater.from(context).inflate(R.layout.item_text_out, parent, false));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (list.get(position).messageType == MESSAGE_TYPE_IN) {
            ((MessageInViewHolder) holder).bind(position);
        } else {
            ((MessageOutViewHolder) holder).bind(position);
        }
    }

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

    @Override
    public int getItemViewType(int position) {
        return list.get(position).messageType;
    }
}

6. Add RecyclerView in Activity’s Layout File

Activity Layout File “activity_main.xml“

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    >

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:listitem="@layout/item_text_in"
        ></androidx.recyclerview.widget.RecyclerView>

</RelativeLayout>

7. Activity Java Class

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

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

        // Populate dummy messages in List, you can implement your code here
        ArrayList<MessageModel> messagesList = new ArrayList<>();
        for (int i=0;i<10;i++) {
                messagesList.add(new MessageModel("Hi", i % 2 == 0 ? CustomAdapter.MESSAGE_TYPE_IN : CustomAdapter.MESSAGE_TYPE_OUT));
        }

        CustomAdapter adapter = new CustomAdapter(this, messagesList);

        recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);

    }
}

That’s it. This is how to create a RecyclerView with Multiple View Types.

If you have any questions according to your requirements, feel free to ask them in the comments section.

Enjoy 🙂

Don’t forget to visit our Coding Articles & Tutorials Knowledge Base for other helping code snippets.

Please share this post: