TUIKit renders basic messages internally, and therefore you can modify message display styles through properties, or you can create custom message styles.

Basic Message Types

For basic message types in TUIKit, see MessageInfo.java.

Message Type	Display
Text
Image
Audio
Video
File

Custom Messages

In addition to using the basic message types, you can customize messages based on your business needs.
This document uses a hypertext that jumps to the browser as an example to guide you through the message customization process.

Creating a custom message

The MessageInfoUtil class helps you implement various message types including custom messages. For example, you can create a custom message in a JSON string:

MessageInfo info = MessageInfoUtil.buildCustomMessage("{\"text\": \"Welcome to IM! Learn more >>\",\"url\": \"https://cloud.tencent.com/product/im"}");

Sending a custom message

You can send a custom message through a ChatLayout instance:

chatLayout.sendMessage(info)

Rendering custom messages

You can define, parse, and display custom messages based on your business needs. These messages are then passed through to the recipient by TUIKit, and TUIKit calls the callback that you implemented to render the messages. The callback normally includes the following steps:

1. Parse the custom message.
2. Create a display view based on the parsing result.
3. Add the created view to a parent container in TUIKit.
4. Implement the interaction logic of the view.

The following figure shows the process of rendering a custom message:

TUIKit obtains the type of the custom message internally. TUIKit notifies you when this message is rendered and calls the layout and implementation logic. Therefore, you only need to pass the implemented IOnCustomMessageDrawListener into TUIKit.

// Set the callback for custom message rendering
messageLayout.setOnCustomMessageDrawListener(new CustomMessageDraw());

Sample code

The following sample code shows the full process of customizing a message. You can also download the complete demo.

public static class CustomMessageDraw implements IOnCustomMessageDrawListener {

    /**
         * This method is called when a custom message is rendered. The method creates a custom message and implements the interaction logic.
         * @param parent Customize the parent view of the custom message. To do this, you need to add the view of the custom message to parent.
         * @param info Information in the message
         */
    @Override
    public void onDraw(ICustomMessageViewGroup parent, MessageInfo info) {
        View view = null;
        // Obtain the JSON data of the custom message
        TIMCustomElem elem = (TIMCustomElem) info.getTIMMessage().getElement(0);
        // Parse the custom JSON data into a bean instance
        final CustomMessageData customMessageData = new Gson().fromJson(new String(elem.getData()), CustomMessageData.class);
        // Create different custom message display views through types
        switch(customMessageData.type) {
            case CustomMessageData.TYPE_HYPERLINK:
                view = LayoutInflater.from(DemoApplication.instance()).inflate(R.layout.test_custom_message_layout1, null, false);
                // Add the view of the custom message to the parent container in TUIKit
                parent.addMessageContentView(view);
                break;
            case CustomMessageData.TYPE_PUSH_TEXT_VIDEO:
                view = LayoutInflater.from(DemoApplication.instance()).inflate(R.layout.test_custom_message_layout2, null, false);
                // Add the view of the custom message to the parent container in TUIKit
                parent.addMessageItemView(view);
                break;
        }

        // Implement the view of the custom message. This example displays the text and implements hyperlink redirection.
        TextView textView = view.findViewById(R.id.test_custom_message_tv);
        textView.setText(customMessageData.text);
        textView.setClickable(true);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setAction("android.intent.action.VIEW");
                Uri content_url = Uri.parse(customMessageData.url);
                intent.setData(content_url);
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                DemoApplication.instance().startActivity(intent);
            }
        });
    }
}

/**
 * Define the bean entity of the custom message, which can be converted to and from the JSON format
 */
public static class CustomMessageData {
    // Hypertext, which redirects to a Webview when clicked
    final static int TYPE_HYPERLINK = 1;
    // Video + description
    final static int TYPE_PUSH_TEXT_VIDEO = 2;
    // Custom message, which can be of various types depending on business needs
    int type = TYPE_HYPERLINK;
    String text = "Welcome to IM! Learn more >>";
    String url = "https://intl.cloud.tencent.com/document/product/269?from_cn_redirect=1";
}