Message Header - CometChat Docs

AI Agent Component Spec

{
  "component": "CometChatMessageHeader",
  "package": "com.cometchat.chatuikit.messageheader",
  "xmlElement": "<com.cometchat.chatuikit.messageheader.CometChatMessageHeader />",
  "description": "Header bar displaying user/group avatar, name, status, typing indicator, call buttons, and back navigation for a chat screen.",
  "primaryInput": {
    "methods": ["setUser(User)", "setGroup(Group)"],
    "note": "One of these must be called for the component to display data."
  },
  "primaryOutput": {
    "method": "setOnBackButtonPressed",
    "type": "OnBackPress"
  },
  "methods": {
    "data": {
      "setUser": {
        "type": "User",
        "note": "Sets the user whose details are displayed in the header"
      },
      "setGroup": {
        "type": "Group",
        "note": "Sets the group whose details are displayed in the header"
      }
    },
    "callbacks": {
      "setOnBackButtonPressed": "OnBackPress",
      "setOnBackPress": "OnBackPress",
      "setOnError": "OnError",
      "setNewChatButtonClick": "OnClick",
      "setChatHistoryButtonClick": "OnClick"
    },
    "visibility": {
      "setBackIconVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.GONE" },
      "setUserStatusVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setGroupStatusVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setVideoCallButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setVoiceCallButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setMenuIconVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setNewChatButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
      "setChatHistoryButtonVisibility": { "type": "int", "default": "View.VISIBLE" }
    },
    "viewSlots": {
      "setItemView": "Function3<Context, User, Group, View> — replaces the entire header layout",
      "setLeadingView": "Function3<Context, User, Group, View> — avatar / left section",
      "setTitleView": "Function3<Context, User, Group, View> — name / title text",
      "setSubtitleView": "Function3<Context, User, Group, View> — subtitle text below name",
      "setTrailingView": "Function3<Context, User, Group, View> — right section (action buttons)",
      "setAuxiliaryButtonView": "Function3<Context, User, Group, View> — additional action button next to trailing view",
      "setOptions": "List<CometChatPopupMenu.MenuItem> — overflow popup menu items"
    },
    "advanced": {
      "setDateTimeFormatter": "DateTimeFormatterCallback — custom date/time formatting",
      "setLastSeenText": "Function2<Context, User, String> — custom last seen text",
      "setBackIcon": "View — custom back icon view",
      "setBackButtonView": "Drawable — custom back icon drawable",
      "setPopupMenuStyle": "@StyleRes int — style for the popup menu",
      "getMessageHeaderViewModel": "MessageHeaderViewModel — internal ViewModel access",
      "getAdditionParameter": "AdditionParameter — data source addition parameter"
    },
    "style": {
      "setStyle": {
        "type": "@StyleRes int",
        "parent": "CometChatMessageHeaderStyle"
      }
    }
  },
  "events": [],
  "sdkListeners": [
    "onUserOnline",
    "onUserOffline",
    "onTypingStarted",
    "onTypingEnded",
    "onGroupMemberJoined",
    "onGroupMemberLeft",
    "onGroupMemberKicked",
    "onGroupMemberBanned",
    "onGroupMemberScopeChanged"
  ]
}

Where It Fits

CometChatMessageHeader is a header bar component. It sits at the top of a chat screen and displays the avatar, name, and status of the user or group in the conversation. Wire it alongside CometChatMessageList and CometChatMessageComposer to build a complete messaging layout.

Kotlin
Java

ChatActivity.kt

class ChatActivity : AppCompatActivity() {

    private lateinit var messageHeader: CometChatMessageHeader
    private lateinit var messageList: CometChatMessageList
    private lateinit var messageComposer: CometChatMessageComposer

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

        messageHeader = findViewById(R.id.message_header)
        messageList = findViewById(R.id.message_list)
        messageComposer = findViewById(R.id.message_composer)

        // Set the user for all components
        messageHeader.setUser(user)
        messageList.setUser(user)
        messageComposer.setUser(user)
    }
}

ChatActivity.java

public class ChatActivity extends AppCompatActivity {

    private CometChatMessageHeader messageHeader;
    private CometChatMessageList messageList;
    private CometChatMessageComposer messageComposer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);

        messageHeader = findViewById(R.id.message_header);
        messageList = findViewById(R.id.message_list);
        messageComposer = findViewById(R.id.message_composer);

        // Set the user for all components
        messageHeader.setUser(user);
        messageList.setUser(user);
        messageComposer.setUser(user);
    }
}

Quick Start

Add the component to your layout XML:

your_layout.xml

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

Prerequisites: CometChat SDK initialized with CometChatUIKit.init(), a user logged in, and the cometchat-chat-uikit-android dependency added. Set a User or Group on the component — this is required for it to display data:

Kotlin
Java

YourActivity.kt

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

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

YourActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);

    CometChatMessageHeader messageHeader = findViewById(R.id.header);
    messageHeader.setUser(user);
}

Or set a group:

Kotlin
Java

messageHeader.setGroup(group)

messageHeader.setGroup(group);

Actions and Events

Callback Methods

`setOnBackButtonPressed`

Fires when the user presses the back button in the header. Default: navigates to the previous activity.

Kotlin
Java

YourActivity.kt

cometchatMessageHeader.setOnBackButtonPressed {
    // Custom back navigation logic
}

YourActivity.java

cometchatMessageHeader.setOnBackButtonPressed(() -> {
    // Custom back navigation logic
});

What this does: Overrides the default back-press navigation. When the user taps the back button, your custom logic runs instead.

`setOnBackPress`

Alternative setter for the back press callback. Functionally identical to setOnBackButtonPressed.

Kotlin
Java

YourActivity.kt

cometchatMessageHeader.onBackPressListener = OnBackPress {
    // Custom back navigation logic
}

YourActivity.java

cometchatMessageHeader.setOnBackPress(() -> {
    // Custom back navigation logic
});

`setOnError`

Fires on internal errors (network failure, auth issue, SDK exception). This does not change the component’s behavior.

Kotlin
Java

YourActivity.kt

cometchatMessageHeader.setOnError {
    // Handle error
}

YourActivity.java

cometchatMessageHeader.setOnError(cometchatException -> {
    // Handle error
});

What this does: Registers an error listener. If the component encounters an error, your callback receives the CometChatException.

`setNewChatButtonClick`

Fires when the new chat button is tapped (visible in AI agent conversations).

Kotlin
Java

YourActivity.kt

cometchatMessageHeader.setNewChatButtonClick {
    // Handle new chat button click
}

YourActivity.java

cometchatMessageHeader.setNewChatButtonClick(() -> {
    // Handle new chat button click
});

`setChatHistoryButtonClick`

Fires when the chat history button is tapped (visible in AI agent conversations).

Kotlin
Java

YourActivity.kt

cometchatMessageHeader.setChatHistoryButtonClick {
    // Handle chat history button click
}

YourActivity.java

cometchatMessageHeader.setChatHistoryButtonClick(() -> {
    // Handle chat history button click
});

Verify: After setting an action callback, trigger the corresponding user interaction (back-press) and confirm your custom logic executes instead of the default behavior.

Global UI Events

The CometChatMessageHeader component does not emit any global UI events.

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.

SDK Listener	Internal behavior
`onUserOnline`	Updates online status indicator for the user
`onUserOffline`	Updates offline status indicator for the user
`onTypingStarted`	Shows typing indicator in the subtitle area
`onTypingEnded`	Hides typing indicator and restores subtitle
`onGroupMemberJoined`	Updates group member count
`onGroupMemberLeft`	Updates group member count
`onGroupMemberKicked`	Updates group member count
`onGroupMemberBanned`	Updates group member count

Automatic: user presence, typing indicators, and group member count changes update in real time.

Functionality

Small functional customizations such as toggling visibility of UI elements and setting the user or group object.

Methods	Description	Code
`setUser`	Passes a user object to display that user’s header details. Required for the component to function.	`.setUser(user)`
`setGroup`	Passes a group object to display that group’s header details. Required for the component to function.	`.setGroup(group)`
`setBackIconVisibility`	Toggles visibility for the back button	`.setBackIconVisibility(View.VISIBLE)`
`setUserStatusVisibility`	Toggles visibility for the user’s online/offline status indicator	`.setUserStatusVisibility(View.GONE)`
`setGroupStatusVisibility`	Toggles visibility for the group status indicator	`.setGroupStatusVisibility(View.GONE)`
`setVideoCallButtonVisibility`	Toggles visibility for the video call button	`.setVideoCallButtonVisibility(View.GONE)`
`setVoiceCallButtonVisibility`	Toggles visibility for the voice call button	`.setVoiceCallButtonVisibility(View.GONE)`
`setMenuIconVisibility`	Toggles visibility for the overflow menu icon	`.setMenuIconVisibility(View.GONE)`
`setNewChatButtonVisibility`	Toggles visibility for the new chat button (AI agent conversations)	`.setNewChatButtonVisibility(View.GONE)`
`setChatHistoryButtonVisibility`	Toggles visibility for the AI chat history button	`.setChatHistoryButtonVisibility(View.GONE)`

Verify: After calling a visibility method, confirm the corresponding UI element is shown or hidden. After calling setUser(user), confirm the header displays that user’s name and avatar.

Custom View Slots

Each slot replaces a section of the default header UI. Slots accept a Function3<Context, User, Group, View> callback that receives the current context, user, and group objects.

Slot	Method	Replaces
Item view	`setItemView(Function3)`	Entire header layout
Leading view	`setLeadingView(Function3)`	Avatar / left section
Title view	`setTitleView(Function3)`	Name / title text
Subtitle view	`setSubtitleView(Function3)`	Subtitle text below name
Trailing view	`setTrailingView(Function3)`	Right section (action buttons)
Auxiliary button	`setAuxiliaryButtonView(Function3)`	Additional action button next to trailing view
Options	`setOptions(List<MenuItem>)`	Overflow popup menu items

`setLeadingView`

Replace the avatar / left section.

Kotlin
Java

cometchatMessageHeader.setLeadingView { context, user, group ->
    // Return your custom view
    null
}

cometchatMessageHeader.setLeadingView((context, user, group) -> {
    // Return your custom view
    return null;
});

What this does: Registers a callback that returns a custom View for the leading (left) area of the header. The callback receives the current Context, User, and Group objects.

Create a header_leading_view.xml layout file:

header_leading_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/cometchat_45dp"
    android:layout_height="@dimen/cometchat_45dp"
    android:orientation="vertical">

    <com.cometchat.chatuikit.shared.views.avatar.CometChatAvatar
        android:id="@+id/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View
        android:id="@+id/batch_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/cometchat_12dp"
        android:layout_alignParentBottom="true"
        android:visibility="gone"
        android:background="@drawable/admin_batch" />

</RelativeLayout>

Kotlin
Java

cometChatMessageHeader.leadingView = object : Function3<Context?, User?, Group?, View?> {
            override fun apply(t: Context?, k: User?, s: Group?): View? {
                val view: View = LayoutInflater.from(context).inflate(R.layout.header_leading_view, null)
                val avatar = view.findViewById<CometChatAvatar>(R.id.avatar)
                val view1 = view.findViewById<View>(R.id.batch_view)
                if (user != null) {
                    avatar.setAvatar(user.name, user.avatar)
                    if ("admin" == user.role) {
                        view1.visibility = View.VISIBLE
                    }
                } else {
                    avatar.setAvatar(group.name, group.icon)
                    if (group.owner == CometChatUIKit.getLoggedInUser().uid) {
                        view1.visibility = View.VISIBLE
                    }
                }

                val params = LinearLayout.LayoutParams(Utils.convertDpToPx(context, 45), Utils.convertDpToPx(context, 45))
                view.layoutParams = params
                return view
            }
        }

cometChatMessageHeader.setLeadingView(new Function3<Context, User, Group, View>() {
            @Override
            public View apply(Context context, User user, Group group) {
                View view = LayoutInflater.from(context).inflate(R.layout.header_leading_view, null);
                CometChatAvatar avatar = view.findViewById(R.id.avatar);
                View view1 = view.findViewById(R.id.batch_view);
                if (user != null) {
                    avatar.setAvatar(user.getName(), user.getAvatar());
                    if ("admin".equals(user.getRole())) {
                        view1.setVisibility(View.VISIBLE);
                    }
                } else {
                    avatar.setAvatar(group.getName(), group.getIcon());
                    if (group.getOwner().equals(CometChatUIKit.getLoggedInUser().getUid())) {
                        view1.setVisibility(View.VISIBLE);
                    }
                }

                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(Utils.convertDpToPx(context, 45), Utils.convertDpToPx(context, 45));
                view.setLayoutParams(params);
                return view;
            }
        });

What this does: Inflates the header_leading_view.xml layout and sets the avatar image from the user or group. If the user has an “admin” role, or if the logged-in user is the group owner, the admin badge view becomes visible. The view is sized to 45dp × 45dp.

`setTitleView`

Replace the default title view with a custom layout.

Kotlin
Java

cometchatMessageHeader.setTitleView { context, user, group ->
    val titleView = TextView(context)
    if (user != null) {
        titleView.text = user.name
    } else if (group != null) {
        titleView.text = group.name
    }
    titleView
}

cometchatMessageHeader.setTitleView((context, user, group) -> {
    TextView titleView = new TextView(context);
    if (user != null) {
        titleView.setText(user.getName());
    } else if (group != null) {
        titleView.setText(group.getName());
    }
    return titleView;
});

What this does: Replaces the default title with a custom TextView that displays the user’s or group’s name.

`setSubtitleView`

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

Kotlin
Java

cometchatMessageHeader.setSubtitleView { context, user, group ->
    // Return your custom view
    null
}

cometchatMessageHeader.setSubtitleView((context, user, group) -> {
    // Return your custom view
    return null;
});

What this does: Registers a callback that returns a custom View for the subtitle area of the header. The callback receives the current Context, User, and Group objects so you can customize the subtitle based on the conversation.

Kotlin
Java

cometChatMessageHeader.setSubtitleView(object : Function3<Context?, User?, Group?, View?> {
            override fun apply(context: Context?, user: User?, group: Group?): View? {
                val textView = TextView(context)
                if (user != null) {
                    textView.text = user.status
                } else if (group != null) {
                    textView.text =
                        if (group.membersCount > 1) group.membersCount.toString() + " members" else group.membersCount.toString() + " member" + " • " + group.description
                }
                return textView
            }
        })

cometChatMessageHeader.setSubtitleView((context, user, group) -> {
            TextView textView = new TextView(context);
            if(user!=null) {
                textView.setText(user.getStatus());
            }else if(group!=null) {
                textView.setText(group.getMembersCount() > 1 ? group.getMembersCount() + " members" : group.getMembersCount() + " member" + " • " + group.getDescription());
            }
            return textView;
        });

What this does: Creates a TextView and sets its text to the user’s status (for user conversations) or the group’s member count and description (for group conversations). If the group has more than 1 member, it shows “X members”; otherwise it shows “1 member • [description]”.

`setTrailingView`

Replace the trailing (right) section of the header, used for action buttons or indicators.

Kotlin
Java

cometchatMessageHeader.setTrailingView { context, user, group ->
    // Return your custom view
    null
}

cometchatMessageHeader.setTrailingView((context, user, group) -> {
    // Return your custom view
    return null;
});

What this does: Registers a callback that returns a custom View for the trailing (right) area of the header. The callback receives the current Context, User, and Group objects.

Kotlin
Java

cometChatMessageHeader.setTrailingView { context, user, group ->
            val imageView = ImageView(context)
            imageView.setImageResource(R.drawable.save_icon)
            val params = LinearLayout.LayoutParams(
                Utils.convertDpToPx(context, 24),
                Utils.convertDpToPx(context, 24)
            )
            params.leftMargin = Utils.convertDpToPx(context, 16)
            imageView.layoutParams = params
            imageView
        }

cometChatMessageHeader.setTrailingView((context, user, group) -> {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(R.drawable.save_icon);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(Utils.convertDpToPx(context, 24), Utils.convertDpToPx(context, 24));
            params.leftMargin = Utils.convertDpToPx(context, 16);
            imageView.setLayoutParams(params);
            return imageView;
        });

What this does: Creates an ImageView with a save icon drawable, sizes it to 24dp × 24dp with a 16dp left margin, and returns it as the trailing view in the header.

`setItemView`

Replace the entire default header with a fully customized layout.

Kotlin
Java

cometchatMessageHeader.setItemView { context, user, group ->
    // Return your custom view
    null
}

cometchatMessageHeader.setItemView((context, user, group) -> {
    // Return your custom view
    return null;
});

What this does: Registers a callback that returns a custom View to replace the entire default message header layout. The callback receives the current Context, User, and Group objects.

Create a custom_message_header.xml layout file:

custom_message_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iv_message_header_back"
        android:layout_width="@dimen/cometchat_24dp"
        android:layout_height="@dimen/cometchat_24dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/cometchat_ic_back"
        app:tint="@color/black"
        tools:ignore="ContentDescription" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/message_header_avatar_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/cometchat_margin_2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/message_header_back_icon_layout"
        app:layout_constraintTop_toTopOf="parent">

        <com.cometchat.chatuikit.shared.views.avatar.CometChatAvatar
            android:id="@+id/message_header_avatar_view"
            android:layout_width="@dimen/cometchat_40dp"
            android:layout_height="@dimen/cometchat_40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/message_header_center_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/cometchat_margin_2"
        android:layout_marginEnd="@dimen/cometchat_padding_3"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/tv_message_header_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="start"
            android:maxLines="1"
            android:text="hvfcghv"
            android:textAppearance="?attr/cometchatTextAppearanceHeading4Medium"
            android:textColor="?attr/cometchatTextColorPrimary" />


        <TextView
            android:id="@+id/tv_message_header_subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center_vertical"
            android:marqueeRepeatLimit="1"
            android:minHeight="@dimen/cometchat_19dp"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:textAppearance="?attr/cometchatTextAppearanceCaption1Regular"
            android:textColor="?attr/cometchatTextColorSecondary" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/end_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.cometchat.chatuikit.calls.callbutton.CometChatCallButtons
            android:id="@+id/call_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/cometchat_margin_2" />
        
    </LinearLayout>


</LinearLayout>

What this does: Defines a custom message header layout with a back button, avatar, title and subtitle text views, and call buttons. This layout replaces the entire default header when inflated in setItemView.

Inflate the XML and initialize the views:

Kotlin
Java

cometchatMessageHeader.setItemView { context, user, group ->
            val view: View = LayoutInflater.from(context).inflate(R.layout.custom_message_header, null)
            val params = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
            )
            val avatar = view.findViewById<CometChatAvatar>(R.id.message_header_avatar_view)
            val titleText = view.findViewById<TextView>(R.id.tv_message_header_name)
            val subtitleText = view.findViewById<TextView>(R.id.tv_message_header_subtitle)
            val cometChatCallButtons = view.findViewById<CometChatCallButtons>(R.id.call_button)

            if (user != null) {
                avatar.setAvatar(user.name, user.avatar)
                titleText.text = user.name
                subtitleText.text = user.status
                cometChatCallButtons.setUser(user)
            } else {
                avatar.setAvatar(group.name, group.icon)
                titleText.text = group.name
                subtitleText.setText(group.membersCount.toString() + " members")
                cometChatCallButtons.setGroup(group)
            }
            view.layoutParams = params
            view
        }

cometchatMessageHeader.setItemView((context, user, group) -> {
            View view = LayoutInflater.from(context).inflate(R.layout.custom_message_header, null);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                                                                             LinearLayout.LayoutParams.WRAP_CONTENT);
            CometChatAvatar avatar = view.findViewById(R.id.message_header_avatar_view);
            TextView titleText = view.findViewById(R.id.tv_message_header_name);
            TextView subtitleText = view.findViewById(R.id.tv_message_header_subtitle);
            CometChatCallButtons cometChatCallButtons = view.findViewById(R.id.call_button);

            if (user != null) {
                avatar.setAvatar(user.getName(), user.getAvatar());
                titleText.setText(user.getName());
                subtitleText.setText(user.getStatus());
                cometChatCallButtons.setUser(user);
            } else {
                avatar.setAvatar(group.getName(), group.getIcon());
                titleText.setText(group.getName());
                subtitleText.setText(group.getMembersCount() + " members");
                cometChatCallButtons.setGroup(group);
            }
            view.setLayoutParams(params);
            return view;
        });

What this does: Inflates the custom_message_header.xml layout and populates it with the user’s or group’s avatar, name, and status/member count. If the conversation is with a user, it sets the user’s status as the subtitle and configures call buttons for that user. If the conversation is with a group, it sets the member count as the subtitle and configures call buttons for that group.

`setAuxiliaryButtonView`

Add a custom button or additional action next to the title or trailing section.

Kotlin
Java

cometchatMessageHeader.setAuxiliaryButtonView(object : Function3<Context?, User?, Group?, View?> {
            override fun apply(context: Context?, user: User?, group: Group?): View? {
                // Return your custom view
                return null
            }
        })

cometchatMessageHeader.setAuxiliaryButtonView((context, user, group) -> {
    // Return your custom view
    return null;
});

What this does: Registers a callback that returns a custom View to display as an auxiliary button in the header. The callback receives the current Context, User, and Group objects so you can customize the view based on the conversation.

`setOptions`

Sets the list of popup menu items displayed when the overflow menu icon is tapped.

Kotlin
Java

val menuItems = listOf(
    CometChatPopupMenu.MenuItem("SEARCH", "Search", null, null, 0, 0, 0, 0) {
        Toast.makeText(context, "Search", Toast.LENGTH_SHORT).show()
    }
)
cometchatMessageHeader.setOptions(menuItems)

List<CometChatPopupMenu.MenuItem> menuItems = new ArrayList<>();
menuItems.add(new CometChatPopupMenu.MenuItem("SEARCH", "Search", null, null, 0, 0, 0, 0, () -> {
    Toast.makeText(context, "Search", Toast.LENGTH_SHORT).show();
}));
cometchatMessageHeader.setOptions(menuItems);

What this does: Sets custom popup menu items for the header’s overflow menu. Each item has an ID, label, and click action. Setting options automatically makes the menu icon visible.

Verify: After setting any custom view slot, confirm the custom view renders in the correct position within the message header, and the data binding populates correctly for the user or group.

Common Patterns

Hide call buttons — text-only chat

Kotlin
Java

cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE)
cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE)

cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE);
cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE);

Kotlin
Java

cometchatMessageHeader.setBackIconVisibility(View.VISIBLE)
cometchatMessageHeader.setOnBackButtonPressed {
    finish()
}

cometchatMessageHeader.setBackIconVisibility(View.VISIBLE);
cometchatMessageHeader.setOnBackButtonPressed(() -> {
    finish();
});

Minimal header — hide status and menu

Kotlin
Java

cometchatMessageHeader.setUserStatusVisibility(View.GONE)
cometchatMessageHeader.setMenuIconVisibility(View.GONE)
cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE)
cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE)

cometchatMessageHeader.setUserStatusVisibility(View.GONE);
cometchatMessageHeader.setMenuIconVisibility(View.GONE);
cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE);
cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE);

Advanced Methods

`setDateTimeFormatter`

Provides a custom implementation of DateTimeFormatterCallback to configure how time and date values are displayed. Each method corresponds to a specific case:

time(long timestamp) — Custom full timestamp format
today(long timestamp) — Called when a message is from today
yesterday(long timestamp) — Called for yesterday’s messages
lastWeek(long timestamp) — Messages from the past week
otherDays(long timestamp) — Older messages
minute(long timestamp) / hour(long timestamp) — Exact time unit
minutes(long diffInMinutesFromNow, long timestamp) — e.g., “5 minutes ago”
hours(long diffInHourFromNow, long timestamp) — e.g., “2 hours ago”

Kotlin
Java

import java.text.SimpleDateFormat
import java.util.*

cometchatMessageHeader.setDateTimeFormatter(object : DateTimeFormatterCallback {

        private val fullTimeFormatter = SimpleDateFormat("hh:mm a", Locale.getDefault())
        private val dateFormatter = SimpleDateFormat("dd MMM yyyy", Locale.getDefault())

        override fun time(timestamp: Long): String {
            return fullTimeFormatter.format(Date(timestamp))
        }

        override fun today(timestamp: Long): String {
            return "Today"
        }

        override fun yesterday(timestamp: Long): String {
            return "Yesterday"
        }

        override fun lastWeek(timestamp: Long): String {
            return "Last Week"
        }

        override fun otherDays(timestamp: Long): String {
            return dateFormatter.format(Date(timestamp))
        }

        override fun minutes(diffInMinutesFromNow: Long, timestamp: Long): String {
            return "$diffInMinutesFromNow mins ago"
        }

        override fun hours(diffInHourFromNow: Long, timestamp: Long): String {
            return "$diffInHourFromNow hrs ago"
        }
    });

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;


cometchatMessageHeader.setDateTimeFormatter(new DateTimeFormatterCallback() {

        private final SimpleDateFormat fullTimeFormatter = new SimpleDateFormat("hh:mm a", Locale.getDefault());
        private final SimpleDateFormat dateFormatter = new SimpleDateFormat("dd MMM yyyy", Locale.getDefault());

        @Override
        public String time(long timestamp) {
            return fullTimeFormatter.format(new Date(timestamp));
        }

        @Override
        public String today(long timestamp) {
            return "Today";
        }

        @Override
        public String yesterday(long timestamp) {
            return "Yesterday";
        }

        @Override
        public String lastWeek(long timestamp) {
            return "Last Week";
        }

        @Override
        public String otherDays(long timestamp) {
            return dateFormatter.format(new Date(timestamp));
        }

        @Override
        public String minutes(long diffInMinutesFromNow, long timestamp) {
            return diffInMinutesFromNow + " mins ago";
        }

        @Override
        public String hours(long diffInHourFromNow, long timestamp) {
            return diffInHourFromNow + " hrs ago";
        }
    });

What this does: Overrides the default date/time formatting for the message header. Today’s messages show “Today”, yesterday’s show “Yesterday”, recent messages show “X mins ago” or “X hrs ago”, last week’s show “Last Week”, and older messages show the full date in “dd MMM yyyy” format.

`setLastSeenText`

Provides a custom implementation for the “last seen” text displayed below the user’s name. Only applies to user conversations.

Kotlin
Java

cometchatMessageHeader.setLastSeenText { context, user ->
    if (user.status == "online") {
        "Active now"
    } else {
        "Last seen recently"
    }
}

cometchatMessageHeader.setLastSeenText((context, user) -> {
    if (user.getStatus().equals("online")) {
        return "Active now";
    }
    return "Last seen recently";
});

What this does: Replaces the default last seen text with custom logic. Returns “Active now” for online users and “Last seen recently” for offline users.

`setBackIcon`

Replaces the default back icon with a completely custom View.

Kotlin
Java

val customBackButton = ImageView(context)
customBackButton.setImageResource(R.drawable.custom_back_icon)
cometchatMessageHeader.setBackIcon(customBackButton)

ImageView customBackButton = new ImageView(context);
customBackButton.setImageResource(R.drawable.custom_back_icon);
cometchatMessageHeader.setBackIcon(customBackButton);

`setPopupMenuStyle`

Sets a custom style for the overflow popup menu.

Kotlin
Java

cometchatMessageHeader.setPopupMenuStyle(R.style.CustomPopupMenuStyle)

cometchatMessageHeader.setPopupMenuStyle(R.style.CustomPopupMenuStyle);

AI Agent Button Customization

For AI agent conversations, the header shows new chat and chat history buttons. Customize their icons and tints:

Method	Type	Description
`setNewChatIcon`	`Drawable`	Custom icon for the new chat button
`setNewChatIconTint`	`@ColorInt int`	Tint color for the new chat icon
`setChatHistoryIcon`	`Drawable`	Custom icon for the chat history button
`setChatHistoryIconTint`	`@ColorInt int`	Tint color for the chat history icon

Internal Access

These methods provide direct access to internal components for advanced use cases.

Method	Returns	Description
`getMessageHeaderViewModel()`	`MessageHeaderViewModel`	The ViewModel managing header data and state
`getAdditionParameter()`	`AdditionParameter`	Data source addition parameter for configurators
`getUser()`	`User`	The currently set User object
`getGroup()`	`Group`	The currently set Group object

Use these only when the standard API is insufficient. Directly manipulating the ViewModel may conflict with the component’s internal state management.

Style

The component uses XML theme styles. Define a custom style with parent CometChatMessageHeaderStyle in themes.xml, then apply with setStyle().

themes.xml

    <style name="CustomCallButtonStyle" parent="CometChatCallButtonsStyle">
        <item name="cometchatCallButtonsVideoCallIconTint">#F76808</item>
        <item name="cometchatCallButtonsVoiceCallIconTint">#F76808</item>
    </style>

    <style name="CustomMessageHeaderStyle" parent="CometChatMessageHeaderStyle">
        <item name="cometchatMessageHeaderTitleTextColor">#F76808</item>
        <item name="cometchatMessageHeaderAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatMessageHeaderCallButtonsStyle">@style/CustomCallButtonStyle</item>
    </style>

Kotlin
Java

cometchatMessageHeader.setStyle(R.style.CustomMessageHeaderStyle)

cometchatMessageHeader.setStyle(R.style.CustomMessageHeaderStyle);

What this does: Applies the CustomMessageHeaderStyle theme to the CometChatMessageHeader component, changing the title text color, avatar style, and call button icon tints.

To know more such attributes, visit the attributes file.

Verify: The header title text displays in orange (#F76808), and the voice and video call icons display with orange tint (#F76808).

Programmatic Style Properties

In addition to XML theme styles, the component exposes programmatic setters for fine-grained control:

Method	Type	Description
`setBackgroundColor`	`@ColorInt int`	Background color of the component
`setTitleTextColor`	`@ColorInt int`	Title text color
`setTitleTextAppearance`	`@StyleRes int`	Title text appearance
`setSubtitleTextColor`	`@ColorInt int`	Subtitle text color
`setSubtitleTextAppearance`	`@StyleRes int`	Subtitle text appearance
`setBackIconTint`	`@ColorInt int`	Tint color for the back icon
`setMenuIconTint`	`@ColorInt int`	Tint color for the menu icon
`setCornerRadius`	`@Dimension int`	Corner radius of the component
`setAvatarStyle`	`@StyleRes int`	Style for the avatar
`setStatusIndicatorStyle`	`@StyleRes int`	Style for the online/offline status indicator
`setTypingIndicatorStyle`	`@StyleRes int`	Style for the typing indicator
`setCallButtonsStyle`	`@StyleRes int`	Style for the call buttons

Customization Matrix

What to change	Where	Property/API	Example
User object	Activity/Fragment	`setUser(User)`	`.setUser(user)`
Group object	Activity/Fragment	`setGroup(Group)`	`.setGroup(group)`
Override back-press behavior	Activity/Fragment	`setOnBackButtonPressed(OnBackPress)`	`setOnBackButtonPressed { ... }`
Handle errors	Activity/Fragment	`setOnError(OnError)`	`setOnError { e -> ... }`
Title text color	`themes.xml`	`CometChatMessageHeaderStyle` with `cometchatMessageHeaderTitleTextColor`	`<item name="cometchatMessageHeaderTitleTextColor">#F76808</item>`
Avatar style	`themes.xml`	`CometChatMessageHeaderStyle` with `cometchatMessageHeaderAvatarStyle`	`<item name="cometchatMessageHeaderAvatarStyle">@style/CustomAvatarStyle</item>`
Call button icon tints	`themes.xml`	`CometChatCallButtonsStyle` with `cometchatCallButtonsVideoCallIconTint` / `cometchatCallButtonsVoiceCallIconTint`	`<item name="cometchatCallButtonsVideoCallIconTint">#F76808</item>`
Apply a custom style	Activity/Fragment	`setStyle(int styleRes)`	`cometchatMessageHeader.setStyle(R.style.CustomMessageHeaderStyle);`
Back button visibility	Activity/Fragment	`setBackIconVisibility(int)`	`.setBackIconVisibility(View.VISIBLE)`
User status visibility	Activity/Fragment	`setUserStatusVisibility(int)`	`.setUserStatusVisibility(View.GONE)`
Group status visibility	Activity/Fragment	`setGroupStatusVisibility(int)`	`.setGroupStatusVisibility(View.GONE)`
Video call button visibility	Activity/Fragment	`setVideoCallButtonVisibility(int)`	`.setVideoCallButtonVisibility(View.GONE)`
Voice call button visibility	Activity/Fragment	`setVoiceCallButtonVisibility(int)`	`.setVoiceCallButtonVisibility(View.GONE)`
Menu icon visibility	Activity/Fragment	`setMenuIconVisibility(int)`	`.setMenuIconVisibility(View.GONE)`
New chat button visibility	Activity/Fragment	`setNewChatButtonVisibility(int)`	`.setNewChatButtonVisibility(View.GONE)`
Chat history button visibility	Activity/Fragment	`setChatHistoryButtonVisibility(int)`	`.setChatHistoryButtonVisibility(View.GONE)`
Date/time formatting	Activity/Fragment	`setDateTimeFormatter(DateTimeFormatterCallback)`	See `setDateTimeFormatter` code above
Custom last seen text	Activity/Fragment	`setLastSeenText(Function2<Context, User, String>)`	See `setLastSeenText` code above
Entire header layout	Activity/Fragment	`setItemView(Function3)`	See `setItemView` code above
Subtitle view	Activity/Fragment	`setSubtitleView(Function3)`	See `setSubtitleView` code above
Leading view (avatar area)	Activity/Fragment	`setLeadingView(Function3)`	See `setLeadingView` code above
Trailing view	Activity/Fragment	`setTrailingView(Function3)`	See `setTrailingView` code above
Title view	Activity/Fragment	`setTitleView(Function3)`	See `setTitleView` code above
Auxiliary button view	Activity/Fragment	`setAuxiliaryButtonView(Function3)`	See `setAuxiliaryButtonView` code above
Header popup menu options	Activity/Fragment	`setOptions(List<MenuItem>)`	`cometchatMessageHeader.setOptions(menuItems);`
Popup menu style	Activity/Fragment	`setPopupMenuStyle(int)`	`.setPopupMenuStyle(R.style.CustomPopupMenuStyle)`

Accessibility

The component renders a toolbar-style header bar with interactive elements. The back button, call buttons, and menu icon respond to tap gestures. Avatar images include the user or group name as content description. The typing indicator updates the subtitle text dynamically. For custom views provided via setLeadingView, setTitleView, setSubtitleView, setTrailingView, or setItemView, ensure you set android:contentDescription on visual-only elements so TalkBack can announce them. The default views handle this automatically. Online/offline status dots are visual-only by default. If screen reader descriptions are needed, provide them via a custom view with appropriate contentDescription attributes.

Next Steps

Message List

Display messages in a conversation

Message Composer

Rich input for sending messages

Conversations

Browse recent conversations

Theming

Customize colors, fonts, and styles

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​setOnBackButtonPressed

​setOnBackPress

​setOnError

​setNewChatButtonClick

​setChatHistoryButtonClick

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Functionality

​Custom View Slots

​setLeadingView

​setTitleView

​setSubtitleView

​setTrailingView

​setItemView

​setAuxiliaryButtonView

​setOptions

​Common Patterns

​Hide call buttons — text-only chat

​Show back button for navigation

​Minimal header — hide status and menu

​Advanced Methods

​setDateTimeFormatter

​setLastSeenText

​setBackIcon

​setPopupMenuStyle

​AI Agent Button Customization

​Internal Access

​Style

​Programmatic Style Properties

​Customization Matrix

​Accessibility

​Next Steps

Message List

Message Composer

Conversations

Theming

Where It Fits

Quick Start

Actions and Events

Callback Methods

`setOnBackButtonPressed`

`setOnBackPress`

`setOnError`

`setNewChatButtonClick`

`setChatHistoryButtonClick`

Global UI Events

SDK Events (Real-Time, Automatic)

Functionality

Custom View Slots

`setLeadingView`

`setTitleView`

`setSubtitleView`

`setTrailingView`

`setItemView`

`setAuxiliaryButtonView`

`setOptions`

Common Patterns

Hide call buttons — text-only chat

Show back button for navigation

Minimal header — hide status and menu

Advanced Methods

`setDateTimeFormatter`

`setLastSeenText`

`setBackIcon`

`setPopupMenuStyle`

AI Agent Button Customization

Internal Access

Style

Programmatic Style Properties

Customization Matrix

Accessibility

Next Steps