Once the exclusive realm of large tech companies, messaging apps are becoming more ubiquitous because of the rise of chat API. This tutorial will enable you to create a messaging app from scratch, with only a few hundred lines of client-side code, and without the need for a server or even registration.
1. Import dependencies
For this tutorial, we will be using the v7 AppCompat, Design Support, Constraint Layout, and Glide libraries, as well as the SendBird Android SDK.
Add these lines to your app-level
2. Create a sign-in screen
In order to use the SendBird SDK, you must specify a username and nickname. You do not need a separate registration process as unknown usernames automatically create a new user. Your nickname is displayed beside each message you send.
Create an XML file with two TextInputEditTexts and a login button.
When the button is pressed, we will use these fields to log in to the SendBird servers. First, initialize the SDK by calling
SendBird.init(), passing in the APP ID provided in the code below. Then, connect with
SendBird.connect() and update the user’s nickname with
3. Implement a messaging UI
Next, we will create a new Activity called
ChatActivity. This will be the main screen, and contain chat bubbles as well as a chatbox where you can type and send messages. Create the activity as well as a corresponding XML file,
We will have to implement several XML files for the layout. This part is covered in depth in another blog post, Building a messaging UI – reference the link for more detailed descriptions. To summarize, you need three layouts: (1) the main screen with a chatbox and a RecyclerView to display messages, (2) a layout for received messages, and (3) a layout for sent messages. A vertical RecyclerView will be the container for a list of messages. Each message will be encased in a colored background drawable, making a chat bubble.
4. Create an Adapter for the RecyclerView
To bind these XML components to actual data, we must create an Adapter for the RecyclerView. First, create a nested class within
ChatAdapter, which should subclass
RecyclerView.Adapter. This adapter will hold two types of ViewHolders: one for received messages, and one for sent messages.
Utils here is a convenience class that contains methods for formatting timestamps into readable formats and rendering images from URLs. You can view the whole code here. Create two classes nested within
Next, we will implement methods within the adapter to fetch messages from the server and store them in an ArrayList.
Finally, we will override classes in RecyclerView.Adapter to bind the XML files we wrote earlier to each of our fetched messages.
View the full code for ChatAdapter here.
5. Initialize the RecyclerView with ChatAdapter
Using the SendBird methods
channel.enter(), we will enter a channel where we can talk to others. Unlike a ListView, a RecyclerView requires a LayoutManager in order to initialize.
mLayoutManager.reverse() sets the first item at the bottom of the RecyclerView so that the newest messages are shown first when the Activity is opened.
6. Register a Channel Handler in ChatActivity
The last step is to register a Channel Handler, which automatically receives all incoming messages from the SendBird servers. When the
onMessageReceived callback is called, invoke
adapter.appendMessage() to display a new message at the bottom of the RecyclerView.
And that’s it! Run the app on two devices (maybe one emulator and one actual device), log in with different usernames, and start chatting! You should see messages arriving on each device nearly instantly. If you are unsure about certain parts, reference the full source code available on GitHub.
If you want to take this app a step further, try out SendBird’s open-source sample Android app. Constructed using the logic covered in this tutorial, it enables advanced features such as sending images, animated GIFs, and files. It also displays typing indicators, user lists, and much more, and should be a very useful reference for anyone planning to release a production chat app.