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.

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

---

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