Message Header

Header bar displaying user/group avatar, name, status, typing indicator, call buttons, and back navigation.

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)

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)

Jetpack Compose

CometChatMessageHeader(
    user = user
)

---

Quick Start

Kotlin (XML Views)

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

Jetpack Compose

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

messageHeader.setOnBackPress {
    finish()
}

Jetpack Compose

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

onError

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

Kotlin (XML Views)

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

Jetpack Compose

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)

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

Jetpack Compose

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)

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

Jetpack Compose

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)

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

Jetpack Compose

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)

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

Jetpack Compose

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)

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>

Jetpack Compose

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)

messageHeader.setViewModel(viewModel)

Jetpack Compose

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