Message Bubble Factory

Customize message bubble structure, layout, and behavior with BubbleFactory.

Renamed in v6. v5’s MessageTemplate API (CometChatMessageTemplate, setTemplates, setType, setCategory, setBubbleView, setMessageReceipt) does not ship in com.cometchat:chatuikit-kotlin-android:6.0.5 — verified against the published artifact. Bubble customization is now BubbleFactory. If you are migrating, see Upgrading from v5.

A BubbleFactory decides how one message category/type is rendered inside the MessageList. You subclass it, say which messages it handles, and supply the view. Everything you do not override keeps the kit’s default rendering.

When to Use This

• Render a custom message type (a contact card, an order receipt, a poll)
• Replace how a built-in type renders (text, image, video)
• Replace the whole bubble rather than just its content area
• Add an avatar / header / footer / thread view to a bubble

Prerequisites

• CometChat Android UI Kit dependency added
• CometChatUIKit.initFromSettings() completed and a user logged in
• A CometChatMessageList on screen

Quick Start

Kotlin (XML Views)

ContactBubbleFactory.kt

import android.content.Context
import android.view.View
import androidx.recyclerview.widget.RecyclerView
import com.cometchat.chat.constants.CometChatConstants
import com.cometchat.chat.models.BaseMessage
import com.cometchat.uikit.core.constants.UIKitConstants
import com.cometchat.uikit.kotlin.presentation.shared.messagebubble.BubbleFactory

class ContactBubbleFactory : BubbleFactory() {

    // WHICH messages this factory handles.
    override fun getCategory(): String = CometChatConstants.CATEGORY_CUSTOM
    override fun getType(): String = "contact"

    // Called ONCE per recycled view. The message is NOT available yet — only the factory key.
    override fun createContentView(context: Context): View = ContactCardView(context)

    // Called for EVERY message shown in that view. Bind your data here.
    override fun bindContentView(
        view: View,
        message: BaseMessage,
        alignment: UIKitConstants.MessageBubbleAlignment,
        holder: RecyclerView.ViewHolder?,
        position: Int
    ) {
        (view as ContactCardView).bind(message)
    }
}

Register it on the list:

MessageActivity.kt

messageList.setBubbleFactories(listOf(ContactBubbleFactory()))

Jetpack Compose

ContactBubbleFactory.kt

import androidx.compose.runtime.Composable
import com.cometchat.chat.constants.CometChatConstants
import com.cometchat.chat.models.BaseMessage
import com.cometchat.uikit.core.constants.UIKitConstants
import com.cometchat.uikit.compose.presentation.shared.messagebubble.BubbleFactory
import com.cometchat.uikit.compose.presentation.shared.messagebubble.CometChatMessageBubbleStyle
import com.cometchat.uikit.compose.shared.formatters.CometChatTextFormatter

class ContactBubbleFactory : BubbleFactory {

    override fun getCategory(): String = CometChatConstants.CATEGORY_CUSTOM
    override fun getType(): String = "contact"

    // Compose returns a composable lambda — there is no create/bind split.
    override fun getContentView(
        message: BaseMessage,
        alignment: UIKitConstants.MessageBubbleAlignment,
        style: CometChatMessageBubbleStyle,
        textFormatters: List<CometChatTextFormatter>
    ): @Composable () -> Unit = {
        ContactCard(message = message)
    }
}

Pass it to the list:

CometChatMessageList(
    user = user,
    bubbleFactories = listOf(ContactBubbleFactory())
)

Core Concepts

The factory key is category + type

getCategory() and getType() are how the list decides which factory renders a message. Use the SDK constants for built-ins (CometChatConstants.CATEGORY_MESSAGE with MESSAGE_TYPE_TEXT, MESSAGE_TYPE_IMAGE, …) and CATEGORY_CUSTOM with your own type string for custom messages. A message with no matching factory falls back to the kit’s own rendering.

create/bind is a recycling contract (Views)

createContentView() runs once per recycled view and the message is deliberately not available there — only the factory key. bindContentView() runs every time a message is displayed in that view. Building views in bind (or caching per-message state in create) is the usual cause of bubbles showing the wrong message after scrolling.

Compose has no such split: getContentView() receives the message and returns a composable.

Content view vs whole bubble

You override	You get
createContentView / bindContentView (Views) · getContentView (Compose)	the bubble’s content area, inside the kit’s bubble chrome
createBubbleView / bindBubbleView (Views) · getBubbleView (Compose)	the entire bubble — the kit draws no chrome, and the content hooks are not called

Optional view slots

All are optional; return null (Views) or leave the default (Compose) to keep the kit’s own.

Slot	Views	Purpose
Leading	createLeadingView / bindLeadingView	typically the avatar
Header	createHeaderView / bindHeaderView	above the bubble (e.g. sender name)
Reply	createReplyView / bindReplyView	the quoted-reply preview
Bottom	createBottomView / bindBottomView	below the content (e.g. reactions row)
Status info	createStatusInfoView / bindStatusInfoView	timestamp + receipts
Thread	createThreadView / bindThreadView	the thread-replies indicator
Style	getBubbleStyle(...)	per-message bubble style override

Creating a new custom message type

1. Send the message with the SDK using CometChatConstants.CATEGORY_CUSTOM and your own type string (see Custom Messages).
2. Write a BubbleFactory whose getCategory()/getType() match exactly.
3. Register it with setBubbleFactories(...) (Views) or the bubbleFactories parameter (Compose).

Messages of a type with no registered factory render with the kit’s default custom-message bubble, so register the factory on every screen that shows those messages.

Next Steps

• Message List — where factories are registered
• Message Bubble Styling — styling without replacing views
• Upgrading from v5 — the MessageTemplate → BubbleFactory move