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.

Recycler View with Multiple View Types
Recycler View with Multiple View Types

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:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

6 thoughts on “RecyclerView with Multiple View Types – Chat App Example

  1. I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks

  2. Thanks for one’s marvelous posting! I truly enjoyed reading it, you might be a great author.
    I will be sure to bookmark your blog and definitely will come back in the future.
    I want to encourage you continue your great work, have a nice weekend!

  3. I know this site offers quality based content and
    extra data, is there any other web page which provides these things in quality?

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: