Engineering

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

Rommel Sunga
Rommel Sunga Solutions Engineer
Share

We're Hiring!

Help SendBird build the world's no. 1 messaging platform

Apply

1.0 Introduction

In our earlier tutorial, 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.

In this tutorial we will implement the following:

  • LoginActivity – Login screen for users to login and set their nickname
  • MainMenuActivity – Main Menu to allow users to join a group channel or an open channel
  • ChannelListActivity – Channel List to display open/group channels that users can join
  • ChatActivity – Chat screen that allows users to chat in their selected channel

This tutorial was built using:

Android Studio 3.3

Android Version 9, API 28

The source code for this tutorial can be found on GitHub.

2.0 LoginActivity Layout

Login Screen

res/layout/activity_login.xml

2.1 LoginActivity Class

Create a new activity called LoginActivity. It is responsible for logging in your user to the SendBird application.

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.

After creating the LoginActivity class, add an onCreate() method. It is responsible for setting up the login page.

java/com.example.simplechatsb/LoginActivity.java

The connectToSendBird() method launches the MainMenuActivity. It displays two options: (1) display the Group Channel List or (2) display the Open Channel List.

Finally, the updateCurrentUserInfo() method is responsible for updating the current user’s nickname. This nickname is displayed in chat rooms on SendBird.

By default, LoginActivity 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 here.

Channel Types

Find more information about the group and open channel types here:

https://help.sendbird.com/hc/en-us/articles/115002327727-What-is-the-difference-between-an-Open-Channel-and-a-Group-Channel-

Open Channel Group Channel
An Open Channel is a public channel that anyone can freely enter and exit.  A Group Channel is a private chat that is enterable by invitation only.

Complete the contents of LoginActivity.java

java/com.example.simplechatsb/LoginActivity.java

3.0 MainMenuActivity Layout

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.

res/layout/activity_main_menu.xml

3.1 MainMenuActivity Class

The main menu activity only consists of an onCreate() 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 becauseChannelListActivity uses it to determine whether to open a group or open channel list.

java/com.example.simplechatsb/MainMenuActivity.java

4.0 Constants Class

This is a small constants file with variables that are used in the channel list activity, chat activity and main menu activity.

java/com.example.simplechatsb/Constants.java

5.0 ChannelListActivity Layout

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.

Group Channel Item

res/layout/channel_item.xml

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.

The code will populate this RecyclerView later in ChannelListActivity. 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.

Group Channel List (In App)

res/layout/channel_list.xml

5.1 ChannelListActivity Class

Afterwards, create a new activity called ChannelListActivity. It is responsible for querying for channels and then displaying this list on the group_channel_list layout that we created above.

Here are the contents of ChannelListActivity with a short explanation about the purpose of each portion. The complete code source for this file is also shown below.

The onCreate() 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).

java/com.example.simplechat.sb/ChannelListActivity.java

onResume() uses the channel type information provided to route the channel list request to the correct channel type.

The get_group_channels() and get_open_channels() 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.

The populate_group_channel_list() and populate_open_channel_list() 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.

Finally, the connect_sendbird() and init_sendbird() are methods to setup your initial SendBird application state and then perform the login action for your user to SendBird.

Complete contents of ChannelListActivity

java/com.example.simplechat.sb/ChannelListActivity.java

6.0 Open and Group Channel List Adapters

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.

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 GroupChannelListAdapter class that serves as the adapter for group channels. Then, create an OpenChannelListAdapter that does the same for open channels.

java/com.example.simplechat.sb/GroupChannelListAdapter.java

Then, within our GroupChannelListAdapter class create a GroupChannelListViewHolder class. It is responsible for actually populating the channel list view using the ViewHolder we will create afterwards.

Turn attention back to the GroupChannelListAdapter class. It has a onBindViewHolder() 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.

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.

Finally we implement getItemCount() (used by the LayoutManager):

Complete contents of GroupChannelListAdapter.java

java/com.example.simplechatsb/GroupChannelListAdapter.java

Complete contents of OpenChannelListAdapter.java

java/com.example.simplechatsb/OpenChannelListAdapter.java

This marks the end of the channel list tutorial. To complete the application, create a ChatActivity to display messages in the chat. Our previous tutorial 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.

Note: For a user to join a group channel, the group channel must either be set to public via the SendBird Platform API or another user must invite the user to the channel. Otherwise, the user fails to join the channel.

7.0 ChatActivity Layout

Available from the source code under AndroidChannelListTutorial/app/src/main/res/drawable and AndroidChannelListTutorial/app/src/main/res/layout/activity_chat.xml.

7.1 ChatActivity Class

Available from the source code under AndroidChannelListTutorial/app/src/main/java/com/example/simplechatsb/ChatActivity.java and AndroidChannelListTutorial/app/src/main/java/com/example/simplechatsb/Utils.java. The code is the same as the previous tutorial, except it allows users to join both open/group channels.

8.0 Conclusion

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.

From here you would likely want a way to implement:

  • a way to filter group channels based on some criteria
  • display the channel name instead of the channel URL
  • a way to invite/kick/ban users

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 SendBird Android DocumentationAndroid Sample Application and Android API Reference.

Tags: Engineering