Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
How to build an Android chat app using a chat API
Share

How to build an Android chat app using a chat API

TERRY
Share
Jun 29, 2017

Chat tutorial using a chat API

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.

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.

...waiting for Gist...

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

...waiting for Gist...

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

...waiting for Gist...

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

...waiting for Gist...

(2) item_message_sent.xml

Screen Shot 2017-06-27 at 4.11.11 PM

...waiting for Gist...

(3) item_message_received.xml

Screen Shot 2017-06-27 at 4.10.53 PM

...waiting for Gist...

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

...waiting for Gist...

Next, we will implement methods within the adapter to fetch messages from the server and store them in an ArrayList.

...waiting for Gist...

Finally, we will override classes in RecyclerView.Adapter to bind the XML files we wrote earlier to each of our fetched messages.

...waiting for Gist...

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.

...waiting for Gist...

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.

...waiting for Gist...

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.

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
ROMMEL SUNGA
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
HARRY KIM
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
CHRIS HEO
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us