Custom Message Types

IMKit supports custom message types (distinct from built-in message types) and allows customization of message display in the IMKit SDK chat UI.

Creating Custom Message Types

In addition to using SDK built-in message types, you can customize messages based on your business requirements.

tip

For instructions on creating custom message types, refer to the IMLib SDK documentation: Custom Message Types.

Custom messages will only be displayed in IMKit's chat UI if their persistentFlag is set to one of the following values:

• MessageTag.ISCOUNTED
• MessageTag.ISPERSISTED

If a custom message type includes either of these properties, you must create a display template for it. The IMKit SDK will use this template to render the message. Otherwise, the message will be displayed as This message type is not supported in the current version.

Creating and Registering Display Templates for Custom Messages

The following steps are largely similar to modifying the display style of RC's preset messages. For reference, you may also review Replacing Default Display Templates for Built-in Messages to understand how default message display templates are implemented for built-in message types and how to create custom message display templates.

Step 1: Create a Custom Message Template

All message display templates inherit from BaseMessageItemProvider. Your app needs to subclass BaseMessageItemProvider to create a custom message display template class.

1. Create a subclass of BaseMessageItemProvider<CustomMessage>, such as CustomMessageProvider.

   Below is a complete example of creating a message display template CustomMessageProvider:

   public class CustomMessageProvider extends BaseMessageItemProvider<CustomMessage> {
   
     public CustomMessageProvider(){
       mConfig.showReadState = true; // Modify template properties. Here, we enable read receipt display for one-to-one chats.
       mConfig.xxx = ...; // Other template property configurations are omitted here.
     }
         /**
         * Create ViewHolder
         * @param parent Parent ViewGroup
         * @param viewType View type
         * @return ViewHolder
         */
   
       @Override
       protected ViewHolder onCreateMessageContentViewHolder(ViewGroup parent, int viewType) {
           View view =
                   LayoutInflater.from(parent.getContext())
                           .inflate(R.layout.xxx, parent, false);
           return new ViewHolder(parent.getContext(), view);
       }
   
       /**
         * Set values for views in the message UI
         * @param holder ViewHolder
         * @param parentHolder Parent layout's ViewHolder
         * @param t The message corresponding to this template
         * @param uiMessage {@link UiMessage}
         * @param position Message position
         * @param list Message list
         * @param listener Click event listener for ViewModel. If a child view's click event requires ViewModel handling, use this listener for callbacks.
         */
       @Override
       protected void bindMessageContentViewHolder(ViewHolder holder, ViewHolder parentHolder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
   
       }
   
         /**
         * Handle click events for messages in the chat UI
         * @param holder ViewHolder
         * @param t Custom message
         * @param uiMessage {@link UiMessage}
         * @param position Position
         * @param list List data
         * @param listener Click event listener for ViewModel. If a child view's click event requires ViewModel handling, use this listener for callbacks.
         * @return Whether the click event is consumed
         */
       @Override
       protected boolean onItemClick(ViewHolder holder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
           return false;
       }
       /** Handle long-press events for messages in the chat UI */
       @Override
       protected boolean onItemLongClick(ViewHolder holder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
           return false;
       }
       /**
         * Determine whether this template should render the given message type based on message content
         *
         * @param messageContent Message content
         * @return Whether this template handles the message type.
         */
       @Override
       protected boolean isMessageViewType(MessageContent messageContent) {
           return messageContent instanceof CustomMessage;
       }
   
         /**
         * Content to display in the conversation list when the last message of a conversation is of this type.
         * For example: An image message might display "Image" in the conversation list. Return the corresponding string resource.
         * @param context Context
         * @param t Message content
         * @return String resource to display in the conversation list
         */
       @Override
       public Spannable getSummarySpannable(Context context, CustomMessage customMessage) {
           return new SpannableString("Content to display in conversation list");
       }
   }

2. The SDK provides a message display configuration class MessageItemProviderConfig with the following properties:

   Message Display Template Property	Default Value	Description
   showPortrait	true	Whether to display avatars.
   centerInHorizontal	false	Whether to horizontally center message content.
   showWarning	true	Whether to display send failure warnings.
   showProgress	true	Whether to display send progress.
   showSummaryWithName	true	Whether to display sender names in conversation list previews.
   showReadState	false	Whether to display read receipts next to messages in one-to-one chats.
   showContentBubble	true	Whether to display message bubbles.

   In the custom template's constructor, you can modify these properties via the base class's MessageItemProviderConfig variable mConfig. Example:

   public CustomMessageProvider(){
       mConfig.showReadState = true; // Modify template properties. Here, we enable read receipt display for one-to-one chats.
       mConfig.xxx = ...; // Other template property configurations are omitted here.
     }

3. You must implement isMessageViewType to bind the template to the target message type by passing the MessageContent of the message type to be displayed.

4. To handle message click or long-press events, implement onItemClick and onItemLongClick. Your app can listen for these events via the chat UI's onMessageClick and onMessageLongClick callbacks. See Page Event Listeners.

Step 2: Register the Display Template

After initializing the SDK, register the custom message display template with the SDK.

RongConfigCenter.conversationConfig().addMessageProvider(new CustomMessageProvider());