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.

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

​Style

​ViewModel

​Next Steps