> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Header

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

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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"
    ]
  }
  ```
</Accordion>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin ChatActivity.kt lines theme={null}
    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)
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java ChatActivity.java lines theme={null}
    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);
        }
    }
    ```
  </Tab>
</Tabs>

## Quick Start

Add the component to your layout XML:

```xml your_layout.xml lines theme={null}
<com.cometchat.chatuikit.messageheader.CometChatMessageHeader
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="56dp" />
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=e3a3c60ef61c6693baed84c397b024a9" width="1280" height="240" data-path="images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png" />
</Frame>

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:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.your_layout)

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

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.your_layout);

        CometChatMessageHeader messageHeader = findViewById(R.id.header);
        messageHeader.setUser(user);
    }
    ```
  </Tab>
</Tabs>

Or set a group:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    messageHeader.setGroup(group)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    messageHeader.setGroup(group);
    ```
  </Tab>
</Tabs>

## Actions and Events

### Callback Methods

#### `setOnBackButtonPressed`

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatMessageHeader.setOnBackButtonPressed {
        // Custom back navigation logic
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatMessageHeader.setOnBackButtonPressed(() -> {
        // Custom back navigation logic
    });
    ```
  </Tab>
</Tabs>

> **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`.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatMessageHeader.onBackPressListener = OnBackPress {
        // Custom back navigation logic
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatMessageHeader.setOnBackPress(() -> {
        // Custom back navigation logic
    });
    ```
  </Tab>
</Tabs>

#### `setOnError`

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatMessageHeader.setOnError {
        // Handle error
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatMessageHeader.setOnError(cometchatException -> {
        // Handle error
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatMessageHeader.setNewChatButtonClick {
        // Handle new chat button click
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatMessageHeader.setNewChatButtonClick(() -> {
        // Handle new chat button click
    });
    ```
  </Tab>
</Tabs>

#### `setChatHistoryButtonClick`

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    cometchatMessageHeader.setChatHistoryButtonClick {
        // Handle chat history button click
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    cometchatMessageHeader.setChatHistoryButtonClick(() -> {
        // Handle chat history button click
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setLeadingView { context, user, group ->
        // Return your custom view
        null
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setLeadingView((context, user, group) -> {
        // Return your custom view
        return null;
    });
    ```
  </Tab>
</Tabs>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e09af665-message_header_leading_view-6d0be5fa6870e2bd8acf0af4b6393c93.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=6014133b25b5f5464589933ce51ebc71" width="1280" height="240" data-path="images/e09af665-message_header_leading_view-6d0be5fa6870e2bd8acf0af4b6393c93.png" />
</Frame>

Create a `header_leading_view.xml` layout file:

```xml header_leading_view.xml lines theme={null}
<?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>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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
                }
            }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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;
                }
            });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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;
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setSubtitleView { context, user, group ->
        // Return your custom view
        null
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setSubtitleView((context, user, group) -> {
        // Return your custom view
        return null;
    });
    ```
  </Tab>
</Tabs>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/691ae5e8-message_header_subtitle_view-dc68ccaa0e5b42749247bd5e0b736f8f.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=08d34e62d0c3f4d8ed6139825dd7819c" width="2560" height="480" data-path="images/691ae5e8-message_header_subtitle_view-dc68ccaa0e5b42749247bd5e0b736f8f.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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
                }
            })
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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;
            });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setTrailingView { context, user, group ->
        // Return your custom view
        null
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setTrailingView((context, user, group) -> {
        // Return your custom view
        return null;
    });
    ```
  </Tab>
</Tabs>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/b2a0551c-message_header_trailing_view-64dbdd471059cf2e92dc9646fb3e676b.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=06c02a7cea17bf826e211c1204598ae1" width="2560" height="480" data-path="images/b2a0551c-message_header_trailing_view-64dbdd471059cf2e92dc9646fb3e676b.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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
            }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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;
            });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setItemView { context, user, group ->
        // Return your custom view
        null
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setItemView((context, user, group) -> {
        // Return your custom view
        return null;
    });
    ```
  </Tab>
</Tabs>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=e3a3c60ef61c6693baed84c397b024a9" width="1280" height="240" data-path="images/6fc1ac0d-message_header-3ef4b07948db07a2ec0b2aca8bcdc221.png" />
</Frame>

Create a `custom_message_header.xml` layout file:

```xml custom_message_header.xml lines theme={null}
<?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:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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
            }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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;
            });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setAuxiliaryButtonView(object : Function3<Context?, User?, Group?, View?> {
                override fun apply(context: Context?, user: User?, group: Group?): View? {
                    // Return your custom view
                    return null
                }
            })
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setAuxiliaryButtonView((context, user, group) -> {
        // Return your custom view
        return null;
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val menuItems = listOf(
        CometChatPopupMenu.MenuItem("SEARCH", "Search", null, null, 0, 0, 0, 0) {
            Toast.makeText(context, "Search", Toast.LENGTH_SHORT).show()
        }
    )
    cometchatMessageHeader.setOptions(menuItems)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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);
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE)
    cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE);
    cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

### Show back button for navigation

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setBackIconVisibility(View.VISIBLE)
    cometchatMessageHeader.setOnBackButtonPressed {
        finish()
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setBackIconVisibility(View.VISIBLE);
    cometchatMessageHeader.setOnBackButtonPressed(() -> {
        finish();
    });
    ```
  </Tab>
</Tabs>

### Minimal header — hide status and menu

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setUserStatusVisibility(View.GONE)
    cometchatMessageHeader.setMenuIconVisibility(View.GONE)
    cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE)
    cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setUserStatusVisibility(View.GONE);
    cometchatMessageHeader.setMenuIconVisibility(View.GONE);
    cometchatMessageHeader.setVideoCallButtonVisibility(View.GONE);
    cometchatMessageHeader.setVoiceCallButtonVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

## 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"

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    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"
            }
        });
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    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";
            }
        });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setLastSeenText { context, user ->
        if (user.status == "online") {
            "Active now"
        } else {
            "Last seen recently"
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setLastSeenText((context, user) -> {
        if (user.getStatus().equals("online")) {
            return "Active now";
        }
        return "Last seen recently";
    });
    ```
  </Tab>
</Tabs>

> **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`.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val customBackButton = ImageView(context)
    customBackButton.setImageResource(R.drawable.custom_back_icon)
    cometchatMessageHeader.setBackIcon(customBackButton)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    ImageView customBackButton = new ImageView(context);
    customBackButton.setImageResource(R.drawable.custom_back_icon);
    cometchatMessageHeader.setBackIcon(customBackButton);
    ```
  </Tab>
</Tabs>

### `setPopupMenuStyle`

Sets a custom style for the overflow popup menu.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setPopupMenuStyle(R.style.CustomPopupMenuStyle)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setPopupMenuStyle(R.style.CustomPopupMenuStyle);
    ```
  </Tab>
</Tabs>

### 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()`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=e5f1ef0c9636d141bf0218d70f190f41" width="1280" height="240" data-path="images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png" />
</Frame>

```xml themes.xml lines theme={null}
    <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>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometchatMessageHeader.setStyle(R.style.CustomMessageHeaderStyle)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometchatMessageHeader.setStyle(R.style.CustomMessageHeaderStyle);
    ```
  </Tab>
</Tabs>

> **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](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_header.xml).

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

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="messages" href="/ui-kit/android/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/android/message-composer">
    Rich input for sending messages
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/android/conversations">
    Browse recent conversations
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/android/theme-introduction">
    Customize colors, fonts, and styles
  </Card>
</CardGroup>