Customize Messages (Android)

Last updated: 2020-03-13 15:24:01

    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";
    }

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help