Skip to main content

Customizing Message Display Styles

Global IM UIKit controls the display style of messages in the conversation UI through "Message Display Templates." Apps can modify the display templates for specific message types as needed to achieve personalized message display configurations.

  • The SDK provides default display templates for built-in message types (see Message Type Overview) that need to be displayed in the conversation UI. Apps can create custom templates to replace the default ones.
  • Custom message types (see Custom Message Types) created by apps do not have corresponding display templates by default. If an app needs to display custom message types in the conversation UI, it must create the corresponding display templates for the SDK.
tip

To display custom message types in the conversation UI, apps must create the corresponding display templates; otherwise, the SDK cannot display these messages correctly.

Modifying Message UI via Style Resources​

You can replace the style resources provided by Global IM UIKit to adjust the background images, text colors, and font sizes of built-in messages. This is suitable for scenarios requiring light customization of the conversation UI.

Replacing Message Background Images​

In the Global IM UIKit conversation UI, each message has a bubble background. Blue bubbles represent sent messages, and white bubbles represent received messages.

Global IM UIKit references multiple 9-patch files in the base class BaseMessageItemProvider. You can create files with the same names in your app's res/drawable-xhdpi/ directory to replace the default .9.png image resources and change the appearance of message bubbles.

Resource Path and NameDescription
res/drawable-xhdpi/rc_message_item_right_bg.9.pngRight bubble, the first display bubble for sent messages
res/drawable-xhdpi/rc_message_item_right_child_bg.9.pngRight bubble, the display bubble for sent messages
res/drawable-xhdpi/rc_message_item_left_bg.9.pngLeft bubble, the first display bubble for received messages
res/drawable-xhdpi/rc_message_item_left_child_bg.9.pngLeft bubble, the display bubble for received messages
res/drawable-xhdpi/rc_message_item_left_send_bg.9.pngLeft bubble, the first display bubble for sent messages
res/drawable-xhdpi/rc_message_item_left_send_child_bg.9.pngLeft bubble, the display bubble for sent messages

Modifying Font Color or Size for Built-in Text Messages​

You can customize the font color or size of built-in text messages in Global IM UIKit.

Copy the rc_text_message_item.xml resource file provided by Global IM UIKit to the res/layout directory of your app, and modify the font size and color in the layout file to your custom values.

Replacing Default Display Templates for Built-in Messages​

Global IM UIKit encapsulates a display template for each type of message. All message display templates inherit from BaseMessageItemProvider.

If you need to change the display effect of SDK built-in messages with higher customization requirements, you can inherit BaseMessageItemProvider, create a new message display template, and provide it to the SDK to replace the default template.

Default Built-in Message Display Templates​

Message TypeTemplate Class Name
TextMessageTextMessageItemProvider.class
ImageMessageImageMessageItemProvider.class
HQVoiceMessageHQVoiceMessageItemProvider.class
FileMessageFileMessageItemProvider.class
SightMessageSightMessageItemProvider.class
StickerMessageStickerMessageItemProvider.class
GIFMessageGIFMessageItemProvider.class
CombineV2MessageCombineV2MessageItemProvider.class
InformationNotificationMessageInformationNotificationMessageItemProvider.class
GroupNotificationMessageGroupNotificationMessageItemProvider.class

Step 1: Create a Custom Template​

Here’s an example of customizing the display template for text messages:

  1. Create a custom text message display layout file my_text_message.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/my_text"
        style="@style/TextStyle.Alignment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:textColor="@android:color/holo_green_dark"
        android:textColorLink="@android:color/holo_red_dark"
        android:fontFamily="sans-serif"
        android:textSize="14sp"
        android:maxWidth="223dp" />

  2. Create a custom template MyTextMessageProvider, inheriting BaseMessageItemProvider, specify the message type in <> as TextMessage, and implement all abstract methods as prompted by Android Studio.

    public class MyTextMessageProvider extends BaseMessageItemProvider<TextMessage> {
        public MyTextMessageProvider() {
        }

        /**
         * Generate a ViewHolder based on the custom layout file.
         */
        @Override
        protected ViewHolder onCreateMessageContentViewHolder(ViewGroup viewGroup, int i) {
            View textView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.my_text_message, viewGroup, false);
            return new ViewHolder(viewGroup.getContext(), textView);
        }

        /**
         * Set the values of the controls in the layout file based on the message content.
         */
        @Override
        protected void bindMessageContentViewHolder(ViewHolder viewHolder, ViewHolder viewHolder1, TextMessage textMessage, UiMessage uiMessage, int i, List<UiMessage> list, IViewProviderListener<UiMessage> iViewProviderListener) {
            TextView textView = viewHolder.getView(R.id.my_text);
            textView.setText(textMessage.getContent());
        }

        /**
         * This method is called when a control in the custom layout is clicked. You can implement click logic here.
         * This example ignores click events.
         */
        @Override
        protected boolean onItemClick(ViewHolder viewHolder, TextMessage textMessage, UiMessage uiMessage, int i, List<UiMessage> list, IViewProviderListener<UiMessage> iViewProviderListener) {
            return false;
        }

        /**
         * Based on the message type, return whether this template should display the message.
         * This example indicates that the template only handles text messages.
         */
        @Override
        protected boolean isMessageViewType(MessageContent messageContent) {
            return messageContent instanceof TextMessage;
        }

        /**
         * When this type of message is the last message in a conversation, this method returns the description to be displayed in the conversation list.
         * This example returns the content of the text message.
         */
        @Override
        public Spannable getSummarySpannable(Context context, TextMessage textMessage) {
            return new SpannableString(textMessage.getContent());
        }
    }

Step 2: Replace the Default Template​

After creating a custom template, you need to call the following method to replace the SDK's default message display template. Once replaced, the SDK will automatically use the custom template to render messages of that type.

  • Code Example

    Here’s an example using the custom template MyTextMessageProvider.

    ConfigCenter.getChatConfig().replaceMessageProvider(TextMessageItemProvider.class, new MyTextMessageProvider())

  • Replacement Method:

    ConfigCenter.getChatConfig().replaceMessageProvider(Class oldProviderClass, IMessageProvider provider)
    ParameterDescription
    oldProviderClassThe class name of the SDK's default message display template (refer to Default Built-in Message Display Templates).
    providerThe custom message display template object.
Last updated on