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.

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

Customize messages using the params of MessageListComponent.

public class CustomChannelFragment extends ChannelFragment {
    @Override
    protected void onConfigureParams(@NonNull ChannelModule module, @NonNull Bundle args) {
        super.onConfigureParams(module, args);
        final TextUIConfig myMessageUIConfig = new TextUIConfig.Builder()
                .setTextColor(Color.BLACK)
                .setCustomFontRes(R.font.your_custom_font)
                .setTextSize(textSizePx)
                .build();
        final TextUIConfig otherMessageUIConfig = new TextUIConfig.Builder()
                .setTextColor(Color.BLACK)
                .setCustomFontRes(R.font.your_custom_font)
                .setTextSize(textSizePx)
                .build();
        module.getMessageListComponent().getParams()
                .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.

final MessageListAdapter adapter = new MessageListAdapter(true);
final MessageUIConfig messageUIConfig = new MessageUIConfig();
final TextUIConfig myMessageUIConfig = new TextUIConfig.Builder()
        .setTextColor(Color.BLACK)
        .setCustomFontRes(R.font.your_custom_font)
        .setTextSize(textSizePx)
        .build();
final TextUIConfig otherMessageUIConfig = new TextUIConfig.Builder()
        .setTextColor(Color.BLACK)
        .setCustomFontRes(R.font.your_custom_font)
        .setTextSize(textSizePx)
        .build();
messageUIConfig.getMyMessageTextUIConfig().apply(myMessageUIConfig);
messageUIConfig.getOtherMessageTextUIConfig().apply(otherMessageUIConfig);
adapter.setMessageUIConfig(messageUIConfig);

final ChannelFragment fragment = new ChannelFragment.Builder(channelUrl)
        .setMessageListAdapter(adapter)
        .build();