How to Implement Chat Functionality in Social Media Android App?

This is the Part 14 of "Build a Social Media App on Android Studio" tutorial, and we are going to cover the following functionalities in this article:

• We are going to Create a Layout for chat & Send Messages in Chat.
• A user can send either a Message or an Image.
• A user can send an image either using a camera or gallery.
• Firstly a request for permission will be asked to send an image using a gallery or after clicking the image using the camera.
• If permission is given then the user can send the image, or it will again request for asking permission.

Step By Step Implementation

Step 1: Create two new layout resource files and name them row_chat_left and row_chat_right

Working with the row_chat_left.xml file. The received message will be on the left side. Similarly, Working with the row_chat_right.xml file. The message sends to the user will be on the right side. Below is the code for the row_chat_left.xml file and row_chat_right.xml file.

 
Step 2: Working with the activity_chat.xml file 

Here In the RecyclerView,we will be showing all the messages. In the TextView user will type the message and using the send button user will send the message. Below is the code for the activity_chat.xml file. 

 
Step 3: Working with the row_chatlist.xml file

Create another layout resource file and name the file as row_chatlist. Below is the code for the row_chatlist.xml file. 

 
Step 4: Working with the ModelChat.java file 

Created this class to initialize the key so that we can retrieve the value of the key later. 

 
Step 5: Working with the AdpaterChat.java file

Create a new java class and name the class as AdpaterChat. Below is the code for the AdpaterChat.java file. 

 
Step 6: Working with the ChatActivity.java file

We are Reading the user message from "Chats" Node in Firebase. Every time data changes this data will change accordingly 

chatList=new ArrayList<>();
DatabaseReference dbref= FirebaseDatabase.getInstance().getReference().child("Chats");

Loading the Data setting data value using adapter chat 

ModelChat modelChat=dataSnapshot1.getValue(ModelChat.class);
 if(modelChat.getSender().equals(myuid)&&
 modelChat.getReceiver().equals(uid)||
 modelChat.getReceiver().equals(myuid)
 && modelChat.getSender().equals(uid)){
 chatList.add(modelChat);//add the chat in chatlist
 }
 adapterChat=new AdapterChat(ChatActivity.this,chatList,image);
 adapterChat.notifyDataSetChanged();
 recyclerView.setAdapter(adapterChat);

Sending Messages in Chat Reference node value. Here is how we are saving data in the Firebase Realtime database 

DatabaseReference databaseReference= FirebaseDatabase.getInstance().getReference();
 String timestamp=String.valueOf(System.currentTimeMillis());
 HashMap<String,Object> hashMap=new HashMap<>();
 hashMap.put("sender",myuid);
 hashMap.put("receiver",uid);
 hashMap.put("message",message);
 hashMap.put("timestamp",timestamp);
 hashMap.put("dilihat",false);
 hashMap.put("type","text");
 databaseReference.child("Chats").push().setValue(hashMap);

Below is the code for the ChatActivity.java file. 

 
Output: 

Showing All Chat in ChatList Fragment

Step 1: Working with the ModelChatlist.xml file

Getting the id of users to whom we have sent messages. 

 
Step 2: Working with the AdapterChatList.java file

Showing the users and the last message sent in the chat. 

 
Step 3: Working with the fragment_chatlist.xml file

Showing all the users using the recycler view. 

 
Step 4: Working with the ChatlistFragment.java file

Here we are showing all the users to whom we have sent messages. This is how we will get the last message of the current user. If the message type is images then simply set the last message as "Sent a photo". 

if(chat.getReceiver().equals(firebaseUser.getUid())&&
 chat.getSender().equals(uid)||
 chat.getReceiver().equals(uid)&&
 chat.getSender().equals(firebaseUser.getUid())){
 if(chat.getType().equals("images")){
 lastmess="Sent a Photo";
 }
 else {
 lastmess = chat.getMessage();
 }
 }

Below is the code for the ChatlistFragment.java file. 

 
Output: 

Note: Please Add drawable items before running the Application

Below is the file structure after performing these operations:

👁 Image
👁 Image