Chat UIKit Android v3

Chat UIKit Android

Chat UIKit

Android

Version 3

Customize message UI

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

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 type	Value
`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

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

Step 1. Create a new ViewHolder

Create a new ViewHolder that inherits from the GroupChannelMessageViewHolder.

Kotlin

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

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.

Kotlin

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

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

Using MessageListUIParams

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.

Kotlin

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

Using MessageUIConfig

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

Property	Type	Description
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

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.

Kotlin

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

UIKit provides various theme attributes related to the messaging UI.

Sample style definitions

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

XML

<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

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.

XML

<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

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

Kotlin

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.

On this page

UIKit message types Replace the default UI

Step 1. Create a new ViewHolder Step 2. Create and register a custom adapter

Advanced customizations

Using MessageListUIParams Using MessageUIConfig Using themes

Sample app