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

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