How to build an Android chat app using a chat API, Part 2: Channel List

This tutorial teaches you another crucial step for building a chat and messaging application in Android. After following these steps, a user will be able to choose a channel to chat in from a list of either open or group channels. Read here to learn more about how to build an Android chat app.

'Helvetica Neue', Helvetica, Arial, sans-serif

SendBird Blog

<h2>1.0 Introduction</h2>
<p>In our earlier <a href="https://blog.sendbird.com/how-to-build-an-android-chat-app-using-a-chat-api">tutorial</a>, we covered how to create a basic chat application that allowed you to login to SendBird with a user and to chat in a preset channel. For a real application, we would also need to implement a way to join other channels. One way to allow users to join channels is to implement a channel list and enable users to join a channel of their choice.</p>

<p>&nbsp;</p>
<p><strong>In this tutorial we will implement the following:</strong></p>
<ul>
<li><strong>LoginActivity</strong> - Login screen for users to login and set their nickname</li>
<li><strong>MainMenuActivity</strong> - Main Menu to allow users to join a group channel or an open channel</li>
<li><strong>ChannelListActivity </strong>- Channel List to display open/group channels that users can join</li>
<li><strong>ChatActivity</strong> - Chat screen that allows users to chat in their selected channel</li>
</ul>
<p>&nbsp;&nbsp;</p>
<div><img src="https://lh5.googleusercontent.com/-14AN-xHHpo-3YKHKXRz2xMzQgKhOVMmxmOw5Ig4j1m0RtbIfmq3NlbN3KJBzrAORyx4hYhAxIC1i7aevUYQEr85zoohK6vVyAJ7QPdL4ZsJqCL-JJWCogyKolPxLWwR-O4fTa6h" alt="sendbird-android-build-chat-API-flow-choose-channels"></div>
<p>&nbsp;</p>
<p><strong>This tutorial was built using:</strong></p>
<p>Android Studio 3.3</p>
<p>Android Version 9, API 28</p>
<p>The <a href="https://github.com/smilefam/AndroidChannelListTutorial">source code</a> for this tutorial can be found on GitHub.</p>
<p>&nbsp;</p>
<h2>2.0 LoginActivity Layout</h2>
<p><strong>Login Screen</strong></p>
<p>&nbsp;</p>
<div><img src="https://lh5.googleusercontent.com/HG4YYLvpNYy3bMB2gmqMk9gNZ-YvzWpQS-bOZ1Wo_qnaXp6NpY0sMqLlXfO2TQBmYoPmtj4ULgeRLatACbha1y721Fgf_QDYPYK4PAvhLi4gFLNjdCOlG--N_stYFzRmb_sOjn2o" alt="sendbird-android-build-chat-API-login-screen" width="435" style="width: 435px; display: block; margin: 0px auto;"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>res/layout/activity_login.xml</strong></p>
<script src="https://gist.github.com/rommel-sunga/5bb8dc59de513060dbdb17a16b503785.js"></script>
<p>&nbsp;</p>
<h3>2.1 LoginActivity Class</h3>
<p>Create a new activity called <strong>LoginActivity.</strong> It is responsible for logging in your user to the SendBird application.</p>
<p>&nbsp;</p>
<p>The process to create this LoginActivity is nearly the same as our first tutorial. However, instead of jumping straight into a chat room after login, the user goes through a different flow containing the chat’s main menu, where users can choose to view either the open channel or group channel list.</p>
<p>&nbsp;</p>
<p>After creating the LoginActivity class, add an<strong> onCreate()</strong> method. It is responsible for setting up the login page.</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechatsb/LoginActivity.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/966b55c44c2c46c7b1b3d34a3b2948a5.js"></script>
<p>&nbsp;</p>
<p>The <strong>connectToSendBird() </strong>method launches the <strong>MainMenuActivity.</strong> It displays two options: (1) display the Group Channel List or (2) display the Open Channel List.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/ad6601e2607df5f41f94f2546693c013.js"></script>
<p>&nbsp;</p>
<p>Finally, the <strong>updateCurrentUserInfo()</strong> method is responsible for updating the current user’s nickname. This nickname is displayed in chat rooms on SendBird.</p>
<script src="https://gist.github.com/rommel-sunga/b6c4709c522d5a5f82abf6d1a0de06c0.js"></script>
<p>&nbsp;</p>
<p>By default, <strong>LoginActivity</strong> connects to SendBird’s US-1 Sample Application. If you would like to modify the application, so it connects to your SendBird application, then simply change the APP_ID in LoginActivity to the APP_ID corresponding to your application. If you don’t already have an application you can sign up for one <a href="https://dashboard.sendbird.com/auth/signup">here</a>.</p>
<script src="https://gist.github.com/rommel-sunga/8c5f0ce0957fb3e11d325229a8e1e77d.js"></script>
<p>&nbsp;</p>
<p><strong>Channel Types</strong></p>
<p>Find more information about the group and open channel types here:</p>
<p><a href="https://help.sendbird.com/hc/en-us/articles/115002327727-What-is-the-difference-between-an-Open-Channel-and-a-Group-Channel-">https://help.sendbird.com/hc/en-us/articles/115002327727-What-is-the-difference-between-an-Open-Channel-and-a-Group-Channel-</a></p>
<p>&nbsp;</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 305px;">Open Channel</td>
<td style="width: 305px;">Group Channel</td>
</tr>
<tr>
<td style="width: 305px;">An <strong>Open Channel</strong> is a public channel that anyone can freely enter and exit.</td>
<td style="width: 305px;">&nbsp;A <strong>Group Channel</strong> is a private chat that is enterable by invitation only.</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>Complete the contents of LoginActivity.java</p>
<p><strong>java/com.example.simplechatsb/LoginActivity.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/10c5706297b417dcfbeb63813d7904c9.js"></script>
<p>&nbsp;</p>
<h2>3.0 MainMenuActivity Layout&nbsp;</h2>
<p>MainMenuActivity is a sample layout with a LinearLayout containing two TextViews. Users can click on them to open the group channel and open channel lists.</p>
<p>&nbsp;</p>
<div><img src="https://lh5.googleusercontent.com/44Ij1Cz6uAFXMwrNIb0TWnCypaU0t61OMk7Wk3eupfcSxS9Z8eGnZuYlVn4WQby2ZOM4mE0Bov77UQtZtqBdho0TO9UJ-WFOllF0TpTZmAWr3VexzeW6G5iAmqDkpLMBaSAMcHzk" alt="sendbird-android-build-chat-API-group-and-open-channel-list" width="429" style="width: 429px; display: block; margin: 0px auto;"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>res/layout/activity_main_menu.xml</strong></p>
<script src="https://gist.github.com/rommel-sunga/0ca8a224efd0252eb43b8c2a66437523.js"></script>
<p>&nbsp;</p>
<h3>3.1 MainMenuActivity Class</h3>
<p>&nbsp;</p>
<p>The main menu activity only consists of an <strong>onCreate()</strong> method. This method sets the content view of the layout defined in the XML layout file above. It also creates two OnClickListeners. These open the open or group channel list activity. The intent contains the channelType because<strong>ChannelListActivity</strong> uses it to determine whether to open a group or open channel list.</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechatsb/MainMenuActivity.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/d818880694dadfae3033d97eec55d713.js"></script>
<p>&nbsp;</p>
<h2>4.0 Constants Class</h2>
<p>This is a small constants file with variables that are used in the channel list activity, chat activity and main menu activity.</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechatsb/Constants.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/6d27a2e829caa4cf2c2d7a682f18f3dd.js"></script>
<p>&nbsp;</p>
<h2>5.0 ChannelListActivity Layout</h2>
<p>This LinearLayout shows a single channel in the list. In the horizontal LinearLayout there’s a TextView. It corresponds to the channel URL and a button that users tap to join the channel.</p>
<p>&nbsp;</p>
<p><strong>Group Channel Item</strong></p>
<p>&nbsp;</p>
<div><img src="https://lh3.googleusercontent.com/IblVqym9H-KQeylpwMsGPnqZQcCvhC-tajphoJysEzJxu4QJMp5Z-FgypaNXA9rG5XDpSpizCEmvq9Ij7Es-oyoDEkxi8DlNy8OPcDPRWN0AEiN7POz_ZLVP-WgczSxk8kzvczhZ" alt="sendbird-android-build-chat-API-channel-url" width="423" style="width: 423px; display: block; margin: 0px auto;"></div>
<p>&nbsp;</p>
<p><strong>res/layout/channel_item.xml</strong></p>
<script src="https://gist.github.com/rommel-sunga/ba3dddcf8210e699b5cd9f2daa183a40.js"></script>
<p>&nbsp;</p>
<p>To display a channel list, create a new ConstraintLayout with a RecyclerView that displays a list of channels to join. It will use the layout above to represent a single channel in the list.</p>
<p>&nbsp;</p>
<p>The code will populate this RecyclerView later in <strong>ChannelListActivity</strong>. As a user scrolls down the list of apps, it will query the SendBird API for more channels and continue to populate until it runs out of new results.</p>
<p>&nbsp;</p>
<p><strong>Group Channel List (In App)</strong></p>
<p><img src="https://cdn2.hubspot.net/hubfs/3417319/Screen%20Shot%202019-03-06%20at%2010.16.03%20AM.png" width="425" style="width: 425px; display: block; margin: 0px auto;" alt="sendbird-android-chat-basic-channel-list">&nbsp;</p>
<p><strong>res/layout/channel_list.xml</strong></p>
<script src="https://gist.github.com/rommel-sunga/f253825f0497cf0f6d74d86bd85eac76.js"></script>
<p>&nbsp;</p>
<h3>5.1 ChannelListActivity Class</h3>
<p>Afterwards, create a new activity called <strong>ChannelListActivity</strong>. It is responsible for querying for channels and then displaying this list on the group_channel_list layout that we created above.</p>
<p>&nbsp;</p>
<p>Here are the contents of <strong>ChannelListActivity </strong>with a short explanation about the purpose of each portion. The complete code source for this file is also shown below.</p>
<p>&nbsp;</p>
<p>The <strong>onCreate() </strong>method for the ChannelListActivity sets up the content view and the channel type information. ChatActivity uses the channel type information to join the correct type of channel (open vs group).</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechat.sb/ChannelListActivity.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/1c3bf082117cedb9b04bb55ff1afa6ce.js"></script>
<p>&nbsp;</p>
<p><strong>onResume()</strong> uses the channel type information provided to route the channel list request to the correct channel type.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/1b0a671a42954cdcf44cc1f2cb2575b2.js"></script>
<p>&nbsp;</p>
<p>The <strong>get_group_channels()</strong> and <strong>get_open_channels()</strong> methods query the SendBird API for the complete list of groups based on the query parameters provided. This example sets a limit of channel queries to 100 channels and limits group channels to the group channels to which our current user is a member.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/c1cacd1e48aa19d72fb52e3bc35adba6.js"></script>
<p>&nbsp;</p>
<p>The <strong>populate_group_channel_list()</strong> and <strong>populate_open_channel_list()</strong> set up the RecyclerView and the corresponding Adapter. The Adapter takes a list of either open or group channels from our query earlier and populates the channel lists.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/e6b83607fe9e85879ae4f7eb0759168d.js"></script>
<p>&nbsp;</p>
<p>Finally, the <strong>connect_sendbird()</strong> and <strong>init_sendbird()</strong> are methods to setup your initial SendBird application state and then perform the login action for your user to SendBird.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/625d5e844882f1298c67b70cea076504.js"></script>
<p>&nbsp;</p>
<p>Complete contents of ChannelListActivity</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechat.sb/ChannelListActivity.java</strong></p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/49c1c00cbc13fcb4634760cfb82a62fc.js"></script>
<p>&nbsp;</p>
<h2>6.0 Open and Group Channel List Adapters</h2>
<p>To fill out the RecyclerView for the channel lists, create an adapter responsible for setting the information in the channel list layout and for creating the onClickListeners. onClickListeners launches the chat activity for the prospective channel.</p>
<p>&nbsp;</p>
<p>This article shows how to create the group channel adapter. The logic for the open channel adapter is largely the same and the complete source code for both adapters can be found at the end of this section. First, create a <strong>GroupChannelListAdapter</strong> class that serves as the adapter for group channels. Then, create an <strong>OpenChannelListAdapter </strong>that does the same for open channels.</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechat.sb/GroupChannelListAdapter.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/87ac93a97388095e632675178451284d.js"></script>
<p>&nbsp;</p>
<p>Then, within our <strong>GroupChannelListAdapter </strong>class create a <strong>GroupChannelListViewHolder</strong> class. It is responsible for actually populating the channel list view using the ViewHolder we will create afterwards.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/e9a5591753c3c01b4a8cc696cae049d0.js"></script>
<p>&nbsp;</p>
<p>Turn attention back to the<strong> GroupChannelListAdapter </strong>class. It has a <strong>onBindViewHolder() </strong>method that sets up the onClickListeners for each channel. It also sets the TextView to display each channel’s URL. When a user clicks on a join channel button, they go to ChatActivity. It joins the respective channel and then allows the user to send and receive messages.</p>
<p>&nbsp;</p>
<p>The process to implement this chat activity was covered in the first tutorial of this series, but needs to be slightly modified to join both open/group channels in this tutorial. The full source code for the modified ChatActivity is available in our source code and it is also covered below.</p>
<p>&nbsp;</p>
<script src="https://gist.github.com/rommel-sunga/edafa7549caec92ba8f388580c904b15.js"></script>
<p>&nbsp;</p>
<p>Finally we implement <strong>getItemCount()</strong> (used by the LayoutManager):</p>
<script src="https://gist.github.com/rommel-sunga/8a5b6e71917c1a9b608d3cb9d062ff27.js"></script>
<p>&nbsp;</p>
<p>Complete contents of GroupChannelListAdapter.java</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechatsb/GroupChannelListAdapter.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/0bf16e3f1b788ac8b6c0d86be1ba3ce6.js"></script>
<p>Complete contents of OpenChannelListAdapter.java</p>
<p>&nbsp;</p>
<p><strong>java/com.example.simplechatsb/OpenChannelListAdapter.java</strong></p>
<script src="https://gist.github.com/rommel-sunga/e51674010320be88b8d93eb738181fc4.js"></script>
<p>&nbsp;</p>
<p>This marks the end of the channel list tutorial. To complete the application, create a ChatActivity to display messages in the chat. Our <a href="https://blog.sendbird.com/how-to-build-an-android-chat-app-using-a-chat-api">previous tutorial</a> in this series already covers the details of ChatActivity’s implementation. Since this is not the focus of this tutorial, this tutorial repeats the material here. To complete this tutorial’s app, pull the source code of ChatActivity from our completed app. The following sections include the detailed explanation.</p>
<p>&nbsp;</p>
<p><strong>Note:</strong> For a user to join a group channel, the group channel must either be set to public via the <a href="https://docs.sendbird.com/platform/group_channel#3_update_a_channel">SendBird Platform API</a> or another user must invite the user to the channel. Otherwise, the user fails to join the channel.</p>
<h2>7.0 ChatActivity Layout</h2>
<p>Available from the <a href="https://github.com/smilefam/AndroidChannelListTutorial">source code</a> under <a href="https://github.com/smilefam/AndroidChannelListTutorial/tree/master/app/src/main/res/drawable">AndroidChannelListTutorial/app/src/main/res/drawable</a> and <a href="https://github.com/smilefam/AndroidChannelListTutorial/blob/master/app/src/main/res/layout/activity_chat.xml">AndroidChannelListTutorial/app/src/main/res/layout/activity_chat.xml</a>.</p>
<h3>7.1 ChatActivity Class</h3>
<p>Available from the <a href="https://github.com/smilefam/AndroidChannelListTutorial">source code</a> under <a href="https://github.com/smilefam/AndroidChannelListTutorial/blob/master/app/src/main/java/com/example/simplechatsb/ChatActivity.java">AndroidChannelListTutorial/app/src/main/java/com/example/simplechatsb/ChatActivity.java</a> and <a href="https://github.com/smilefam/AndroidChannelListTutorial/blob/master/app/src/main/java/com/example/simplechatsb/Utils.java">AndroidChannelListTutorial/app/src/main/java/com/example/simplechatsb/Utils.java</a>. The code is the same as the previous tutorial, except it allows users to join both open/group channels.</p>
<h2>8.0 Conclusion</h2>
<p>In this tutorial, we have built a channel list and way to link it to the previous tutorial’s code, which covers chat and login. We can connect to both Open Channels and Group Channels on the SendBird platform. This choice allows your application to cover a variety of use cases, depending on whether the concept of “membership” in a group channel is necessary or whether the concept of “connection-based membership,” like in an open channel, is more appropriate. There are many other use cases that can be covered with SendBird. These may not necessarily use a channel list. The channel list is, however, a basic feature for many applications.</p>
<p>&nbsp;</p>
<p>From here you would likely want a way to implement:</p>
<ul>
<li>a way to filter group channels based on some criteria</li>
<li>display the channel name instead of the channel URL</li>
<li>a way to invite/kick/ban users</li>
</ul>
<p>&nbsp;</p>
<p>If you would like to find out more about how to implement these features or you’d like to learn about integrating SendBird into your application please see our <a href="https://docs.sendbird.com/android">SendBird Android Documentation</a>, <a href="https://github.com/smilefam/SendBird-Android">Android Sample Application</a> and <a href="https://docs.sendbird.com/ref/android/index.html">Android API Reference</a>.</p>

<html>
 <head></head>
 <body>
  <h2>1.0 Introduction</h2> 
  <p>In our earlier <a href="https://blog.sendbird.com/how-to-build-an-android-chat-app-using-a-chat-api">tutorial</a>, we covered how to create a basic chat application that allowed you to login to SendBird with a user and to chat in a preset channel. For a real application, we would also need to implement a way to join other channels. One way to allow users to join channels is to implement a channel list and enable users to join a channel of their choice.</p> 
 </body>
</html>

https://cdn2.hubspot.net/hubfs/3417319/20190716_android-1.png

<h2>1.0 Introduction</h2>
<p>In our earlier <a href="https://blog.sendbird.com/how-to-build-an-android-chat-app-using-a-chat-api">tutorial</a>, we covered how to create a basic chat application that allowed you to login to SendBird with a user and to chat in a preset channel. For a real application, we would also need to implement a way to join other channels. One way to allow users to join channels is to implement a channel list and enable users to join a channel of their choice.</p>


How to build an Android chat app using a chat API

This tutorial will teach you to create a messaging app without server-side code using a chat API. Build a chat app with minimal code!

<p><img class="aligncenter wp-image-1888" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/chat_tutorial_screenshot.png" alt="Chat tutorial using a chat API" width="270" height="480" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p><span style="font-weight: 400;">Once the exclusive realm of large tech companies, messaging apps are becoming more ubiquitous because of the rise of chat API. This tutorial will&nbsp;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.</span></p>

<p><span style="font-weight: 400;">This guide will be carried out in Android Studio. It uses the <a href="https://docs.sendbird.com/android?utm_source=Blog&amp;utm_medium=Referral-Text" target="_blank" rel=" noopener">SendBird Android SDK</a>, which provides methods to easily send, fetch, and receive messages in real-time. The complete app is on <a href="https://github.com/smilefam/AndroidChatTutorial" target="_blank">GitHub</a>.</span></p>
<p>&nbsp;</p>
<h3><strong>1. Import dependencies</strong></h3>
<p><span style="font-weight: 400;">For this tutorial, we will be using the v7 AppCompat, Design Support, Constraint Layout, and <a href="https://github.com/bumptech/glide" target="_blank" rel=" noopener">Glide</a> libraries, as well as the SendBird Android SDK.</span></p>
<p><span style="font-weight: 400;">Add these lines to your app-level <code>build.gradle</code>&nbsp;file.</span></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=build.gradle"></script>
<h3><strong>2. Create a sign-in screen</strong></h3>
<p><img class="aligncenter wp-image-1889" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screenshot_1498545688.png" alt="Screenshot_1498545688" width="270" height="480" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p><span style="font-weight: 400;">In order to use the SendBird SDK, you must specify a username and nickname. You do not need a separate registration process&nbsp;as unknown usernames automatically create a new user.&nbsp;Your nickname is displayed beside each message you send.</span></p>
<p><span style="font-weight: 400;">Create an XML file with two TextInputEditTexts and a login button.</span></p>
<p><code>activity_login.xml</code></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=activity_login.xml"></script>
<p><span style="font-weight: 400;">When the button is pressed, we will use these fields to log in to the SendBird servers. First, initialize the SDK by calling <code>SendBird.init()</code>, passing in the APP ID provided in the code below. Then, connect with <code>SendBird.connect()</code> and update the user’s nickname with <code>SendBird.updateCurrentUserInfo()</code>.</span></p>
<p><code>LoginActivity.java</code></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=LoginActivity.java"></script>
<h3><strong>3. Implement a messaging UI</strong></h3>
<p><span style="font-weight: 400;">Next, we will create a new Activity called <code>ChatActivity</code>. This will be the main screen, and contain chat bubbles as well as a chatbox where you can type and send messages.&nbsp;Create the activity as well as a corresponding XML file, <code>activity_chat.xml</code>.</span></p>
<p><span style="font-weight: 400;">We will have to implement several XML files for the layout. This part is covered in depth in another blog post, <a href="https://blog.sendbird.com/android-chat-tutorial-building-a-messaging-ui/" target="_blank">Building a messaging UI</a> - 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.</span></p>
<p>(1) <code>activity_chat.xml</code></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=activity_chat.xml"></script>
<p>(2) <code>item_message_sent.xml</code></p>
<p><img class="aligncenter size-full wp-image-1900" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screen-Shot-2017-06-27-at-4_11_11-PM.png" alt="Screen Shot 2017-06-27 at 4.11.11 PM" width="365" height="101" style="display: block; margin-left: auto; margin-right: auto;"></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=item_message_sent.xml"></script>
<p>(3) <code>item_message_received.xml</code></p>
<p><img class="aligncenter size-full wp-image-1902" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screen-Shot-2017-06-27-at-4_10_53-PM.png" alt="Screen Shot 2017-06-27 at 4.10.53 PM" width="655" height="172" style="display: block; margin-left: auto; margin-right: auto;"></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=item_message_received.xml"></script>
<h3><strong>4. Create an Adapter for the RecyclerView</strong></h3>
<p><span style="font-weight: 400;">To bind these XML components to actual data, we must create an Adapter for the RecyclerView. First, create a nested class within <code>ChatActivity</code> called <code>ChatAdapter</code>, which should subclass <code>RecyclerView.Adapter</code>.&nbsp;This adapter will hold two types of ViewHolders: one for received messages, and one for sent messages. <code>Utils</code> here is a convenience class that contains methods for formatting timestamps into readable formats and rendering images from URLs. You can view the whole&nbsp;code <a href="https://github.com/smilefam/AndroidChatTutorial/blob/master/app/src/main/java/com/sendbird/androidchattutorial/ChatActivity.java" target="_blank">here</a>. Create two classes nested within <code>ChatAdapter</code>.</span></p>
<p><code>ChatActivity.java</code></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=sentMessageHolder-snippet.java"></script>
<p><span style="font-weight: 400;">Next, we will implement methods within the adapter to fetch messages from the server and store them in an ArrayList.</span></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=refreshMessage-snippet.java"></script>
<p>Finally, we will override classes in RecyclerView.Adapter to bind the XML files we wrote earlier to each of our fetched messages.</p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=getItemViewType-snippet.java"></script>
<p>View the full code for ChatAdapter <a href="https://github.com/smilefam/AndroidChatTutorial/blob/master/app/src/main/java/com/sendbird/androidchattutorial/ChatActivity.java" target="_blank">here</a>.</p>
<h3><strong>5. Initialize the RecyclerView with ChatAdapter</strong></h3>
<p>Using the SendBird methods <code>OpenChannel.getChannel()</code> and <code>channel.enter()</code>, we will enter a channel where we can talk to others. Unlike a ListView, a RecyclerView requires a LayoutManager in order to initialize. <code>mLayoutManager.reverse()</code> sets the first item at the bottom of the RecyclerView so that&nbsp;the newest messages are shown first when the Activity is opened.</p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=ChatActivity-snippet.java"></script>
<h3><strong>6. Register a Channel Handler in ChatActivity</strong></h3>
<p><span style="font-weight: 400;">The last step is to&nbsp;register a Channel Handler, which automatically receives all incoming messages from the SendBird servers. When the <code>onMessageReceived</code> callback is called, invoke <code>adapter.appendMessage()</code> to display a new message at the bottom of the RecyclerView.</span></p>
<script src="https://gist.github.com/drjoak/f4c039d87f51dca6de0fae87f3290470.js?file=onResume-snippet.java"></script>
<p>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 <a href="https://github.com/smilefam/AndroidChatTutorial/" target="_blank">GitHub</a>.</p>
<p>If you want to take this app a step further, try out SendBird's <a href="https://github.com/smilefam/SendBird-Android" target="_blank">open-source sample Android app</a>. 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.</p>
<p style="text-align: center;">{{cta('01752e41-c37a-4dab-b164-769259e2b0a7')}}</p>
<p>&nbsp;</p>

<html>
 <head></head>
 <body> 
  <p><span style="font-weight: 400;">Once the exclusive realm of large tech companies, messaging apps are becoming more ubiquitous because of the rise of chat API. This tutorial will&nbsp;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.</span></p> 
 </body>
</html>

https://cdn2.hubspot.net/hubfs/3417319/how-to-android-chat-app.png

<p><img class="aligncenter wp-image-1888" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/chat_tutorial_screenshot.png" alt="Chat tutorial using a chat API" width="270" height="480" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p><span style="font-weight: 400;">Once the exclusive realm of large tech companies, messaging apps are becoming more ubiquitous because of the rise of chat API. This tutorial will&nbsp;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.</span></p>


popular_posts

Lists by Topic

post_categories

Android Chat Tutorial: Building a Messaging UI

This tutorial teaches you how to build a quality Android chat and messaging UI using RecyclerView and ConstraintLayouts.

<p><span style="background-color: transparent;">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.</span></p>

<p>&nbsp;</p>
<p><img class="aligncenter wp-image-1708" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screenshot_20170406-104936.png" alt="Google Allo's Android chat UI" width="270" height="480" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>&nbsp;</p>
<p>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.</p>
<p>This tutorial walks you through the steps required to build a quality messaging UI.</p>
<p>&nbsp;</p>
<h2>Setting up the Activity</h2>
<p>In this tutorial, we'll create a dedicated activity to host our messages. Let's call it&nbsp;<code>MessageListActivity.</code>&nbsp;The primary component in this activity is a RecyclerView that fills most of the screen. To keep ahead of the curve, a <code>ConstraintLayout</code> will be used as the root ViewGroup.</p>
<p>In addition to displaying message history, chat UIs typically allow the user to send messages through a&nbsp;chatbox. We'll position this chatbox at the bottom of the screen using constraints. This will anchor it to the soft input keyboard that pops up when the user types.</p>
<p>&nbsp;</p>
<p><code>/layout/activity_message_list.xml</code></p>
<script src="https://gist.github.com/alkjez/1e93ebce05e46671ff91d363a5d3d9a8.js"></script>
<p>This creates two elements:</p>
<ol>
<li>&nbsp;A flexible chatbox that expands according to the length of the message being typed</li>
<li>&nbsp;A RecyclerView that designates the remaining space to past messages</li>
</ol>
<p>It will look like the following image:</p>
<p>&nbsp;</p>
<p><img class="aligncenter size-full wp-image-1657" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/device-2017-04-04-141938.png" alt="layout 1" width="270" height="430" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>&nbsp;</p>
<h2>Creating a list item for each message</h2>
<p>Use a separate XML file to define&nbsp;the layout of each item (i.e. message)&nbsp;for ListViews and RecyclerViews. It is common practice for each message to contain the sender’s name, their profile image, and a timestamp.</p>
<p>&nbsp;</p>
<p><img class="aligncenter size-full wp-image-1667" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screen-Shot-2017-04-04-at-5_09_24-PM.png" alt="Screen Shot 2017-04-04 at 5.09.24 PM" width="536" height="192" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>&nbsp;</p>
<p>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. Most chat clients choose to discard these components altogether. We will do the same by creating two different <code>ViewHolder</code>'s:</p>
<ol>
<li><code>SentMessageHolder</code>&nbsp;for messages that “I” have sent</li>
<li><code>ReceivedMessageHolder</code>&nbsp;for messages sent by others</li>
</ol>
<p>To create the above image, we must first create a chat bubble in an XML file. Once again, this is surprisingly simple:</p>
<ol>
<li>Set a rounded rectangle as the background for TextView</li>
<li>Adjust the paddings</li>
<li>Align the text</li>
</ol>
<p><code>/drawable/rounded_rectangle_orange.xml</code></p>
<script src="https://gist.github.com/alkjez/f821a61097874d28ade3cf03cb280aab.js"></script>
<p>Voila! We now have a handsome chat bubble&nbsp;housing the message.</p>
<p>&nbsp;</p>
<p><img class="aligncenter size-full wp-image-1675" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screen-Shot-2017-04-04-at-5_19_36-PM.png" alt="Screen Shot 2017-04-04 at 5.19.36 PM" width="271" height="69" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>&nbsp;</p>
<p>You can appropriately&nbsp;position the other TextViews using constraints. Be sure to create two more constraints before moving on:</p>
<ol>
<li>Be sure to set your root layout’s height to <code>wrap_content,&nbsp;</code>so it can accommodate messages containing a single line and messages containing more than a single line</li>
<li>Set the message body’s <code>max_width</code>&nbsp;to an appropriate threshold. Without this constraint, the chat bubble will fill the entire screen's width, and will look clumsy.</li>
</ol>
<p>Now let's apply this model to both the received and sent messages.</p>
<p>&nbsp;</p>
<p><strong>Received Messages</strong></p>
<p><code>/layout/item_message_received.xml</code></p>
<script src="https://gist.github.com/alkjez/fcf88ea88eae3e66c327595eccb90841.js"></script>
<p>This produces the following image for received messages.</p>
<p>&nbsp;</p>
<p><img class="aligncenter size-full wp-image-1681" src="https://cdn2.hubspot.net/hubfs/3417319/Imported_Blog_Media/Screen-Shot-2017-04-04-at-5_25_31-PM-1.png" alt="Screen Shot 2017-04-04 at 5.25.31 PM" width="720" height="118"></p>
<p>&nbsp;</p>
<p><strong>Sent Messages</strong></p>
<p>For sent messages, align the chat bubble to the right, and remove the sender's name and profile image.</p>
<p><code>/layout/item_message_sent.xml</code></p>
<script src="https://gist.github.com/alkjez/83d022aee7f967285ed0cb295c2c23f0.js"></script>
<p>&nbsp;</p>
<h2>Creating an Adapter for the RecyclerView</h2>
<p>Populate the RecyclerView with the above XML items by creating an adapter that extends <code>RecyclerView.Adapter</code>. This adapter will accomplish three things:</p>
<ol>
<li>Store a list of messages</li>
<li>Determine whether a message is sent or received</li>
<li>Inflate the appropriate layout within RecyclerView.</li>
</ol>
<p>But before venturing any further, we need a list of messages!</p>
<p>Engineering a backend for real-time messaging is, however, beyond the scope of this tutorial. We'll therefore proceed with the models in <strong>SendBird’s chat SDK.</strong>&nbsp;It roughly assumes the following structure:</p>
<p><strong>Generic Message and User models</strong></p>
<pre class="lang:default decode:true " title="generic message and user models"><span style="font-family: 'courier new', courier;">class Message {
    String message;
    User sender;
    long createdAt;
}</span></pre>
<p><span style="font-family: 'courier new', courier;">class User {</span><br><span style="font-family: 'courier new', courier;">&nbsp; &nbsp; String nickname;</span><br><span style="font-family: 'courier new', courier;">&nbsp; &nbsp; String profileUrl;</span><br><span style="font-family: 'courier new', courier;"> }</span></p>
<p>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.</p>
<p>Now, let's create an adapter and name it <code>MessageListAdapter</code>. It will hold&nbsp;a <code>List</code> of Messages that will be displayed within a RecyclerView.</p>
<p>&nbsp;</p>
<p><code>MessageListAdapter.java</code></p>
<script src="https://gist.github.com/alkjez/84d349b97f8d338abf108ec443d752ac.js"></script>
<p>By default, an adapter requires at least one <code>RecyclerView.ViewHolder.</code>&nbsp;It is a layout that can be inflated and bound by the objects it holds. In our case, two ViewHolders are needed:</p>
<ol>
<li><code>SentMessageHolder</code> to hold messages that "I" sent</li>
<li><code>ReceivedMessageHolder</code> to hold messages that “I” have received from others</li>
</ol>
<p>We'll write these to be private inner classes of <code>MessageListAdapter</code>.</p>
<p>Each ViewHolder holds member views that can be bound to particular information contained in a message. For example, <code>TextView messageText</code> binds to a message’s content, while <code>nameText</code> binds to the name of a message’s sender.</p>
<p><a href="https://antonioleiva.com/recyclerview-listener/" rel=" noopener" target="_blank">Antonio Leiva</a>&nbsp;suggests that we implement a bind(object) method within the ViewHolder class. This gives view binding to the ViewHolder class rather than to <code>onBindViewHolder</code>.&nbsp;It therefore&nbsp;produces cleaner code amidst multiple ViewHolders and ViewTypes. It also allows us to add easily OnClickListeners, if necessary.</p>
<p>&nbsp;</p>
<p><code>ReceivedMessageHolder.java</code></p>
<script src="https://gist.github.com/alkjez/f369332e250014dce8103a703b6a025f.js"></script>
<p><code>SentMessageHolder</code>&nbsp;will be identical except that it will not have&nbsp;nameText and profileImage.</p>
<p>Once you complete ViewHolder, turn back to the adapter and override the necessary methods to</p>
<ol>
<li>Obtain a message from MessageList</li>
<li>Determine whether it is a sent message or a received message</li>
<li>Inflate the appropriate layout for the ViewHolder</li>
<li>Pass the message to the ViewHolder for binding</li>
</ol>
<p>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.</p>
<p>&nbsp;</p>
<p style="text-align: left;"><code>MessageListAdapter.java</code></p>
<script src="https://gist.github.com/alkjez/551eabf861b2fd8cc929dc4c34f52f10.js"></script>
<p>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.</p>
<p>&nbsp;</p>
<h2>Putting it all together</h2>
<p>We've created all the components, and now we need to initialize them inside our Activity. Instantiate a <code>RecyclerView</code> and a <code>MessageListAdapter</code> with a list of messages, and voila! You've just created your own messaging UI.</p>
<p>&nbsp;</p>
<p><code>MessageListActivity.java</code></p>
<script src="https://gist.github.com/alkjez/38bfdf825ef2e94b72cd88a6c1441d29.js"></script>
<p>You can build more advanced features like "image preview," animated GIFs within chat bubbles, and others. See examples of advanced chat UI at&nbsp;<strong><a href="https://github.com/smilefam/SendBird-Android" rel=" noopener" target="_blank">SendBird’s open source sample UI app</a></strong>! 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.</p>
<p style="text-align: center;">{{cta('01752e41-c37a-4dab-b164-769259e2b0a7')}}&nbsp;</p>
<p>&nbsp;</p>

<html>
 <head></head>
 <body>
  <p><span style="background-color: transparent;">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.</span></p> 
 </body>
</html>

https://cdn2.hubspot.net/hubfs/3417319/Android-chat-tutorial-messaging-ui.png

<p><span style="background-color: transparent;">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.</span></p>


Tagged in "Android"