Build an Android Firebase chat application Part 3

Hello, welcome to part 3 of this Firebase chat app tutorial, if you have not looked at part 1 and 2 please click the links below to go there before proceeding.

Go to Part 1

Go to Part 2

 

  • Now in this part we are going to look at how to query chat messages from Firebase between the two users. That is the current user and the user on the list whose view was clicked.

The idea is that when a user in the list is clicked, the user id will be sent to an activity that we will create called ChatMessagesActivity. This class will send and show messages.

Let’s go ahead and create a new activity by right clicking on your main package and selecting empty activity. This will generate the class with an accompanying xml layout file.

ChatMessagesActivity and layout
  • Now open the activity_chat_messages.xml and add a recyclerview that will display the users, an edittext for entering message and a send button.
chat messages layout design
chat messages layout design

The code that produces the above layout is as follows.

  • The next step is to create a model called ChatMessage and an adapter called MessagesAdapter.

We will use the adapter to populate the recyclerview with chatmessages which is nothing but a blueprint representing a message from Firebase.

So our model will have variable messages, senderId, and receiver id.

Messages on Firebase database
Messages on Firebase database

Below is the model class.

ChatMessage.class

  • Next let’s wire up the adapter to hold messages.
Chat messages adapter.
Chat messages adapter.

The Message adapter is pretty similar to the users adapter. The only difference is we override getItemViewType in order to change layouts if the current user is sending message or receiving.

We then change layouts appropriately.

These sent_message_row,xml and received_message_row.xml are layouts we create to hold single row message. They are similar except that one is appended to the left with a different message bubble color and the other on the right with another bubble color.

send message bubble
send message bubble

below is it’s xml file

received message bubble
received message bubble

  • Now we will head back to the ChatMessagesActivity and start getting data/messages from Firebase, get the views and populate the recyclerview using the adapter.

We will first initialize the view and get reference to the messages database and users in order to get the recipient name from Users db.

Always try to use a layout manager with recyclerview else you will end up with a few errors when running.

To send message to a user, we get his or her id via intent, we get the current sender id and the message then we push the message to Firebase when the send button is clicked.

The send message method is as follows.

To query messages between the two we call the following method, that makes sure to only get messages where the current user is the sender or recipient and the clicked user is the same(sender or recipient).

The populate messages method looks like this.

Now call the querymessagesBetweenThisUserAndClickedUser() method onStart and onResume.

  • To set title bar to contain recipient name, we use the id received from intent to query the users db s well to get the displayName.

 

Below is the complete code that include hiding of the keyboard when message has been sent.

ChatMessagesActivity.class

And that it basically. Run the code, start adding user and chat. 🙂

Happy coding.

About Ronny 14 Articles

Fullstack developer who loves to write about code for Android, iOS, JavaFX, Spring MVC, PHP and more.

Leave a Reply

Your email address will not be published.


*