Table of Contents

Sendbird UIKit Customization Guide

Sendbird UIKit Customization Guide

Janna McLaughlin
Solutions Engineer
Tutorial Type: Basic Reading Time: 10 mins Building Time: N/A
BasicScriptedChatAndroidReactiOS

Introduction

The Sendbird UIKit helps you quickly build in-app chat with customizable, pre-built UI components. The UIKit is for developers looking to quickly build a modern, full-featured, and scalable chat experience. With built-in standard chat features, ready-made designed UI components, and the ability to customize the overall theme and components’ colors and fonts, the Sendbird UIKit is a must-have for building modern chat.

This guide is intended to be a springboard to additional resources for customization. This guide will review the main points of customization with links to samples, tutorials, and open-source code. We will also outline how to restrict SDK actions, and then conclude with general FAQs. 

Ready? Let’s begin! 💻

UIKit components

When considering customization of the Sendbird UIKit, it is essential to consider the available components. Please find a list of components below.

Components Overview: iOS, Android, React

Theme: iOS, Android, React

Colors: iOS, Android, React

Fonts/Style: iOS, Android, React

Strings: iOS, Android, React

Icons: iOS, Android, React

Customization

Now let’s talk about customization, one of the UIKit’s most valuable features. Many developers start with the UIKit’s out-of-the-box components and then choose to customize features by overriding them since many classes are subclassable with overridable methods. For example, some developers opt to override or disable certain functions, such as hiding the ‘Members’ list in the chat view or rendering a custom message with custom functionality when selecting the default attachment icon.

Sample apps

Sendbird provides quick-start samples. For the UIKit, there are some custom samples on how you might override certain classes and functions. 

By default, the UIKit renders a channel list, and the user selects the channel in which to chat. It’s also possible to avoid showing the channel list with the UIKit and render a chat directly by loading the channel by the channel_url. The chat view can be nested and loaded in a tab inside your application. Please see additional resources below.

Samples apps, plus customized samples: iOS, Android, React

Custom implementation of the chat view: iOS, Android, React

UIKit: Open source

The UIKit is open source, thus you can see the code. This is beneficial when you are trying to customize. We don’t recommend forking the source directly as that limits future support should you need to update the SDK version later on.

UIKit open-source code: iOS, Android, React

Customization tutorials

Sendbird’s developer portal is an excellent resource for tutorials about UIKit. On the developer portal tutorials page, select the filter for ‘UIKit’.

The following may be especially useful:

Restrictions of SDK Actions

In general, the Sendbird team can help you restrict access to certain SDK actions for your application such as creating channels, inviting users, or updating messages through the client apps. Please see below the table of actions that can be restricted. Please also let Sendbird know if you would like to restrict any of these actions; send us a message, contact your Customer Success Manager, or check out our support center.

UsersChannelsChannel OperatorsMessages
User ListOpen Channel creationGroup Channel update only by operatorsFile Messages
User updateGroup Channel creationGroup Channel image update only by operatorsFile Messages with URLs
Group Channel updateGroup Channel name update only by operatorsMessage update
Group Channel inviteNon-operators can mention in the channel
Group Channel leaveOperators can ban other operators
Group Channel deletionOperator can edit other operators

 

Hiding and disabling SDK actions

With the UIKit, you may need to hide certain buttons or customize certain classes to suit your needs. Please let us know if you have a specific list of features that you are looking to either customize or block access to within the UIKit; you can send us a message, contact your Customer Success Manager, or check out our support center.

Disable the channel settings view

It’s possible to hide the channel settings view so that users cannot access the channel information or actions. By hiding the channel information section, not only do we hide the channel information such as the chat notifications and members list, but we also hide actions such as searching in a channel, leaving a channel, and editing a channel.

Editing members

For example, on Android, set the setUseHeaderRightButton to false when creating the channel fragment.

The right buttons in the chat are also customizable for iOS and JavaScript. 

Override the channel settings

It’s possible to override the functionality for the Channel settings. For example, on iOS, override the SBUChannelViewController’s showChannelSettings() function.

This code comes from the iOS Sendbird custom sample app when selecting the ChannelVC_Overriding option. Download the sample app to try it out.

Disable the create channel option

It’s possible to hide the icon within the UIKit that permits creating a channel. For example, with React, set the channel right header icon’s visibility to ‘hidden’. 

Disable the leave channel option

There are two ways to access the ‘Leave Channel’ option within the UIKit. Find examples for Android and iOS below on how to restrict access.

Android:

  1. In the ChannelListFragment, when the user long-clicks the channel list item, the dialog will be shown. It will include the ‘Leave Channel’ tab. It’s possible to customize the longClickListener using ChannelListFragment.Builder.setItemLongClickListener.
  2. In the ChannelSettingsFragment, the user can see the ‘Leave Channel’ tab. It’s possible to customize settingMenuClickListener using ChannelSettingsFragment.Builder.setOnSettingMenuClickListener.

The above listeners give the channel as a parameter if you need to customize settings based on the type of channel.

iOS is similar to Android:

  1. ChannelList: If the user swipes the cell, there is a leave menu. The swipe action is configurable.
  2. ChannelSettings: There is a leave menu item in the list of channel setting item types.

To disable the leave option completely, customize the SBUChannelListViewController and the SBUChannelSettingsViewController.

Overriding options for the plus icon (+) in the message input box

Users have the option to attach files, images, and documents. When selecting the plus icon (+) in the message input box, this triggers that list of actions by default.

iOS:

Override the didSelectActionSheetItem(index: Int, identifier: Int) function to specify a custom action and then call super.didSelectActionSheetItem(index: Int, identifier: Int) to call upon the default actions. 

Android: 

Override the setInputLeftButtonListener(View.OnClickListener) if you need to create your own action list. The ChannelFragment class provides takeCamera(), takePhoto(), takeFile() methods out-of-the-box so it’s easy to reuse those methods in your custom implementation.

General FAQ

  1. What are the best practices for accessibility with the UIKit?
    The elements in the Sendbird UIKit are accessible out-of-the-box, so it’s possible to select each component and take advantage of features, such as VoiceOver, Zoom, and more. To see accessibility in action, please download one of Sendbird’s sample applications and turn on accessibility on your device. The example below showcases selecting the message input box as used in voice-over functionality on iOS (left) and Android (right).
    Dashboard Typing Example
  2. Is voice to text supported?
    Yes, it is supported. With the Sendbird UIKit, the native keyboards pop up when inputting message text. For example, on iOS, the keyboard has a microphone button built right in that the user can press to talk and transcribe the text.

    Dashboard Phone Screen

Conclusion

And that’s a wrap! We have seen how the Sendbird UIKit is the fastest way to integrate Sendbird chat. We’ve discussed the UIKit, customization options, and restrictions of SDK actions. If you are looking for more flexibility and features, check out our chat SDKs

Happy chat building! 👩‍💻

This site is registered on wpml.org as a development site.