Message Template

Define and customize message bubble structure, layout, and behavior using MessageTemplate.

A MessageTemplate defines and customizes both the structure and the behavior of the MessageBubble. It acts as a schema for creating message bubble components, allowing you to manage the appearance and interactions of message bubbles within your application.

When to Use This

• Customize the header, content, footer, bottom, or status info view of a message bubble
• Replace the default bubble layout with a completely custom view
• Add or modify the long-press options on a message bubble
• Create a new template for a custom message type (e.g., a contact card)
• Change how a specific message type (text, image, etc.) renders in the MessageList

Prerequisites

• CometChat Android UI Kit dependency added
• CometChatUIKit.init() called and completed
• A logged-in CometChat user
• Familiarity with the MessageList component

---

Quick Start

1. Get the list of existing message templates from the data source:

Kotlin (XML Views)

val messageTemplates = CometChatUIKit.getDataSource()
    .getMessageTemplates(messageList.additionParameter)

Jetpack Compose

val messageTemplates = CometChatUIKit.getDataSource()
    .getMessageTemplates(additionParameter)

2. Find the template for the message type you want to customize:

Kotlin (XML Views)

for (template in messageTemplates) {
    if (template.type == UIKitConstants.MessageType.TEXT) {
        // Customize text message template
    }
}

Jetpack Compose

for (template in messageTemplates) {
    if (template.type == UIKitConstants.MessageType.TEXT) {
        // Customize text message template
    }
}

3. Customize a view on the matched template:

Kotlin (XML Views)

template.setContentView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.your_custom_layout, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        // Bind your custom view data here
    }
})

Jetpack Compose

template.setContentView { baseMessage, alignment ->
    // Return your custom composable content
    Text(text = (baseMessage as? TextMessage)?.text ?: "")
}

4. Apply the modified templates to the MessageList:

Kotlin (XML Views)

messageList.setTemplates(messageTemplates)

Jetpack Compose

CometChatMessageList(
    user = user,
    templates = messageTemplates
)

---

Core Concepts

MessageBubble Structure

The MessageBubble structure is broken down into these views:

1. Leading view — Sender’s avatar. Left for incoming, right for outgoing.
2. Header view — Sender’s name. Useful in group chats.
3. Content view — Core message content (text, images, videos, etc.).
4. Bottom view — Additional elements like link previews or “load more” buttons.
5. Footer view — Timestamp and delivery/read status.

Template Properties

• Type: setType() maps the template to a CometChatMessage type.
• Category: setCategory() links the template with a message category.

messageTemplate.setType(UIKitConstants.MessageType.CUSTOM)
messageTemplate.setCategory(UIKitConstants.MessageCategory.CUSTOM)

---

Implementation

Header View

Customize the header area above the content view.

Kotlin (XML Views)

template.setHeaderView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return layoutInflater.inflate(R.layout.message_template_header_view, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        val textView = view.findViewById<TextView>(R.id.name_with_status)
        textView.text = baseMessage.sender.name + " • 🗓️ In meeting"
    }
})

Jetpack Compose

template.setHeaderView { baseMessage, alignment ->
    Text(
        text = "${baseMessage.sender.name} • 🗓️ In meeting",
        style = CometChatTheme.typography.caption2Regular,
        color = CometChatTheme.colors.primary
    )
}

Content View

Customize the main content area of the message bubble.

Kotlin (XML Views)

template.setContentView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.image_bubble_content_view, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        val imageBubble = view.findViewById<CometChatImageBubble>(R.id.imageBubble)
        val mediaMessage = baseMessage as MediaMessage
        val attachment = mediaMessage.attachment
        imageBubble.setImageUrl(
            Utils.getFileFromLocalPath(mediaMessage),
            attachment?.fileUrl ?: "",
            attachment?.fileExtension?.equals("gif", ignoreCase = true) ?: false
        )
    }
})

Jetpack Compose

template.setContentView { baseMessage, alignment ->
    val mediaMessage = baseMessage as? MediaMessage
    Column {
        CometChatImageBubble(
            imageUrl = mediaMessage?.attachment?.fileUrl ?: ""
        )
        Text(
            text = "Buy Now",
            textAlign = TextAlign.Center,
            color = CometChatTheme.colors.primary
        )
    }
}

Status Info View

Customize the status info area (delivery/read status indicators).

Kotlin (XML Views)

// Replace status info with a minimal spacer
template.setStatusInfoView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        val view = View(context)
        view.layoutParams = LinearLayout.LayoutParams(1.dp, 12.dp)
        return view
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) { }
})

// Move status content to footer
template.setFooterView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.status_info_layout, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        val tvTime = view.findViewById<TextView>(R.id.time)
        val receipt = view.findViewById<CometChatMessageReceipt>(R.id.receipt)
        if (messageBubbleAlignment == UIKitConstants.MessageBubbleAlignment.RIGHT) {
            receipt.visibility = View.VISIBLE
            receipt.setMessageReceipt(MessageReceiptUtils.MessageReceipt(baseMessage))
        } else {
            receipt.visibility = View.GONE
        }
        tvTime.text = SimpleDateFormat("hh:mm a").format(baseMessage.sentAt * 1000)
    }
})

Jetpack Compose

template.setStatusInfoView { _, _ ->
    Spacer(Modifier.height(12.dp))
}

template.setFooterView { baseMessage, alignment ->
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.End,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = SimpleDateFormat("hh:mm a").format(baseMessage.sentAt * 1000),
            style = CometChatTheme.typography.caption2Regular
        )
        if (alignment == UIKitConstants.MessageBubbleAlignment.RIGHT) {
            CometChatMessageReceipt(message = baseMessage)
        }
    }
}

Bottom View

Extend the bubble with additional elements beneath the content view.

Kotlin (XML Views)

template.setBottomView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.message_template_bottom_view, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        // Bind bottom view data
    }
})

Jetpack Compose

template.setBottomView { baseMessage, alignment ->
    // Custom bottom content
    Text("Link preview or additional info")
}

Footer View

Customize the footer area (timestamp and delivery status).

Kotlin (XML Views)

template.setFooterView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.message_template_footer_view, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        val tvTime = view.findViewById<TextView>(R.id.time)
        tvTime.text = SimpleDateFormat("hh:mm a").format(baseMessage.sentAt * 1000)
    }
})

Jetpack Compose

template.setFooterView { baseMessage, alignment ->
    Text(
        text = SimpleDateFormat("hh:mm a").format(baseMessage.sentAt * 1000),
        style = CometChatTheme.typography.caption2Regular
    )
}

Bubble View

Replace the entire message bubble with a fully custom layout.

Kotlin (XML Views)

template.setBubbleView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.custom_bubble_view, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        // Bind entire custom bubble
    }
})

Jetpack Compose

template.setBubbleView { baseMessage, alignment ->
    Card {
        Column(Modifier.padding(12.dp)) {
            Text(baseMessage.sender.name)
            Text((baseMessage as? TextMessage)?.text ?: "")
        }
    }
}

---

Options

Customize the long-press action menu for a message type.

Kotlin (XML Views)

template.setOptions { context, baseMessage, isLeftAligned ->
    listOf(
        CometChatPopupMenu.MenuItem(
            id = "bookmark",
            name = "Bookmark",
            onClick = { /* handle */ }
        )
    )
}

Jetpack Compose

template.setOptions { context, baseMessage, isLeftAligned ->
    listOf(
        MenuItem(id = "bookmark", name = "Bookmark", onClick = { /* handle */ })
    )
}

---

Creating a New Template

Create a template for a custom message type (e.g., a contact card):

Kotlin (XML Views)

val contactTemplate = CometChatMessageTemplate()
contactTemplate.setType("contact")
contactTemplate.setCategory(UIKitConstants.MessageCategory.CUSTOM)

contactTemplate.setContentView(object : MessagesViewHolderListener() {
    override fun createView(
        context: Context,
        cometChatMessageBubble: CometChatMessageBubble,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment
    ): View {
        return LayoutInflater.from(context).inflate(R.layout.contact_card_bubble, null)
    }

    override fun bindView(
        context: Context, view: View, baseMessage: BaseMessage,
        messageBubbleAlignment: UIKitConstants.MessageBubbleAlignment,
        viewHolder: RecyclerView.ViewHolder, list: List<BaseMessage>, i: Int
    ) {
        val customMessage = baseMessage as CustomMessage
        val name = view.findViewById<TextView>(R.id.contact_name)
        name.text = customMessage.customData?.getString("name") ?: ""
    }
})

// Add to existing templates
val templates = CometChatUIKit.getDataSource()
    .getMessageTemplates(messageList.additionParameter)
templates.add(contactTemplate)
messageList.setTemplates(templates)

Jetpack Compose

val contactTemplate = CometChatMessageTemplate()
contactTemplate.setType("contact")
contactTemplate.setCategory(UIKitConstants.MessageCategory.CUSTOM)

contactTemplate.setContentView { baseMessage, alignment ->
    val customMessage = baseMessage as? CustomMessage
    val name = customMessage?.customData?.optString("name") ?: ""
    Card {
        Row(Modifier.padding(12.dp), verticalAlignment = Alignment.CenterVertically) {
            CometChatAvatar(name = name)
            Spacer(Modifier.width(8.dp))
            Text(name)
        }
    }
}

val templates = CometChatUIKit.getDataSource()
    .getMessageTemplates(additionParameter)
    .toMutableList()
templates.add(contactTemplate)

CometChatMessageList(
    user = user,
    templates = templates
)

---

Next Steps

Message List

Display messages in a conversation

Message Bubble Styling

Style individual bubble types

Component Styling

Detailed styling reference

View Slots

Replace specific UI regions