Table of Contents

Android chat tutorial: Building a messaging UI

Android chat tutorial: Building a messaging UI

Alex Preston
Reading Time: 10 mins Building Time: 2-4 Hours

1. Intro

Despite their growing prevalence, chat and messaging apps continue to be tedious to implement. Official documentation is non-existent, while unofficial tutorials are scarce and generally outdated.

Colorful chat bubbles filled with text, images, even playable media–how do they do it? The answer is surprisingly simple: RecyclerViews, coupled with the ViewHolder pattern.

This tutorial walks you through the steps required to build a quality messaging UI.

This guide looks at:

  1. Creating the Messaging UI
  2. Creating an Adapter for the RecyclerView

  3. Creating the Channel Activity

This tutorial was built using:

  1. Android Studio: 4.0.2

  2. Android Version: 10 API 29

  3. Sendbird Core SDK: 3.0.148

2. Creating the Messaging UI

Creating Activity UI

In this tutorial, we’ll create a dedicated activity to host our messages. For this activity, we will need a xml. So first thing we will do is create activity_channel.xml.

The primary component in this activity is a RecyclerView which will fill up most of the screen. You’ll note that there is also an AppBarLayout with a ToolBar, we won’t do much with this in this tutorial, but generally you can add a “Back” button, a “About” button, or info about the channel here. The last thing we will want to add is a RelativeLayout which will hold the EditText, and “Send” button respectively. These will be how your users will input text, and send it. In this RelativeLayout you can also add icons to support adding videos/images.

Creating a list item for each message

Use a separate XML file to define the layout of each item (i.e. message) for the RecyclerView. It is common practice for each message to contain something like the above. (I.e the sender’s name, their profile image, and a timestamp.)Since the chat bubble’s alignment typically indicates the message’s owner, it could be redundant to display the sender’s profile image and name for every message. In the above image, for example, the right-aligned chat bubble indicates that it belongs to the sender, so we need not include the image or name. We need to create two different xmls.

The first .xml will be for messages that are from the “Me” perspective, or messages sent by the current users. For this we have opted to have a TextView for the actual message, this is wrapped in a Cardview. Surrounding this TextView are other TextViews for things like the Date.

The second .xml will be for messages that are from the “Other” perspective, so any message not from the current user. This UI will be similar to the “Me” UI, however it is left aligned, and contains information about the “Other” user. Things like an ImageView for the profile image, and a TextField for the user’s name. Other than that, the views are relatively similar.

3. Creating an Adapter for the RecyclerView

Now that we have created the UI for chat, we will need a way to connect the messages with the UI. We will do this with a RecyclerView.Adapter.

This adapter will accomplish three things:

  • Store a list of Messages.
  • Determine whether a message is sent or received.
  • Inflate the appropriate layout within the RecyclerView.

But before venturing any further, we need a list of messages!

Engineering a backend for real-time messaging is, however, beyond the scope of this tutorial. We’ll therefore proceed with the models in Sendbird’s chat SDK. It roughly assumes the following structure:

Generic Message and User Models

class Message {
  String message;
  User sender;
  long createdAt;
}

class User {
  String nickname;
  String profileUrl;
}

 

Since it is common to design messaging implementations in this manner, you will hopefully be able to follow this tutorial with minimal changes to your code. Now, let’s create an adapter and name it MessageListAdapter. This will hold a list of Messages that will be displayed within a RecyclerView.

By Default, an adapter requires at least one Viewholder, this is a layout that can be inflated and bound by the objects it holds. In our case we will start with just two: a SendMessageHolder, and a ReceivedMessageHolder. As you add more types of messages you can add more holders. But this tutorial focuses on User Messages, or text based messages.

In order to accomplish this we will have two private inner classes inside of our MessageListAdapter.

Each ViewHolder holds member views that can be bound to particular information contained in a message. For example, TextView messageText binds to a message’s content, while nameText binds to the name of a message’s sender. Antonio Leiva suggests that we implement a bind(object) method within the ViewHolder class. This gives view binding to the ViewHolder class rather than to onBindViewHolder. It therefore produces cleaner code amidst multiple ViewHolders and ViewTypes. It also allows us to easily add OnClickListeners, if necessary.

Once you complete ViewHolder, turn back to the adapter and override the necessary methods to

  1. Obtain a message from MessageList
  2. Determine whether it is a sent message or a received message
  3. Inflate the appropriate layout for the ViewHolder
  4. Pass the message to the ViewHolder for binding

Implementing this process is standard for most types of adapters, and pretty self-explanatory; therefore, we’ll show the code for the full adapter without further explanation.

We’ve just completed the adapter. We can now display a list of messages, both sent and received, in the chat bubbles that we defined earlier.

4. Creating the Channel Activity

We’ve created all the components, and now we need to initialize them inside our Activity. Create an Activity called MessageListActivity. In your onCreate Instantiate a RecyclerView and a MessageListAdapter with a list of messages, and voila! You’ve just created your own messaging UI.

5. Conclusion

You can build more advanced features like “image preview,” animated GIFs within chat bubbles, and others. See examples of advanced chat UI at Sendbird’s open source sample UI app! They build upon the use of RecyclerViews and adapters that we covered in this tutorial, and will help you create a production-level chat app with diverse features.