How to customize in-app chat on Android with the Sendbird UIKit

Introduction

This tutorial outlines some major Activities and Fragments available to customize the Android UIKit. Please note that this is a compilation of only the most common Activities and Fragments that you can customize.

The general design behind the UIKit is split into Fragments and Activities. In Android, an Activity is a UI component used to build a single screen of an application. It is the main focus of attention on the screen. In an Activity, you can build fragments and set the UI elements, listeners, adapters, queries, etc.

A Fragment is a sub-activity. A Fragment has its own lifecycle, inputs and can be added or removed from an Activity. A Fragment contains any additional code you want to implement, including adapters, event handlers, etc.

For all Activities and Fragments, Sendbird provides you with a default implementation if you do not implement your custom Activities and Fragments. Don’t forget that to launch the UIKit, you will need the ChannelListActivity, as ChannelListActivity is the starting point for launching the UIKit in your application.

This guide assumes some knowledge of Android and Java. All code snippets come from the official sample app.

In this tutorial, we will cover how to customize:

• Channel lists
• Channels
• Member lists
• Channel settings
• Channel invitations
• Channel creation

Let’s dive in!

CustomChannelList

(A component that shows all the channels a user has joined)

To customize the ChannelListActivity, you will need an Activity such as the following. In this activity, the most critical part is the method: createChannelListFragment. It allows you to:

• Set relevant info such as click listeners on given buttons
• Set the resources for the button
• Specify custom queries for the types of channels you desire to be returned
• Specify a custom Adapter for the channel list.
• Specify a corresponding custom fragment (which you will see below)

CustomChannelListActivity

CustomChannelListFragment

Fragments contain the bulk of the code in terms of implementation. The gist below shows the many different methods you can implement from the ChannelListFragment. This includes:

• Leaving a channel
• The typical fragment lifecycle
• The code showing how to navigate between activities

The rest can be seen in the following gist:

CustomChannel

(A component that shows the current channel a user has joined. From this component, messages are sent and received.)

To customize the ChannelActivity, you will need an Activity like the following. All Activities and Fragments which are customized follow the same general flow as you can see in the snippets. In this Activity, the most important part is the method: createChannelFragment. This allows you to:

• Customize the header, and enable/disable functionality depending on the use case
• Customize the chat look and feel by setting custom styles, typing indicators, and last seen messages
• Specify a custom message list adapter so you can further customize how you wish your messages to look (this follows the traditional RecyclerView Viewholder pattern for adapters)
• Specify custom click listeners to control the flow of the UIKit even further
• Specify a custom message list via custom parameters
• Specify a corresponding custom fragment (which you will see below)

A full list of customization options follows.

CustomChannelActivity

CustomChannelFragment

The following gist shows the many different methods you can implement from the ChannelFragment. This includes:

• Event handlers for actions before messages are sent
• Event handlers for actions before messages are updated
• The ability to customize the parameters attached to the message
• The ability to handle resending and deleting messages
• The typical fragment lifecycle
• The code showing how to navigate between activities

The rest can be seen in the following gist:

CustomMemberList

(A component that shows the list of members who have joined a current channel)

To customize the MemberListActivity, you will need an Activity like the following. All Activities and Fragments which are customized follow the same general flow as you can see in the snippets. In this Activity, the most critical part is the method: createMemberListFragment. it allows you to:

• Customize the header, and enable/disable functionality depending on the use case
• Specify a custom user list adapter so you can further customize how you wish your userlist to look (this follows the traditional RecyclerView Viewholder pattern for adapters)
• Specify custom click listeners. It includes events based on which profile is clicked and the flow of events in the application.
• Specify a corresponding custom fragment (which you will see below)

The complete list of customization options is below.

CustomMemberListActivity

CustomMemberListFragment

The following gist shows the different methods you can implement from the ChannelListFragment. This includes things like:

• Showing and dismissing loading dialogs
• The typical fragment lifecycle

CustomChannelSettings

(A component that shows channel information, and allows for changes to said channel)

To customize the ChannelSettingsActivity, you will need an Activity like the following. All Activities and Fragments which are customized follow the same general flow as you can see in the snippets. In this Activity, the most critical part is the method: createChannelSettingsFragment. This allows you to:

• Customize the header, and enable/disable functionality depending on the use case. Note that disabling the buttons on the header can limit your users’ experience but provide more security at the same time.
• Set click listeners to control the flow of events in the application
• Specify a corresponding custom fragment (which you will see below)

A full list of customization options follows.

CustomChannelSettingsActivity

CustomChannelSettingsFragment

The following gist shows the many different methods you can implement from the ChannelListFragment. This includes things like:

• Leaving a channel
• Using event handlers to handle action based on when GroupChannels are updated
• Customizing the menu’s options to handle things like moderation, notifications, and viewing a member’s list
• The typical fragment lifecycle

The rest can be seen in the following gist:

CustomInviteChannel

(A component that shows all the users of your client app from the current channel so you can invite others to join.)

To customize the InviteChannelActivity, you will need an Activity like the following. All Activities and Fragments which are customized follow the same general flow as you can see in the snippets. In this Activity, the most critical part is the method: createInviteChannelFragment. This allows you to:

• Customize the header, and enable/disable functionality depending on the use case
• Set click listeners to control the flow of events in the application
• Specify a customUserListQuery. This allows you to query based on things like metadata, userIDs, etc.
• Specify a corresponding custom fragment (which you will see below)

The full list of customization options is below.

CustomInviteChannelActivity

CustomInviteChannelFragment

The following gist shows the many different methods you can implement from the createChannelFragment. This includes things like:

• Event handlers to handle actions before a user is invited
• The ability to customize what the invitation message says
• The ability to handle actions once the user list is selected, and before the invites are sent
• The code for specifying a custom UserListAdapter
• The code that shows how to navigate between activities

CustomCreateChannel

(A component that shows all the users in your client app so you can create a channel. Users can be selected from this component to begin chatting.)

To customize the CreateChannelActivity, you will need an Activity like the following. All Activities and Fragments which are customized follow the same general flow as you can see in the snippets. In this Activity, the most critical part is the method: createChannelFragment. This allows you to:

• Customize the header, and enable/disable functionality depending on the use case
• Set click listeners to control the flow of events in the application
• Specify a customUserListQuery. This allows you to query based on things like metadata, userIDs, etc.
• Specify a customUserList adapter so you can further customize how you wish your userlist to look (this follows the traditional RecyclerView Viewholder pattern for adapters)
• Specify whether the channel will be distinct or not
• Specify a corresponding custom fragment (which you will see below)

The full list of customization options is below.

CustomCreateChannelActivity

CustomCreateChannelFragment

The Fragments are where the bulk of the code in terms of implementation will reside. The following gist shows the many different methods you can implement from the createChannelFragment. This includes things like:

• Actions you can do before the channel is created
• Actions you can do before the users are selected
• The code for specifying a custom UserListAdapter
• The code that shows how to navigate between activities

The rest can be seen in the following gist:

Color set

By default, Sendbird provides a beautiful user interface with light or dark themes. To further customize and specify the exact colors to be used with both light and dark themes, you can use our UIKit color set guide. This document will help you set harmonious colors and contrast levels between the backgrounds and chat UI components.

Conclusion

This tutorial outlined the major Activities and Fragments available in the Android UIKit. For additional UI modifications, check the docs for the full list of customizable themes as well as how to change common resources such as Strings, Icons, and other Styles.

You are on your way to creating a beautiful chat experience! Keep it going, and happy custom chat building! 🙂