Press enter to see results or esc to cancel.

How to build an Android chat app

How to build an Android chat app using a chat API

Chat tutorial using a chat API

Messaging apps, once the exclusive realm of large tech companies, are becoming more ubiquitous due to the rise of chat APIs. 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.

This guide will be carried out in Android Studio. It uses the SendBird Android SDK, which provides methods to easily send, fetch, and receive messages in real-time. The complete app is on GitHub.

 

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 build.gradle file.

In order to connect to the internet, add the INTERNET permission to your AndroidManifest.xml file.

2. Create a sign-in screen

Screenshot_1498545688

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.

activity_login.xml

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 SendBird.updateCurrentUserInfo().

LoginActivity.java

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, activity_chat.xml.

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.

(1) activity_chat.xml

(2) item_message_sent.xml

Screen Shot 2017-06-27 at 4.11.11 PM

rounded_rectangle_blue.xml

 

(3) item_message_received.xml

Screen Shot 2017-06-27 at 4.10.53 PM

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 ChatActivity called 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 ChatAdapter.

ChatActivity.java

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 OpenChannel.getChannel() and 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.

Comments

Leave a Comment