Android Chat App Example Using RecyclerView

This article will show you how to use RecyclerView to implement an android chat application. You can read the article Android RecyclerView Example to learn more about RecyclerView. You should read Android Nine Patch Image Example to learn how to make the chat bubble images stretch correctly.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/tYVQ-QCuiXc

1. Main Layout Xml File.

1. This layout file contains the RecyclerView, the input text box, and the send button.
2. activity_chat_app.xml

   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@android:color/holo_blue_bright">
   
       <android.support.v7.widget.RecyclerView
           android:id="@+id/chat_recycler_view"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   
       <LinearLayout
           android:orientation="horizontal"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
   
           <EditText
               android:id="@+id/chat_input_msg"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:hint="Input message."
               android:layout_weight="1"
               android:maxLines="2"/>
   
           <Button
               android:id="@+id/chat_send_msg"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Send"
               android:textAllCaps="false"/>
   
       </LinearLayout>
   
   </LinearLayout>

2. RecyclerView Item Layout Xml File.

1. This layout XML file defines the RecyclerView‘s item view, it contains a left LinearLayout and a right LinearLayout object which contains the receive and sent message TextView object.
2. activity_chat_app_item_view.xml

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:padding="1dp">
   
       <LinearLayout
           android:id="@+id/chat_left_msg_layout"
           android:orientation="vertical"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="left"
           android:background="@drawable/chat_bubble_left">
   
           <TextView
               android:id="@+id/chat_left_msg_text_view"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_margin="10dp"/>
   
       </LinearLayout>
   
       <LinearLayout
           android:id="@+id/chat_right_msg_layout"
           android:orientation="vertical"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="right"
           android:background="@drawable/chat_bubble_right">
   
           <TextView
               android:id="@+id/chat_right_msg_text_view"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_margin="10dp"/>
   
       </LinearLayout>
   
   </LinearLayout>

3. Chat Activity Java File.

1. ChatAppActivity.java

   package com.dev2qa.example.chat_app;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.support.v7.widget.LinearLayoutManager;
   import android.support.v7.widget.RecyclerView;
   import android.text.TextUtils;
   import android.view.View;
   import android.widget.Button;
   import android.widget.EditText;
   
   import com.dev2qa.example.R;
   
   import java.util.ArrayList;
   import java.util.List;
   
   public class ChatAppActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_chat_app);
   
           setTitle("dev2qa.com - Android Chat App Example");
   
           // Get RecyclerView object.
           final RecyclerView msgRecyclerView = (RecyclerView)findViewById(R.id.chat_recycler_view);
   
           // Set RecyclerView layout manager.
           LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
           msgRecyclerView.setLayoutManager(linearLayoutManager);
   
           // Create the initial data list.
           final List<ChatAppMsgDTO> msgDtoList = new ArrayList<ChatAppMsgDTO>();
           ChatAppMsgDTO msgDto = new ChatAppMsgDTO(ChatAppMsgDTO.MSG_TYPE_RECEIVED, "hello");
           msgDtoList.add(msgDto);
   
           // Create the data adapter with above data list.
           final ChatAppMsgAdapter chatAppMsgAdapter = new ChatAppMsgAdapter(msgDtoList);
   
           // Set data adapter to RecyclerView.
           msgRecyclerView.setAdapter(chatAppMsgAdapter);
   
           final EditText msgInputText = (EditText)findViewById(R.id.chat_input_msg);
   
           Button msgSendButton = (Button)findViewById(R.id.chat_send_msg);
   
           msgSendButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                   String msgContent = msgInputText.getText().toString();
                   if(!TextUtils.isEmpty(msgContent))
                   {
                       // Add a new sent message to the list.
                       ChatAppMsgDTO msgDto = new ChatAppMsgDTO(ChatAppMsgDTO.MSG_TYPE_SENT, msgContent);
                       msgDtoList.add(msgDto);
   
                       int newMsgPosition = msgDtoList.size() - 1;
   
                       // Notify recycler view insert one new data.
                       chatAppMsgAdapter.notifyItemInserted(newMsgPosition);
   
                       // Scroll RecyclerView to the last message.
                       msgRecyclerView.scrollToPosition(newMsgPosition);
   
                       // Empty the input edit text box.
                       msgInputText.setText("");
                   }
               }
           });
       }
   }

4. RecyclerView Adapter Java File.

1. ChatAppMsgAdapter.java

   package com.dev2qa.example.chat_app;
   
   import android.support.v7.widget.RecyclerView;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.view.ViewGroup;
   import android.widget.LinearLayout;
   
   import com.dev2qa.example.R;
   
   import java.util.ArrayList;
   import java.util.List;
   
   public class ChatAppMsgAdapter extends RecyclerView.Adapter<ChatAppMsgViewHolder> {
   
       private List<ChatAppMsgDTO> msgDtoList = null;
   
       public ChatAppMsgAdapter(List<ChatAppMsgDTO> msgDtoList) {
           this.msgDtoList = msgDtoList;
       }
   
       @Override
       public void onBindViewHolder(ChatAppMsgViewHolder holder, int position) {
           ChatAppMsgDTO msgDto = this.msgDtoList.get(position);
           // If the message is a received message.
           if(msgDto.MSG_TYPE_RECEIVED.equals(msgDto.getMsgType()))
           {
               // Show received message in left linearlayout.
               holder.leftMsgLayout.setVisibility(LinearLayout.VISIBLE);
               holder.leftMsgTextView.setText(msgDto.getMsgContent());
               // Remove left linearlayout.The value should be GONE, can not be INVISIBLE
               // Otherwise each iteview's distance is too big.
               holder.rightMsgLayout.setVisibility(LinearLayout.GONE);
           }
           // If the message is a sent message.
           else if(msgDto.MSG_TYPE_SENT.equals(msgDto.getMsgType()))
           {
               // Show sent message in right linearlayout.
               holder.rightMsgLayout.setVisibility(LinearLayout.VISIBLE);
               holder.rightMsgTextView.setText(msgDto.getMsgContent());
               // Remove left linearlayout.The value should be GONE, can not be INVISIBLE
               // Otherwise each iteview's distance is too big.
               holder.leftMsgLayout.setVisibility(LinearLayout.GONE);
           }
       }
   
       @Override
       public ChatAppMsgViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
           View view = layoutInflater.inflate(R.layout.activity_chat_app_item_view, parent, false);
           return new ChatAppMsgViewHolder(view);
       }
   
       @Override
       public int getItemCount() {
           if(msgDtoList==null)
           {
               msgDtoList = new ArrayList<ChatAppMsgDTO>();
           }
           return msgDtoList.size();
       }
   }

5. Chat RecyclerView View Holder Java File.

1. ChatAppMsgViewHolder.java

   package com.dev2qa.example.chat_app;
   
   import android.support.v7.widget.RecyclerView;
   import android.view.View;
   import android.widget.LinearLayout;
   import android.widget.TextView;
   
   import com.dev2qa.example.R;
   
   public class ChatAppMsgViewHolder extends RecyclerView.ViewHolder {
   
       LinearLayout leftMsgLayout;
   
       LinearLayout rightMsgLayout;
   
       TextView leftMsgTextView;
   
       TextView rightMsgTextView;
   
       public ChatAppMsgViewHolder(View itemView) {
           super(itemView);
   
           if(itemView!=null) {
               leftMsgLayout = (LinearLayout) itemView.findViewById(R.id.chat_left_msg_layout);
               rightMsgLayout = (LinearLayout) itemView.findViewById(R.id.chat_right_msg_layout);
               leftMsgTextView = (TextView) itemView.findViewById(R.id.chat_left_msg_text_view);
               rightMsgTextView = (TextView) itemView.findViewById(R.id.chat_right_msg_text_view);
           }
       }
   }

6. Chat Message DTO Java File.

1. ChatAppMsgDTO.java

   package com.dev2qa.example.chat_app;
   
   /**
    * This class represents a chat app message DTO.
    */
   
   public class ChatAppMsgDTO {
   
       public final static String MSG_TYPE_SENT = "MSG_TYPE_SENT";
   
       public final static String MSG_TYPE_RECEIVED = "MSG_TYPE_RECEIVED";
   
       // Message content.
       private String msgContent;
   
       // Message type.
       private String msgType;
   
       public ChatAppMsgDTO(String msgType, String msgContent) {
           this.msgType = msgType;
           this.msgContent = msgContent;
       }
   
       public String getMsgContent() {
           return msgContent;
       }
   
       public void setMsgContent(String msgContent) {
           this.msgContent = msgContent;
       }
   
       public String getMsgType() {
           return msgType;
       }
   
       public void setMsgType(String msgType) {
           this.msgType = msgType;
       }
   }