Threaded Messages Header - CometChat Docs

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)
Jetpack Compose

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)

CometChatThreadHeader(
    parentMessage = parentMessage
)

Quick Start

Kotlin (XML Views)
Jetpack Compose

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)
}

@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 — see Thread Subscription below.

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
`setOnThreadSubscriptionChange { }`	`onSubscriptionToggle = { }`	Subscription-state change callback
—	`threadSubscriptionView = { }`	Replace the bell with a custom composable

Thread Subscription

On Android the subscription bell belongs to CometChatThreadHeader — it renders as a trailing control on this component’s reply-count row. Thread subscription is enabled by default from v6.1.0; on v6.0.x the bell renders only after UIKitSettings.setEnableThreadSubscription(true). It flips optimistically on tap, reverts with a toast if the server rejects the change, and stays in step with the message list’s Subscribe / Unsubscribe action sheet option.

Kotlin (XML Views)
Jetpack Compose

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

// Hide the bell on this screen
threadHeader.setThreadSubscriptionVisibility(View.GONE)

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

CometChatThreadHeader(
    parentMessage = parentMessage,
    hideThreadSubscription = false,      // true to hide the built-in bell
    isSubscribed = null,                 // null = seed from parentMessage.isThreadSubscribed()
    onSubscriptionToggle = { isSubscribed -> },
    threadSubscriptionView = null        // or your own composable replacing the bell
)

To place the bell in the thread screen’s top title bar instead (as the CometChat sample apps do), Compose exposes it standalone — hide this component’s built-in bell and host ThreadSubscriptionBell in your own top bar:

TopAppBar(
    title = { Text(stringResource(R.string.thread)) },
    actions = { ThreadSubscriptionBell(parentMessage = parentMessage) }
)

CometChatThreadHeader(
    parentMessage = parentMessage,
    hideThreadSubscription = true   // the bell lives in the top bar instead
)

This component’s own threadSubscriptionView replaces the bell in the reply-count row. It is the escape hatch for putting your own control there — it does not move the bell to the top bar. The same subscribe/unsubscribe action is also offered as a message option on CometChatMessageList, hidden independently with setThreadSubscriptionOptionVisibility(View.GONE) — an integrator may want one surface and not the other. See the Thread Subscription guide for the full feature.

Style

Kotlin (XML Views)
Jetpack Compose

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)

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)
Jetpack Compose

threadHeader.setViewModel(viewModel)

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

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​SDK Events (Real-Time, Automatic)

​Functionality

​Thread Subscription

​Style

​ViewModel

​Next Steps