Customize messages

In order to customize messages in UIKit, you can use the MessageUIConfig class. MessageUIConfig allows you to change the UI of texts displayed in channels, which include text messages, reply messages, and user nicknames. Within a single message, you can also modify the text and the background color through TextUIConfig. The TextUIConfig class lets you customize each text's font, size, background color, and style within MessageUIConfig.

There are three ways to customize messages as shown in the codes below. You can do so through either ChannelFragment.Builder, getMessageListComponent().getParams(), or setMessageListAdapter with MessageUIConfig.

Customize messages using the builder of ChannelFragment.

KotlinJava

val myMessageUIConfig = TextUIConfig.Builder()
    .setTextColor(Color.BLACK)
    .setCustomFontRes(R.font.your_custom_font)
    .setTextSize(textSizePx)
    .build()
val otherMessageUIConfig = TextUIConfig.Builder()
    .setTextColor(Color.BLACK)
    .setCustomFontRes(R.font.your_custom_font)
    .setTextSize(textSizePx)
    .build()
val fragment = ChannelFragment.Builder(channelUrl)
    .setMessageTextUIConfig(myMessageUIConfig, otherMessageUIConfig)
    .build()

Customize messages using the params of MessageListComponent.

KotlinJava

class CustomChannelFragment : ChannelFragment() {
    override fun onConfigureParams(module: ChannelModule, args: Bundle) {
        super.onConfigureParams(module, args)
        val myMessageUIConfig = TextUIConfig.Builder()
            .setTextColor(Color.BLACK)
            .setCustomFontRes(R.font.your_custom_font)
            .setTextSize(textSizePx)
            .build()
        val otherMessageUIConfig = TextUIConfig.Builder()
            .setTextColor(Color.BLACK)
            .setCustomFontRes(R.font.your_custom_font)
            .setTextSize(textSizePx)
            .build()
        module.messageListComponent.params
            .setMessageTextUIConfig(myMessageUIConfig, otherMessageUIConfig)
    }
}

If you want to use MessageUIConfig, you can set your own custom message to MessageListAdapter. To customize the individual properties of TextUIConfig within MessageUIConfig, use the apply() method to apply the changes to the MessageUIConfig class.

KotlinJava

val adapter = MessageListAdapter(true)
val messageUIConfig = MessageUIConfig()
val myMessageUIConfig = TextUIConfig.Builder()
    .setTextColor(Color.BLACK)
    .setCustomFontRes(R.font.your_custom_font)
    .setTextSize(textSizePx)
    .build()
val otherMessageUIConfig = TextUIConfig.Builder()
    .setTextColor(Color.BLACK)
    .setCustomFontRes(R.font.your_custom_font)
    .setTextSize(textSizePx)
    .build()
messageUIConfig.myMessageTextUIConfig.apply(myMessageUIConfig)
messageUIConfig.otherMessageTextUIConfig.apply(otherMessageUIConfig)
adapter.messageUIConfig = messageUIConfig
val fragment = ChannelFragment.Builder(channelUrl)
    .setMessageListAdapter(adapter)
    .build(

Sample app