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

# Threaded Messages Header

> Configure CometChat Android UI Kit threaded message headers with parent message context, reply views, composer layout, and back actions.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatThreadHeader",
    "package": "com.cometchat.chatuikit.threadheader",
    "xmlElement": "<com.cometchat.chatuikit.threadheader.CometChatThreadHeader />",
    "description": "Displays the parent message bubble and reply count for a threaded conversation. Requires setParentMessage(BaseMessage) to render.",
    "primaryInput": {
      "method": "setParentMessage",
      "type": "BaseMessage",
      "note": "Must be called to display the parent message in the thread header"
    },
    "primaryOutput": {
      "description": "Renders the parent message bubble and reply count. No primary callback output."
    },
    "methods": {
      "data": {
        "setParentMessage": {
          "type": "BaseMessage",
          "note": "Sets the parent message for the thread header. Required."
        }
      },
      "visibility": {
        "setReactionVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" },
        "setAvatarVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" },
        "setReceiptsVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" },
        "setReplyCountVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" },
        "setReplyCountBarVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" }
      },
      "templates": {
        "setTemplates": {
          "type": "List<CometChatMessageTemplate>",
          "note": "Replaces the default list of message templates"
        },
        "addTemplate": {
          "type": "CometChatMessageTemplate",
          "note": "Adds a single template to the existing list"
        }
      },
      "advanced": {
        "setAlignment": "UIKitConstants.MessageListAlignment — STANDARD or LEFT_ALIGNED",
        "setMaxHeight": "@Dimension int — maximum height in pixels",
        "setTimeFormat": "SimpleDateFormat — custom time format for the parent message",
        "setTextFormatters": "List<CometChatTextFormatter> — custom text formatters",
        "setIncomingMessageBubbleStyle": "@StyleRes int — incoming bubble style",
        "setOutgoingMessageBubbleStyle": "@StyleRes int — outgoing bubble style",
        "getRecyclerView": "RecyclerView — internal RecyclerView",
        "getBinding": "CometchatThreadHeaderBinding — root ViewBinding",
        "getThreadedHeaderViewModel": "ThreadHeaderViewModel — internal ViewModel",
        "getAdapter": "MessageAdapter — internal adapter"
      },
      "style": {
        "setStyle": {
          "type": "@StyleRes int",
          "parent": "CometChatThreadHeaderStyle"
        }
      }
    },
    "events": [],
    "sdkListeners": []
  }
  ```
</Accordion>

## Where It Fits

`CometChatThreadHeader` is a header component for threaded message views. It renders the parent message bubble and reply count. Wire it above a `CometChatMessageList` and `CometChatMessageComposer` to build a complete threaded conversation layout.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin ThreadActivity.kt lines theme={null}
    class ThreadActivity : AppCompatActivity() {

        private lateinit var threadHeader: CometChatThreadHeader
        private lateinit var messageList: CometChatMessageList
        private lateinit var messageComposer: CometChatMessageComposer

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

            threadHeader = findViewById(R.id.thread_header)
            messageList = findViewById(R.id.message_list)
            messageComposer = findViewById(R.id.message_composer)

            // parentMessage is the BaseMessage that started the thread
            threadHeader.setParentMessage(parentMessage)
            messageList.setParentMessage(parentMessage)
            messageComposer.setParentMessage(parentMessage)
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java ThreadActivity.java lines theme={null}
    public class ThreadActivity extends AppCompatActivity {

        private CometChatThreadHeader threadHeader;
        private CometChatMessageList messageList;
        private CometChatMessageComposer messageComposer;

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

            threadHeader = findViewById(R.id.thread_header);
            messageList = findViewById(R.id.message_list);
            messageComposer = findViewById(R.id.message_composer);

            // parentMessage is the BaseMessage that started the thread
            threadHeader.setParentMessage(parentMessage);
            messageList.setParentMessage(parentMessage);
            messageComposer.setParentMessage(parentMessage);
        }
    }
    ```
  </Tab>
</Tabs>

## Quick Start

Add the component to your layout XML:

```xml layout_activity.xml lines theme={null}
<com.cometchat.chatuikit.threadheader.CometChatThreadHeader
    android:id="@+id/thread_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/IswwmAgbm47WtdFq/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=IswwmAgbm47WtdFq&q=85&s=ce49aa21a7024ac2b5838583735ca1ed" width="2560" height="658" data-path="images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png" />
</Frame>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.

Set the parent message in your Activity:

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

        val threadHeader = findViewById<CometChatThreadHeader>(R.id.thread_header)
        threadHeader.setParentMessage(baseMessage)
    }
    ```
  </Tab>

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

        CometChatThreadHeader threadHeader = findViewById(R.id.thread_header);
        threadHeader.setParentMessage(baseMessage);
    }
    ```
  </Tab>
</Tabs>

Or in a Fragment:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourFragment.kt lines theme={null}
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        val view = inflater.inflate(R.layout.fragment_thread, container, false)
        val threadHeader = view.findViewById<CometChatThreadHeader>(R.id.thread_header)
        threadHeader.setParentMessage(baseMessage)
        return view
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourFragment.java lines theme={null}
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_thread, container, false);
        CometChatThreadHeader threadHeader = view.findViewById(R.id.thread_header);
        threadHeader.setParentMessage(baseMessage);
        return view;
    }
    ```
  </Tab>
</Tabs>

## Actions and Events

### Callback Methods

`CometChatThreadHeader` does not expose component-specific callback methods like `setOnItemClick` or `setOnError`. It is a display-only header that renders the parent message and reply count.

### Global UI Events (CometChatMessageEvents)

`CometChatThreadHeader` does not emit its own global UI events. The parent message updates are handled internally via the `ThreadHeaderViewModel`, which listens for message edits, deletes, and reaction changes on the parent message.

### SDK Events (Real-Time, Automatic)

The component listens to SDK events internally via its ViewModel. No manual attachment needed.

| SDK Listener | Internal behavior |
| - | - |
| Message edited | Updates the parent message bubble if the parent message is edited |
| Message deleted | Updates the parent message bubble if the parent message is deleted |
| Reply count changed | Updates the reply count indicator when new replies are added |

> Automatic: parent message changes and reply count updates reflect in real time.

## Functionality

Small functional customizations such as toggling visibility of UI elements and configuring alignment.

| Method | Description | Code |
| - | - | - |
| `setReactionVisibility` | Shows or hides reactions on the parent message bubble | `.setReactionVisibility(View.GONE)` |
| `setAvatarVisibility` | Shows or hides the avatar in the thread header | `.setAvatarVisibility(View.GONE)` |
| `setReceiptsVisibility` | Shows or hides read receipts on the parent message bubble | `.setReceiptsVisibility(View.GONE)` |
| `setReplyCountVisibility` | Shows or hides the reply count text | `.setReplyCountVisibility(View.GONE)` |
| `setReplyCountBarVisibility` | Shows or hides the reply count bar/layout | `.setReplyCountBarVisibility(View.GONE)` |
| `setMaxHeight` | Sets the maximum height limit for the thread header in pixels | `.setMaxHeight(500)` |
| `setAlignment` | Sets bubble alignment: STANDARD (left/right by message type) or LEFT\_ALIGNED (all left) | `.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED)` |

* **Verify**: After calling a visibility method, confirm the corresponding UI element is shown or hidden.

## Custom View Slots

`CometChatThreadHeader` does not use the traditional `ViewHolderListener` pattern for view slots. Instead, it uses `CometChatMessageTemplate` to customize how the parent message bubble is rendered.

### `setTemplates`

Replaces the default list of message templates used to render the parent message bubble.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val customTemplates: List<CometChatMessageTemplate> = listOf(myCustomTemplate)
    threadHeader.setTemplates(customTemplates)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    List<CometChatMessageTemplate> customTemplates = Arrays.asList(myCustomTemplate);
    threadHeader.setTemplates(customTemplates);
    ```
  </Tab>
</Tabs>

> **What this does:** Replaces the entire set of message templates. The parent message bubble renders using the custom template configuration. If you pass an empty list, no message bubble renders.

### `addTemplate`

Adds a single message template to the existing list without replacing defaults.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.addTemplate(myCustomTemplate)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.addTemplate(myCustomTemplate);
    ```
  </Tab>
</Tabs>

> **What this does:** Appends a new `CometChatMessageTemplate` to the existing template list. Use this when you want to support an additional message type without removing the built-in templates.

* **Verify**: After calling `setTemplates` or `addTemplate`, confirm the parent message bubble renders using the custom template configuration.

## Common Patterns

### Hide reactions on the parent message

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

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

### Left-align all message bubbles

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED);
    ```
  </Tab>
</Tabs>

### Custom time format

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setTimeFormat(SimpleDateFormat("hh:mm a", Locale.getDefault()))
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setTimeFormat(new SimpleDateFormat("hh:mm a", Locale.getDefault()));
    ```
  </Tab>
</Tabs>

### Hide reply count and reply count bar

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setReplyCountVisibility(View.GONE)
    threadHeader.setReplyCountBarVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setReplyCountVisibility(View.GONE);
    threadHeader.setReplyCountBarVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

## Advanced Methods

### `setParentMessage`

Sets the parent message for the thread header. This is required — the component will not render without it.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setParentMessage(baseMessage)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setParentMessage(baseMessage);
    ```
  </Tab>
</Tabs>

### `setTemplates`

Replaces the default list of message templates used to render the parent message bubble.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setTemplates(customTemplateList)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setTemplates(customTemplateList);
    ```
  </Tab>
</Tabs>

### `addTemplate`

Adds a single message template to the existing list.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.addTemplate(customTemplate)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.addTemplate(customTemplate);
    ```
  </Tab>
</Tabs>

### `setTextFormatters`

Adds custom text formatters to the current list of formatters used in the thread header.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setTextFormatters(listOf(myCustomFormatter))
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setTextFormatters(Arrays.asList(myCustomFormatter));
    ```
  </Tab>
</Tabs>

### `setTimeFormat`

Sets a custom time format for the parent message display.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setTimeFormat(SimpleDateFormat("hh:mm a", Locale.getDefault()))
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setTimeFormat(new SimpleDateFormat("hh:mm a", Locale.getDefault()));
    ```
  </Tab>
</Tabs>

### `setAlignment`

Sets the bubble alignment for the parent message.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    threadHeader.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    threadHeader.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED);
    ```
  </Tab>
</Tabs>

> In `STANDARD` mode, the bubble appears on the left or right based on whether the message is incoming or outgoing. In `LEFT_ALIGNED` mode, all bubbles appear on the left.

### Internal Access

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

| Method | Returns | Description |
| - | - | - |
| `getRecyclerView()` | `RecyclerView` | The RecyclerView used for the parent message bubble |
| `getBinding()` | `CometchatThreadHeaderBinding` | The ViewBinding for the component's root layout |
| `getThreadedHeaderViewModel()` | `ThreadHeaderViewModel` | The ViewModel managing thread header state |
| `getAdapter()` | `MessageAdapter` | The adapter powering the parent message RecyclerView |

### Bubble Style Methods

| Method | Type | Description |
| - | - | - |
| `setIncomingMessageBubbleStyle` | `@StyleRes int` | Sets the style for incoming message bubbles |
| `setOutgoingMessageBubbleStyle` | `@StyleRes int` | Sets the style for outgoing message bubbles |

> Use internal access methods only when the standard API is insufficient. Directly manipulating the adapter or ViewModel may conflict with the component's internal state management.

## Style

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=d3144553a91526f7b7e30cd6c7e1615f" width="1280" height="329" data-path="images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png" />
</Frame>

```xml themes.xml lines theme={null}
    <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>
    <style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomThreadHeaderStyle" parent="CometChatThreadHeaderStyle">
        <item name="cometchatThreadHeaderOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
        <item name="cometchatThreadHeaderIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
        <item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>
        <item name="cometchatThreadHeaderReplyCountTextColor">#F76808</item>
        <item name="cometchatThreadHeaderReplyCountBackgroundColor">#FEEDE1</item>
    </style>
```

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

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

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

### Programmatic Style Properties

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

| Method | Type | Description |
| - | - | - |
| `setReplyCountBackgroundColor` | `@ColorInt int` | Background color of the reply count view |
| `setReplyCountTextColor` | `@ColorInt int` | Text color of the reply count view |
| `setReplyCountTextAppearance` | `@StyleRes int` | Text appearance of the reply count view |
| `setIncomingMessageBubbleStyle` | `@StyleRes int` | Style for incoming message bubbles |
| `setOutgoingMessageBubbleStyle` | `@StyleRes int` | Style for outgoing message bubbles |

## Customization Matrix

| What to change | Where | Property/API | Example |
| - | - | - | - |
| Parent message | Activity/Fragment | `setParentMessage(BaseMessage)` | `threadHeader.setParentMessage(baseMessage)` |
| Reaction visibility | Activity/Fragment | `setReactionVisibility(int)` | `.setReactionVisibility(View.GONE)` |
| Avatar visibility | Activity/Fragment | `setAvatarVisibility(int)` | `.setAvatarVisibility(View.GONE)` |
| Receipt visibility | Activity/Fragment | `setReceiptsVisibility(int)` | `.setReceiptsVisibility(View.GONE)` |
| Reply count visibility | Activity/Fragment | `setReplyCountVisibility(int)` | `.setReplyCountVisibility(View.GONE)` |
| Reply count bar visibility | Activity/Fragment | `setReplyCountBarVisibility(int)` | `.setReplyCountBarVisibility(View.GONE)` |
| Max height | Activity/Fragment | `setMaxHeight(int)` | `.setMaxHeight(500)` |
| Bubble alignment | Activity/Fragment | `setAlignment(MessageListAlignment)` | `.setAlignment(UIKitConstants.MessageListAlignment.LEFT_ALIGNED)` |
| Time format | Activity/Fragment | `setTimeFormat(SimpleDateFormat)` | `.setTimeFormat(new SimpleDateFormat("hh:mm a", Locale.getDefault()))` |
| Text formatters | Activity/Fragment | `setTextFormatters(List)` | `.setTextFormatters(formatterList)` |
| Message templates (replace) | Activity/Fragment | `setTemplates(List<CometChatMessageTemplate>)` | `.setTemplates(templateList)` |
| Message templates (add) | Activity/Fragment | `addTemplate(CometChatMessageTemplate)` | `.addTemplate(template)` |
| Outgoing bubble style | `themes.xml` | `cometchatThreadHeaderOutgoingMessageBubbleStyle` | `<item name="cometchatThreadHeaderOutgoingMessageBubbleStyle">@style/CustomOutgoingStyle</item>` |
| Incoming bubble style | `themes.xml` | `cometchatThreadHeaderIncomingMessageBubbleStyle` | `<item name="cometchatThreadHeaderIncomingMessageBubbleStyle">@style/CustomIncomingStyle</item>` |
| Header background color | `themes.xml` | `cometchatThreadHeaderBackgroundColor` | `<item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>` |
| Reply count text color | `themes.xml` | `cometchatThreadHeaderReplyCountTextColor` | `<item name="cometchatThreadHeaderReplyCountTextColor">#F76808</item>` |
| Reply count background color | `themes.xml` | `cometchatThreadHeaderReplyCountBackgroundColor` | `<item name="cometchatThreadHeaderReplyCountBackgroundColor">#FEEDE1</item>` |
| Apply a custom style | Activity/Fragment | `setStyle(int styleRes)` | `threadHeader.setStyle(R.style.CustomThreadHeaderStyle)` |
| Incoming bubble style (programmatic) | Activity/Fragment | `setIncomingMessageBubbleStyle(int)` | `.setIncomingMessageBubbleStyle(R.style.CustomIncomingStyle)` |
| Outgoing bubble style (programmatic) | Activity/Fragment | `setOutgoingMessageBubbleStyle(int)` | `.setOutgoingMessageBubbleStyle(R.style.CustomOutgoingStyle)` |
| Reply count background (programmatic) | Activity/Fragment | `setReplyCountBackgroundColor(int)` | `.setReplyCountBackgroundColor(Color.parseColor("#FEEDE1"))` |
| Reply count text color (programmatic) | Activity/Fragment | `setReplyCountTextColor(int)` | `.setReplyCountTextColor(Color.parseColor("#F76808"))` |
| Reply count text appearance (programmatic) | Activity/Fragment | `setReplyCountTextAppearance(int)` | `.setReplyCountTextAppearance(R.style.CustomTextAppearance)` |
| Internal adapter access | Activity/Fragment | `getAdapter()` | Advanced use only |

## Next Steps

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

  <Card title="Message Header" icon="heading" href="/ui-kit/android/v5/message-header">
    Display user/group info in the toolbar
  </Card>

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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.