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;
        }
    }

9 thoughts on “Android Chat App Example Using RecyclerView”

  1. All Works Fine. But i need to know how to retrieve these chats after app re-opens. Can we use SharedPreferences for that ? Will you please share me with those code for retrieving the chats.

  2. it is running perfectly,
    but I wanna send a sticker
    so how can I do that, I have searched a lot but did not get something good

  3. how to store chat on local device ..so that it can be loaded when app is restarted…
    how to make chat bubbles select able like whatsapp …long press for copy and delete

    1. 1. To store chat on local device, please refer below articles.

      http://www.dev2qa.com/android-read-write-internal-storage-file-example/

      http://www.dev2qa.com/android-read-write-external-storage-file-example/

      http://www.dev2qa.com/android-shared-preferences-example/

      If you need to store the chat message in database like sqlite,

      please read below article.

      http://www.dev2qa.com/android-sqlite-database-introduction/

      http://www.dev2qa.com/android-sqlite-crud-operations-examples/

      http://www.dev2qa.com/how-to-write-reusable-code-for-android-sqlite-database/

      http://www.dev2qa.com/how-to-show-data-from-sqlite-database-in-android-listview/

      2. If you want the chat bubbles can be editable, you can add

      onTouchListener or onClickListener to the Linearlayout

      component in activity_chat_app_item_view.xml file.

      Then show a popup menu when user touch or click the bubble.

Leave a Comment

Your email address will not be published.

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

Clicky