Build in-app chat using Kotlin: part 2

December 24, 2020

Introduction

Getting started with the Sendbird UIKit is wonderfully easy, and this two-part guide aims to help get you up and running quickly by showcasing a simple chat implementation.

In the first part of this guide, ‘Build in app chat using Kotlin: part 1’, we built out the login, and the ability to create and list channels. In this follow-up blog post, we will create the UI for the ChatActivity, build the MessageAdapter which handles setting the UI components, and implement the ChannelActivity class. This guide only covers sending/receiving User Messages. To see how to send File Messages, please visit Sendbird Documentation.

Assumptions

This tutorial assumes prior knowledge of Android and Android concepts, and was built using Android Studio: 4.0.2, Android Version: 10 API 29, Kotlin: 1.3.72, and Sendbird Core SDK: 3.0.148. Here is the completed source code for both part 1 and 2 of this guide.

UI for Channel Activity

The first step is to create a UI for how the chat will look. We will add an AppBarLayout with a “Back” button on the top to return to the ChannelListActivity. Below that we’ll add a RecyclerView to show the actual messages, and finally on the bottom, we’ll add a simple layout to handle entering and sending messages. 

Activity_chat.xml

Now that the UI skeleton is done, we need to create two different item views for the messages themselves because we will have a different UI for messages that are sent by the current user, and another UI for messages that are sent by others in the chat. (Note: As you implement more types of messages, you’ll have more of these .xmls.)The first .xml is for messages that are from the “Me” perspective, or messages sent by the current user. For this we have opted to have a TextView for the actual message, this is wrapped in a Cardview. Surrounding this TextView are other TextViews for items such as the date. 

Item_chat_me.xml

The second .xml is for messages that are from the “Other” perspective, so any message not from the current user. This UI is similar to the “Me” UI, however, it is left aligned and contains information about the “Other” user. While the views are relatively similar, things like an ImageView for the profile image and a TextField for the user’s name are included. 

Item_chat_other.xml

Now that theUI is complete, we are going to implement the MessageAdapter.kt class. This class  handles attaching the data that is passed to it, to a particular view in the RecyclerView. 

At this point, you will create a class called MessageAdapter.kt. This class extends the RecyclerView.Adapter(), so you need to make sure to implement the following methods:

onCreateViewHolder: This function  returns the customViewHolder that corresponds to the type of message that is there.  getItemViewType: This figures out what kind of message it is. Currently, we have only implemented UserMessage. In this function we will determine whether it is a “Me” message or an “Other” Message, and return accordingly.  onBindViewHolder: This function binds the messages to the views.  getItemCount: This function returns the current position. 

There are two additional functions that need to be added:

loadMessages: This function loads the initial past messages that are received in the ChannelActivity.  addFirst: This function adds recently sent or received messages

Continue reading

This post was originally published on this site