Threaded Messages Header

Displays the parent message bubble and reply count for a threaded conversation.

CometChatThreadHeader renders the parent message bubble and reply count for a threaded conversation. It requires a parent message to display.

---

Where It Fits

CometChatThreadHeader is a header component for threaded message views. Wire it above a CometChatMessageList and CometChatMessageComposer to build a complete threaded conversation layout.

Kotlin (XML Views)

activity_thread.xml

<com.cometchat.uikit.kotlin.presentation.threadheader.ui.CometChatThreadHeader
    android:id="@+id/thread_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

val threadHeader = findViewById<CometChatThreadHeader>(R.id.thread_header)
threadHeader.setParentMessage(parentMessage)

Jetpack Compose

CometChatThreadHeader(
    parentMessage = parentMessage
)

---

Quick Start

Kotlin (XML Views)

Add to your layout XML:

<com.cometchat.uikit.kotlin.presentation.threadheader.ui.CometChatThreadHeader
    android:id="@+id/thread_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Set the parent message — this is required:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_thread)

    val threadHeader = findViewById<CometChatThreadHeader>(R.id.thread_header)
    threadHeader.setParentMessage(baseMessage)
}

Jetpack Compose

@Composable
fun ThreadScreen() {
    CometChatThreadHeader(
        parentMessage = baseMessage
    )
}

Prerequisites: CometChat SDK initialized with CometChatUIKit.init(), a user logged in, and the UI Kit dependency added.

---

Actions and Events

Callback Methods

CometChatThreadHeader is a display-only header. It does not expose component-specific callbacks like setOnItemClick or setOnError. The one interactive element is the subscription bell (below), which reports state changes through its own callback.

Subscription Bell (onThreadSubscriptionChange / onSubscriptionToggle)

When thread subscription is enabled (UIKitSettings.setEnableThreadSubscription(true)), the header renders a subscription bell as a trailing control on the reply-count bar. It flips optimistically on tap, reverts with a toast on failure, and stays in sync with the message list’s Subscribe/Unsubscribe option automatically.

Kotlin (XML Views)

// Observe state changes
threadHeader.setOnThreadSubscriptionChange { isSubscribed ->
    Log.d(TAG, "Thread subscribed: $isSubscribed")
}

// Hide the bell (e.g. to host your own control in the activity's title bar)
threadHeader.setThreadSubscriptionVisibility(View.GONE)

Visibility can also be set in XML via app:cometchatThreadSubscriptionVisibility.

Jetpack Compose

CometChatThreadHeader(
    parentMessage = parentMessage,
    hideThreadSubscription = false,      // true to hide the built-in bell
    isSubscribed = null,                 // null = derive from the SDK's state store
    onSubscriptionToggle = { isSubscribed -> },
    threadSubscriptionView = null        // or your own composable replacing the bell
)

The bell is also available standalone as the public ThreadSubscriptionBell(parentMessage) composable, so you can hide the header’s and host it in your own top bar.

SDK Events (Real-Time, Automatic)

The component listens to SDK events internally via its ViewModel. No manual setup needed.

SDK Listener	Internal behavior
Message edited	Updates the parent message bubble
Message deleted	Updates the parent message bubble
Reply count changed	Updates the reply count indicator

---

Functionality

Method (Kotlin XML)	Compose Parameter	Description
setParentMessage(message)	parentMessage = message	Set the parent message (required)
setUser(user)	user = user	Set the user context
setGroup(group)	group = group	Set the group context
setReactionVisibility(View.GONE)	hideReactions = true	Toggle reactions on parent bubble
setAvatarVisibility(View.GONE)	hideAvatar = true	Toggle avatar visibility
setReceiptsVisibility(View.GONE)	hideReceipts = true	Toggle read receipts
setReplyCountVisibility(View.GONE)	hideReplyCount = true	Toggle reply count text
setThreadSubscriptionVisibility(View.GONE)	hideThreadSubscription = true	Toggle the subscription bell (renders only when thread subscription is enabled)
setOnThreadSubscriptionChange { }	onSubscriptionToggle = { }	Subscription-state change callback
—	threadSubscriptionView = { }	Replace the bell with a custom composable

---

Style

Kotlin (XML Views)

Define a custom style in themes.xml:

themes.xml

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomThreadHeaderStyle" parent="CometChatThreadHeaderStyle">
    <item name="cometchatThreadHeaderOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
    <item name="cometchatThreadHeaderIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
    <item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>
    <item name="cometchatThreadHeaderReplyCountTextColor">#F76808</item>
    <item name="cometchatThreadHeaderReplyCountBackgroundColor">#FEEDE1</item>
</style>

threadHeader.setStyle(R.style.CustomThreadHeaderStyle)

Jetpack Compose

CometChatThreadHeader(
    parentMessage = baseMessage,
    style = CometChatThreadHeaderStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1),
        replyCountTextColor = Color(0xFFF76808),
        replyCountBackgroundColor = Color(0xFFFEEDE1)
    )
)

See Component Styling for the full reference.

---

ViewModel

val viewModel = ViewModelProvider(this)
    .get(CometChatThreadHeaderViewModel::class.java)

Kotlin (XML Views)

threadHeader.setViewModel(viewModel)

Jetpack Compose

CometChatThreadHeader(
    parentMessage = baseMessage,
    threadHeaderViewModel = viewModel
)

See ViewModel & Data for state observation and custom repositories.

---

Next Steps

Message List

Display messages in a conversation

Message Header

Display user/group info in the toolbar

Message Composer

Rich input for sending messages

Conversations

Browse recent conversations