Customize the message object UI in the chat screen

A long tab on a message object in the chat view can reveal a list of action items that can be perform on the message. Customize the message object UI in the Chat View using the ChannelFragment class.

This guide demonstrates how to:

Add or remove a context menu item.

Create a custom fragment that extends the ChannelFragment class and override the makeMessageContextMenu method which returns a list of DialogListItem objects that represent the action items. Thus, add a new DialogListItem object to the list for an additional menu item.

To remove an action item, override the makeMessageContextMenu method and remove the menu item from the list by specifying its key in the filter.

Once you've created the custom fragment, set it in the BaseApplication class.

The following code snippets show how to add or remove a Animation button from the context menu.

CustomChannelFragment.ktBaseApplication.kt

// Add an action item such as translation.
class CustomChannelFragment : ChannelFragment() {
    override fun makeMessageContextMenu(message: BaseMessage): MutableList<DialogListItem> {
        val menus = super.makeMessageContextMenu(message)
        menus.add(DialogListItem(R.string.translate_message, com.sendbird.uikit.R.drawable.menu_icon, false, false))
        return menus
    }

    override fun onMessageContextMenuItemClicked(
        message: BaseMessage,
        view: View,
        position: Int,
        item: DialogListItem
    ): Boolean {
        if (super.onMessageContextMenuItemClicked(message, view, position, item)) {
            return true
        } else {
            if (item.key == R.string.translate_message) {
                // TODO : Add your custom action
                return true
            }
        }
        return false
    }
}

CustomChannelFragment.ktBaseApplication.kt

// Remove an action item.
class CustomChannelFragment : ChannelFragment() {
    override fun makeMessageContextMenu(message: BaseMessage): List<DialogListItem> {
        val menus = super.makeMessageContextMenu(message).filter {
            it.key != R.string.copy_message
        }
        return menus
    }
}

On this page

Add or remove a context menu item

Add an action item Remove an action item

Sample app