/ UIKit / Android View
UIKit
Chat UIKit Android View v3
Chat UIKit Android View
Chat UIKit
Android View
Version 3

Customize message UI

Copy link

Sendbird Chat SDK provides expansive messaging features to enhance users' chat experience. Leveraging the messaging features of the SDK, our UIKit for Android allows you to tailor the appearance and feel of your chat interface to align with your app's branding or your specific requirements. This page walks you through customizing the message UI of the chat interface.

To create a new type of message rather than customizing, see our guide on how to add new message type.


UIKit message types

Copy link

The following table shows a list of message types available and its designated value. The values from 0 to 1000 are reserved for UIKit's predefined message types.

Message typeValue

VIEW_TYPE_USER_MESSAGE_ME

0

VIEW_TYPE_USER_MESSAGE_OTHER

1

VIEW_TYPE_FILE_MESSAGE_ME

2

VIEW_TYPE_FILE_MESSAGE_OTHER

3

VIEW_TYPE_FILE_MESSAGE_IMAGE_ME

4

VIEW_TYPE_FILE_MESSAGE_IMAGE_OTHER

5

VIEW_TYPE_FILE_MESSAGE_VIDEO_ME

6

VIEW_TYPE_FILE_MESSAGE_VIDEO_OTHER

7

VIEW_TYPE_ADMIN_MESSAGE

8

VIEW_TYPE_TIME_LINE

9

VIEW_TYPE_UNKNOWN_MESSAGE_ME

10

VIEW_TYPE_UNKNOWN_MESSAGE_OTHER

11

VIEW_TYPE_PARENT_MESSAGE_INFO

12

VIEW_TYPE_CHAT_NOTIFICATION

13

VIEW_TYPE_FEED_NOTIFICATION

14

VIEW_TYPE_VOICE_MESSAGE_ME

15

VIEW_TYPE_VOICE_MESSAGE_OTHER

16

VIEW_TYPE_MULTIPLE_FILES_MESSAGE_ME

17

VIEW_TYPE_MULTIPLE_FILES_MESSAGE_OTHER

18


Replace the default UI

Copy link

If you want to entirely replace the default UI with a new view, follow the steps below.

Step 1. Create a new ViewHolder

Copy link

Create a new ViewHolder that inherits from the GroupChannelMessageViewHolder.

class CustomMessageMeViewHolder(
    val binding: ViewCustomMessageMeBinding
) : GroupChannelMessageViewHolder(binding.root) {
    override fun setEmojiReaction(
        reactionList: MutableList<Reaction>,
        emojiReactionClickListener: OnItemClickListener<String>?,
        emojiReactionLongClickListener: OnItemLongClickListener<String>?,
        moreButtonClickListener: View.OnClickListener?
    ) {
    }

    override fun bind(channel: BaseChannel, message: BaseMessage, params: MessageListUIParams) {
        // Define your custom UI drawing logic here.
    }

    override fun getClickableViewMap(): Map<String, View> {
        return mapOf()
    }
}

Step 2. Create and register a custom adapter

Copy link

To replace the view entirely with a new custom view, a custom adapter has to be created. See how to customize list adapters here.

Through onCreateViewHolder, this adapter checks the type of message and uses the custom ViewHolder for the corresponding message type.

class MessageUISampleAdapter(
    channel: GroupChannel?,
    uiParams: MessageListUIParams
) : MessageListAdapter(channel, uiParams) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MessageViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        return when (MessageType.from(viewType)) {
            MessageType.VIEW_TYPE_USER_MESSAGE_ME -> CustomMessageMeViewHolder(
                ViewCustomMessageMeBinding.inflate(
                    inflater,
                    parent,
                    false
                )
            )
            // You can also apply the configuration to all items.
            /*
            MessageType.VIEW_TYPE_USER_MESSAGE_OTHER ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_ME ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_OTHER ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_IMAGE_ME ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_IMAGE_OTHER ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_VIDEO_ME ->
            MessageType.VIEW_TYPE_FILE_MESSAGE_VIDEO_OTHER ->
            MessageType.VIEW_TYPE_MULTIPLE_FILES_MESSAGE_ME ->
            MessageType.VIEW_TYPE_MULTIPLE_FILES_MESSAGE_OTHER ->
            MessageType.VIEW_TYPE_VOICE_MESSAGE_ME ->
            MessageType.VIEW_TYPE_VOICE_MESSAGE_OTHER ->
            MessageType.VIEW_TYPE_ADMIN_MESSAGE ->
            MessageType.VIEW_TYPE_TIME_LINE ->
            MessageType.VIEW_TYPE_PARENT_MESSAGE_INFO ->
            MessageType.VIEW_TYPE_CHAT_NOTIFICATION ->
            MessageType.VIEW_TYPE_PARENT_MESSAGE_INFO ->
            MessageType.VIEW_TYPE_UNKNOWN_MESSAGE_ME ->
            MessageType.VIEW_TYPE_UNKNOWN_MESSAGE_OTHER ->
            */
            else -> super.onCreateViewHolder(parent, viewType)
        }
    }
}

Advanced customizations

Copy link

The following are other ways you can make more intricate changes to the existing message UI.

Using MessageListUIParams

Copy link

You can customize UI settings that apply to the entire message list using MessageListUIParams. Once you've created and customized the MessageListUIParams object, you can pass it to the MessageListAdapter when you create an instance of the adapter. This way, the custom settings will be applied to the message list.

val customMessageListUIParams = MessageListUIParams.Builder()
    .setUseMessageGroupUI(false)
    // You can also apply the configuration to all items.
    /*
    .setMessageGroupType()
    .setChannelConfig()
    .setUseMessageReceipt()
    .setUseQuotedView()
    .setUseReverseLayout()
     */
    .build()

Using MessageUIConfig

Copy link

You can customize the text properties or background of the message UI using MessageUIConfig. Once you've created and customized the MessageUIConfig object, you can pass it to the MessageListAdapter when you create an instance of the adapter. This way, the custom settings will be applied to the message list.

Create TextUIConfig

Copy link
PropertyTypeDescription

textColor

Integer (ColorInt)

Specifies the color of the text.

textBackgroundColor

Integer (ColorInt)

Specifies the background color of the text.

textStyle

Integer (Typeface)

Specifies the style of the text. The Typeface class provides:
-Typeface.NORMAL: Standard text without any style.
-Typeface.BOLD: Text in bold style.
-Typeface.ITALIC: Text in italic style.
-Typeface.BOLD_ITALIC: Text that is both bold and italicized.

textSize

Integer

Specifies the size of the text in pixels.

familyName

String

Specifies the font family for the text, such as "Arial", "Roboto", etc.

customFontRes

Int (FontRes)

Specifies the resource ID of a custom font file.

Apply TextUIConfig

Copy link

You can create a MessageUIConfig and set the TextUIConfig for the desired message types. Once you've created the MessageUIConfig, you can apply it to the Adapter to reflect the changes.

CustomMessageListAdapter(channel, uiParams).apply {
    this.messageUIConfig = MessageUIConfig().apply {
        val textUIConfig = TextUIConfig.Builder()
            .setTextColor(Color.RED)
            // You can also apply the configuration to all items.
            /*
            .setTextBackgroundColor()
            .setTextSize()
            .setTextStyle()
            .setFamilyName()
            .setCustomFontRes()
            */
            .build()
        this.myMessageTextUIConfig.apply(textUIConfig)
        this.otherMessageTextUIConfig.apply(textUIConfig)
    
        // You can also apply the configuration to each item.
        /*
        this.myMessageBackground = null
        this.myEditedTextMarkUIConfig.apply(textUIConfig)
        this.myMentionUIConfig.apply(textUIConfig)
        this.myNicknameTextUIConfig.apply(textUIConfig)
        this.linkedTextColor = null
        this.myOgtagBackground = null
        this.myReactionListBackground = null
        this.mySentAtTextUIConfig.apply(textUIConfig)
        this.operatorNicknameTextUIConfig.apply(textUIConfig)
        this.otherEditedTextMarkUIConfig.apply(textUIConfig)
        this.otherMentionUIConfig.apply(textUIConfig)
        this.otherMessageBackground = null
        this.otherNicknameTextUIConfig.apply(textUIConfig)
        this.otherOgtagBackground = null
        this.otherReactionListBackground = null
        this.otherSentAtTextUIConfig.apply(textUIConfig)
        this.repliedMessageTextUIConfig.apply(textUIConfig)
        */
    }
}

Using themes

Copy link

UIKit provides various theme attributes related to the messaging UI.

Sample style definitions

Copy link

The following is a style resource related to the message list UI. For more detailed information on attributes, see this sample code.

<style name="Component.List.Channel">
    <item name="sb_message_recyclerview_background">@color/background_50</item>
    <item name="sb_message_recyclerview_tooltip_background">@drawable/selector_tooltip_background_light</item>
    <item name="sb_message_recyclerview_tooltip_textappearance">@style/SendbirdCaption1Primary300</item>
    <item name="sb_message_recyclerview_banner_background">@drawable/sb_shape_channel_information_bg</item>
    <item name="sb_message_recyclerview_banner_textappearance">@style/SendbirdCaption2OnLight01</item>
    <item name="sb_message_typing_indicator_textappearance">@style/SendbirdCaption1OnLight02</item>
    <item name="sb_message_scroll_bottom_background">@drawable/selector_scroll_bottom_light</item>
    <item name="sb_message_scroll_bottom_icon">@drawable/icon_chevron_down</item>
    <item name="sb_message_scroll_bottom_icon_tint">@color/primary_300</item>

    <item name="sb_widget_ogtag">@style/Widget.Sendbird.OgTagView</item>
    <item name="sb_widget_my_message">@style/Widget.Sendbird.Message.Me</item>
    <item name="sb_widget_other_message">@style/Widget.Sendbird.Message.Other</item>
    <item name="sb_widget_my_user_message">@style/Widget.Sendbird.Message.Me.User</item>
    <item name="sb_widget_my_file_message">@style/Widget.Sendbird.Message.Me.File</item>
    <item name="sb_widget_other_user_message">@style/Widget.Sendbird.Message.Other.User</item>
    <item name="sb_widget_other_file_message">@style/Widget.Sendbird.Message.Other.File</item>
    <item name="sb_widget_admin_message">@style/Widget.Sendbird.Message.Admin</item>
    <item name="sb_widget_timeline_message">@style/Widget.Sendbird.Message.Timeline</item>
    <item name="sb_widget_emoji_message">@style/Widget.Sendbird.Emoji</item>
    <item name="sb_widget_thread_info">@style/Widget.Sendbird.ThreadInfoView</item>
    <item name="sb_widget_my_voice_message">@style/Widget.Sendbird.Message.Me.VoiceMessage</item>
    <item name="sb_widget_other_voice_message">@style/Widget.Sendbird.Message.Other.VoiceMessage</item>
    <item name="sb_widget_my_multiple_files_message">@style/Widget.Sendbird.Message.Me.MultipleFilesMessage</item>
    <item name="sb_widget_other_multiple_files_message">@style/Widget.Sendbird.Message.Other.MultipleFilesMessage</item>
</style>

Style customization

Copy link

You can either overwrite an existing style with new definitions, or you can choose to inherit from an existing style and only modify certain attributes as needed. Before applying the changes, you need to create a custom style first as shown below.

<style name="AppTheme.Sendbird.Custom">
    <item name="sb_module_channel">@style/Module.Channel.Custom</item>
</style>

<style name="Module.Channel.Custom">
    <item name="sb_component_list">@style/Component.List.Channel.Custom</item>
</style>

<style name="Component.List.Channel.Custom">
    <item name="sb_widget_other_user_message">@style/Widget.Sendbird.Message.Other.User.Custom</item>
</style>

<style name="Widget.Sendbird.Message.Other.User.Custom">
    <item name="sb_message_other_text_appearance">@style/SendbirdBody3OnLight04.Custom</item>
</style>

<style name="SendbirdBody3OnLight04.Custom">
    <item name="android:textColor">@color/primary_300</item>
</style>

Apply custom styles

Copy link

Once you've defined custom styles, you can apply them using modules or builders.

class MessageUISampleFragment : ChannelFragment() {
    override fun onCreateModule(args: Bundle): ChannelModule {
        val params = ChannelModule.Params(requireContext(), R.style.AppTheme_Sendbird_Custom)
        return ChannelModule(requireContext(), params)
    }
}

For an in-depth practical demonstration, see our sample code.