Message Header - CometChat Docs

CometChatMessageHeader is a header bar component that sits at the top of a chat screen, displaying the avatar, name, and status of the user or group in the conversation.

Where It Fits

CometChatMessageHeader sits at the top of a chat screen. Wire it alongside CometChatMessageList and CometChatMessageComposer to build a complete messaging layout.

Kotlin (XML Views)
Jetpack Compose

activity_chat.xml

<com.cometchat.uikit.kotlin.presentation.messageheader.ui.CometChatMessageHeader
    android:id="@+id/message_header"
    android:layout_width="match_parent"
    android:layout_height="56dp" />

val messageHeader = findViewById<CometChatMessageHeader>(R.id.message_header)
messageHeader.setUser(user)

CometChatMessageHeader(
    user = user
)

Quick Start

Kotlin (XML Views)
Jetpack Compose

Add to your layout XML:

<com.cometchat.uikit.kotlin.presentation.messageheader.ui.CometChatMessageHeader
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="56dp" />

Set a User or Group on the component — this is required for it to display data:

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

    val messageHeader = findViewById<CometChatMessageHeader>(R.id.header)
    messageHeader.setUser(user)
    // or messageHeader.setGroup(group)
}

@Composable
fun ChatHeader() {
    CometChatMessageHeader(
        user = user
        // or group = group
    )
}

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

Actions and Events

Callback Methods

`onBackPress`

Fires when the user presses the back button in the header.

Kotlin (XML Views)
Jetpack Compose

messageHeader.setOnBackPress {
    finish()
}

CometChatMessageHeader(
    user = user,
    onBackPress = { /* navigate back */ }
)

`onError`

Fires on internal errors (network failure, auth issue, SDK exception).

Kotlin (XML Views)
Jetpack Compose

messageHeader.setOnError { exception ->
    Log.e("MessageHeader", "Error: ${exception.message}")
}

CometChatMessageHeader(
    user = user,
    onError = { exception ->
        Log.e("MessageHeader", "Error: ${exception.message}")
    }
)

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual setup needed.

SDK Listener	Internal behavior
`onUserOnline` / `onUserOffline`	Updates online/offline status indicator
`onTypingStarted` / `onTypingEnded`	Shows/hides typing indicator in subtitle
`onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned`	Updates group member count

Functionality

Method (Kotlin XML)	Compose Parameter	Description
`setUser(user)`	`user = user`	Display a user’s header details
`setGroup(group)`	`group = group`	Display a group’s header details
`setBackButtonVisibility(View.VISIBLE)`	`hideBackButton = false`	Toggle back button
`setOnBackPress { }`	`onBackPress = { }`	Back button callback

Custom View Slots

Leading View

Replace the avatar / left section.

Kotlin (XML Views)
Jetpack Compose

messageHeader.setLeadingView(object : MessageHeaderViewHolderListener() {
    override fun createView(context: Context, user: User?, group: Group?): View {
        return ImageView(context).apply {
            layoutParams = ViewGroup.LayoutParams(48.dp, 48.dp)
        }
    }

    override fun bindView(context: Context, createdView: View, user: User?, group: Group?) {
        val imageView = createdView as ImageView
        // Load avatar image
    }
})

CometChatMessageHeader(
    user = user,
    leadingView = { u, g ->
        CometChatAvatar(
            imageUrl = u?.avatar,
            name = u?.name
        )
    }
)

Subtitle View

Replace the subtitle text below the user’s or group’s name.

Kotlin (XML Views)
Jetpack Compose

messageHeader.setSubtitleView(object : MessageHeaderViewHolderListener() {
    override fun createView(context: Context, user: User?, group: Group?): View {
        return TextView(context)
    }

    override fun bindView(context: Context, createdView: View, user: User?, group: Group?) {
        val textView = createdView as TextView
        if (user != null) {
            textView.text = user.status
        } else if (group != null) {
            textView.text = "${group.membersCount} members"
        }
    }
})

CometChatMessageHeader(
    user = user,
    subtitleView = { u, g ->
        Text(
            text = u?.status ?: "${g?.membersCount} members",
            style = CometChatTheme.typography.caption1Regular
        )
    }
)

Trailing View

Replace the right section (action buttons).

Choosing between the trailing and auxiliary slots. These two slots have different semantics by design, in both Kotlin XML Views and Jetpack Compose. The auxiliary slot supplies custom content for the auxiliary section — the area that by default renders the voice/video call buttons — so providing it replaces those defaults, which is the intended way to take over that area entirely. The trailing slot is separate and has no default content, so it is purely additive. For extra header icons, use the trailing slot — the call buttons stay. Use the auxiliary slot when you deliberately want your own content in place of the call-button area.

Kotlin (XML Views): setTrailingView(...) (additive) vs setAuxiliaryViewListener(...) (replaces the auxiliary container, whose default child is CometChatCallButtons)
Jetpack Compose: trailingView = { ... } (additive) vs auxiliaryView = { ... } (renders instead of the default call-button area)

Kotlin (XML Views)
Jetpack Compose

messageHeader.setTrailingView(object : MessageHeaderViewHolderListener() {
    override fun createView(context: Context, user: User?, group: Group?): View {
        return ImageView(context).apply {
            setImageResource(R.drawable.save_icon)
            layoutParams = LinearLayout.LayoutParams(24.dp, 24.dp)
        }
    }

    override fun bindView(context: Context, createdView: View, user: User?, group: Group?) {
        // Bind trailing view data
    }
})

CometChatMessageHeader(
    user = user,
    trailingView = { u, g ->
        IconButton(onClick = { /* action */ }) {
            Icon(painterResource(R.drawable.save_icon), "Save")
        }
    }
)

Item View

Replace the entire default header with a fully customized layout.

Kotlin (XML Views)
Jetpack Compose

messageHeader.setItemView(object : MessageHeaderViewHolderListener() {
    override fun createView(context: Context, user: User?, group: Group?): View {
        return LayoutInflater.from(context).inflate(R.layout.custom_message_header, null)
    }

    override fun bindView(context: Context, createdView: View, user: User?, group: Group?) {
        val avatar = createdView.findViewById<CometChatAvatar>(R.id.avatar)
        val title = createdView.findViewById<TextView>(R.id.title)
        if (user != null) {
            avatar.setAvatar(user.name, user.avatar)
            title.text = user.name
        } else if (group != null) {
            avatar.setAvatar(group.name, group.icon)
            title.text = group.name
        }
    }
})

CometChatMessageHeader(
    user = user,
    itemView = { u, g ->
        Row(verticalAlignment = Alignment.CenterVertically) {
            CometChatAvatar(imageUrl = u?.avatar, name = u?.name)
            Spacer(Modifier.width(8.dp))
            Text(u?.name ?: g?.name ?: "")
        }
    }
)

Style

Kotlin (XML Views)
Jetpack Compose

Define a custom style in themes.xml:

themes.xml

<style name="CustomMessageHeaderStyle" parent="CometChatMessageHeaderStyle">
    <item name="cometchatMessageHeaderBackgroundColor">#FEEDE1</item>
    <item name="cometchatMessageHeaderTitleTextColor">#F76808</item>
</style>

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatMessageHeaderStyle">@style/CustomMessageHeaderStyle</item>
</style>

CometChatMessageHeader(
    user = user,
    style = CometChatMessageHeaderStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1),
        titleTextColor = Color(0xFFF76808)
    )
)

See Component Styling for the full reference.

ViewModel

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

Kotlin (XML Views)
Jetpack Compose

messageHeader.setViewModel(viewModel)

CometChatMessageHeader(
    user = user,
    messageHeaderViewModel = viewModel
)

See ViewModel & Data for state observation and custom repositories.

Next Steps

Message List

Display messages in a conversation

Message Composer

Rich input for sending messages

Component Styling

Detailed styling reference

ViewModel & Data

Custom ViewModels and repositories

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​onBackPress

​onError

​SDK Events (Real-Time, Automatic)

​Functionality

​Custom View Slots

​Leading View

​Subtitle View

​Trailing View

​Item View

​Style

​ViewModel

​Next Steps