> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-correction-sticker-button-react-v7-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble Styling

> Configure and style incoming, outgoing, and specific message bubbles in your Android UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                                                                                                            |
  | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Kotlin XML Views | Override XML styles extending `CometChatIncomingMessageBubbleStyle` / `CometChatOutgoingMessageBubbleStyle` in `themes.xml`                                      |
  | Jetpack Compose  | Pass `CometChatMessageListStyle.default().copy()` with nested bubble styles to `CometChatMessageList`                                                            |
  | Hub styles       | Incoming and Outgoing bubble styles act as central hubs for per-type bubble customization                                                                        |
  | Per-type styles  | Text, Image, Audio, Video, File, Sticker, Poll, Collaborative, Meet Call, Delete, Action, Call Action                                                            |
  | Related          | [Theme Introduction](/ui-kit/android/theme-introduction) · [Component Styling](/ui-kit/android/component-styling) · [Message List](/ui-kit/android/message-list) |
</Accordion>

Configure and style incoming, outgoing, and specific message bubbles.

***

## Styling Architecture

Message bubbles follow a hub-and-spoke pattern:

1. **Hub styles** — `IncomingMessageBubbleStyle` and `OutgoingMessageBubbleStyle` control the base bubble appearance
2. **Per-type styles** — Text, Image, Audio, etc. are nested inside the hub styles

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/_4WvtMmqNwSZGvzp/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=_4WvtMmqNwSZGvzp&q=85&s=7386fd2127772ac1c8682bc7db6baaf5" width="724" height="164" data-path="images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png" />
</Frame>

### Global Setup

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <!-- Hub for Incoming Messages -->
    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#FEEDE1</item>
    </style>

    <!-- Hub for Outgoing Messages -->
    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <!-- Connect to AppTheme -->
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatIncomingMessageBubbleStyle">@style/CustomIncomingBubble</item>
        <item name="cometchatOutgoingMessageBubbleStyle">@style/CustomOutgoingBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageList(
        style = CometChatMessageListStyle.default().copy(
            incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
                backgroundColor = Color(0xFFFEEDE1)
            ),
            outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
                backgroundColor = Color(0xFFF76808)
            )
        )
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/1zog8QvO4fV6SP7j/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=1zog8QvO4fV6SP7j&q=85&s=0aec3440fa7c916f640f18f046abf2c4" width="1203" height="1321" data-path="images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/LSB6GJkSfv-yU0-o/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=LSB6GJkSfv-yU0-o&q=85&s=fd9448fc6595af4f962043c95dbfe69b" width="1203" height="1321" data-path="images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png" />
</Frame>

***

## Core Message Bubbles

### Text Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/_4WvtMmqNwSZGvzp/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=_4WvtMmqNwSZGvzp&q=85&s=f23ada65ab3eb99fa9258f9e5662517c" width="1200" height="396" data-path="images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomIncomingTextBubble" parent="CometChatIncomingTextMessageBubbleStyle">
        <item name="cometchatTextBubbleBackgroundColor">#FEEDE1</item>
    </style>

    <style name="CustomOutgoingTextBubble" parent="CometChatOutgoingTextBubbleStyle">
        <item name="cometchatTextBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatTextBubbleStyle">@style/CustomIncomingTextBubble</item>
    </style>

    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatTextBubbleStyle">@style/CustomOutgoingTextBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    // Inside CometChatMessageListStyle
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        textBubbleStyle = CometChatTextBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1)
        )
    ),
    outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
        textBubbleStyle = CometChatTextBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

### Image Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/2QCrpOecq_DQ6OoU/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=2QCrpOecq_DQ6OoU&q=85&s=df535a6336f282904396feed99ed5e83" width="1200" height="1392" data-path="images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomIncomingImageBubble" parent="CometChatIncomingImageMessageBubbleStyle">
        <item name="cometchatImageBubbleBackgroundColor">#FEEDE1</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatImageBubbleStyle">@style/CustomIncomingImageBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        imageBubbleStyle = CometChatImageBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1)
        )
    )
    ```
  </Tab>
</Tabs>

### Images Bubble

Renders a message that carries **multiple image attachments** (`CometChatImagesBubble`) as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more images than visible tiles, the last tile shows a "+N" overflow overlay. Tapping a tile opens the fullscreen gallery viewer. A caption renders underneath the grid. This is the multi-attachment bubble the list renders for image messages; the single-attachment [Image Bubble](#image-bubble) remains for standalone use.

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/x1UFX32BvG2dAv_m/images/imagesbubble.png?fit=max&auto=format&n=x1UFX32BvG2dAv_m&q=85&s=8560c11a03c70af1518b298fac3e0af9" alt="Images Bubble rendering a grid of image attachments with a +N overflow overlay on the last tile" width="1200" height="1392" data-path="images/imagesbubble.png" />
</Frame>

The image grid derives its look from your [CometChat theme](/ui-kit/android/theme-introduction). In **Jetpack Compose** it is governed by the dedicated `CometChatImagesBubbleStyle` class. Its grid-specific properties:

| Property                                        | Type                  | Description                                  |
| ----------------------------------------------- | --------------------- | -------------------------------------------- |
| `tileCornerRadius`                              | `Dp`                  | Corner radius of each grid tile              |
| `gridSpacing`                                   | `Dp`                  | Gap between tiles (default `2.dp`)           |
| `tilePlaceholderColor`                          | `Color`               | Shown while a tile's image loads             |
| `moreOverlayBackgroundColor`                    | `Color`               | Scrim over the last tile when items overflow |
| `moreOverlayTextColor` / `moreOverlayTextStyle` | `Color` / `TextStyle` | The "+N" overflow label                      |
| `captionTextColor` / `captionTextStyle`         | `Color` / `TextStyle` | The caption row under the grid               |

### Video Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/ZGvcfPWUvPnKNOHw/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=ZGvcfPWUvPnKNOHw&q=85&s=63cb72c7308eb100955965841d8b5714" width="1200" height="1016" data-path="images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomIncomingVideoBubble" parent="CometChatIncomingVideoBubbleStyle">
        <item name="cometchatVideoBubbleBackgroundColor">#FEEDE1</item>
        <item name="cometchatVideoBubblePlayIconTint">#F76808</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatVideoBubbleStyle">@style/CustomIncomingVideoBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        videoBubbleStyle = CometChatVideoBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            playIconTint = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

### Videos Bubble

Renders a message that carries **multiple video attachments** (`CometChatVideosBubble`) as a count-based grid (1, 2, 3, 4, or 5+ tiles). Each tile shows a poster thumbnail with a centered play badge and a duration chip; the last tile shows a "+N" overflow overlay when there are more videos than visible tiles. Tapping a tile opens the fullscreen player. A caption renders underneath the grid. This is the multi-attachment bubble the list renders for video messages; the single-attachment [Video Bubble](#video-bubble) remains for standalone use.

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/C8ZSgNti4S7Qo9Sg/images/videosbubble.png?fit=max&auto=format&n=C8ZSgNti4S7Qo9Sg&q=85&s=d4291bdefac928afb300f5782fb2ad05" alt="Videos Bubble rendering a grid of video thumbnails, each with a centered play badge, and a +N overflow overlay on the last tile" width="1200" height="1384" data-path="images/videosbubble.png" />
</Frame>

The video grid derives its look from your [CometChat theme](/ui-kit/android/theme-introduction). In **Jetpack Compose** it is governed by the dedicated `CometChatVideosBubbleStyle` class. Its grid-specific properties:

| Property                                                                       | Type                  | Description                            |
| ------------------------------------------------------------------------------ | --------------------- | -------------------------------------- |
| `tileCornerRadius` / `gridSpacing`                                             | `Dp`                  | Tile corner radius and gap             |
| `tilePlaceholderColor`                                                         | `Color`               | Shown while a thumbnail loads          |
| `moreOverlayBackgroundColor` / `moreOverlayTextColor` / `moreOverlayTextStyle` | `Color` / `TextStyle` | The "+N" overflow overlay              |
| `playBadgeBackgroundColor` / `playIconTint`                                    | `Color`               | The centered play badge on video tiles |
| `durationChipBackgroundColor` / `durationTextColor` / `durationTextStyle`      | `Color` / `TextStyle` | The duration chip                      |
| `showVideoDuration`                                                            | `Boolean`             | Whether the duration chip is shown     |
| `captionTextColor` / `captionTextStyle`                                        | `Color` / `TextStyle` | The caption row under the grid         |

### Audio Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/i93A7u3Nu5xLbeLa/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=i93A7u3Nu5xLbeLa&q=85&s=4749e96374854dcb3dd4c503b6db5070" width="1200" height="640" data-path="images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomIncomingAudioBubble" parent="CometChatIncomingAudioBubbleStyle">
        <item name="cometchatAudioBubbleAudioWaveColor">#F76808</item>
        <item name="cometchatAudioBubblePlayIconTint">#F76808</item>
        <item name="cometchatAudioBubbleBackgroundColor">#FEEDE1</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatAudioBubbleStyle">@style/CustomIncomingAudioBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        audioBubbleStyle = CometChatAudioBubbleStyle.default().copy(
            playIconTint = Color(0xFFF76808),
            backgroundColor = Color(0xFFFEEDE1)
        )
    )
    ```
  </Tab>
</Tabs>

### Audios Bubble

Renders a message carrying **audio file attachments** (`CometChatAudiosBubble`) — audio chosen through the file/audio picker — one player row per file, each with a play/pause button, a seekable progress bar, the time, the file name, and a download control. Four or more files collapse behind a "Show N more" toggle. Only one row plays at a time.

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/JYgYgmvmfvWgfQ_S/images/audiobubble.png?fit=max&auto=format&n=JYgYgmvmfvWgfQ_S&q=85&s=9382b0738ec1fee285b0f8b7b010cf0a" alt="Audios Bubble rendering stacked audio player rows, each with a play button, seek bar, time, file name, and download control, plus a Show N more toggle" width="1200" height="1520" data-path="images/audiobubble.png" />
</Frame>

<Note>
  This bubble is distinct from the [Audio Bubble](#audio-bubble), which renders **voice notes** recorded with the composer's microphone. Voice notes keep their waveform look and are never grouped with other attachments.
</Note>

In **Jetpack Compose** it is governed by `CometChatAudiosBubbleStyle`; the **Kotlin (XML Views)** list reuses your existing [Audio Bubble](#audio-bubble) style. Key Compose properties:

| Property                                                                     | Type                  | Description                                                             |
| ---------------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------- |
| `cardBackgroundColor` / `cardCornerRadius`                                   | `Color` / `Dp`        | Each player card (applies only when the message carries multiple files) |
| `itemSpacing`                                                                | `Dp`                  | Vertical gap between cards                                              |
| `playButtonBackgroundColor` / `playIconTint`                                 | `Color`               | The play/pause circle                                                   |
| `seekFillColor` / `seekTrackColor` / `seekKnobColor` / `seekKnobBorderColor` | `Color`               | The seek bar                                                            |
| `titleTextColor` / `titleTextStyle`                                          | `Color` / `TextStyle` | File name text                                                          |
| `durationTextColor` / `durationTextStyle`                                    | `Color` / `TextStyle` | The "mm:ss / mm:ss" time text                                           |
| `downloadIconTint`                                                           | `Color`               | Per-card download icon                                                  |
| `toggleTextColor` / `toggleTextStyle`                                        | `Color` / `TextStyle` | The "Show N more" / "Show less" toggle                                  |
| `captionTextColor` / `captionTextStyle`                                      | `Color` / `TextStyle` | The caption row under the cards                                         |

### File Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/LSB6GJkSfv-yU0-o/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=LSB6GJkSfv-yU0-o&q=85&s=a71359eb12eaa5e6f5bcd9a63c9a5529" width="1200" height="632" data-path="images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomIncomingFileBubble" parent="CometChatIncomingFileBubbleStyle">
        <item name="cometchatFileBubbleBackgroundColor">#FEEDE1</item>
        <item name="cometchatFileBubbleFileDownloadIconTint">#F76808</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatFileBubbleStyle">@style/CustomIncomingFileBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        fileBubbleStyle = CometChatFileBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            downloadIconTint = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

### Files Bubble

Renders a message carrying **document attachments** as a connected stack of file cards — each with a file-type icon (PDF, Word, Excel, PowerPoint, ZIP, …), the file name, and its size/extension metadata. Four or more files collapse behind a "+N more" toggle. Tapping a card opens the file. A caption renders under the stack.

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/5do9EVGc1DAZSyfK/images/filesbubble.png?fit=max&auto=format&n=5do9EVGc1DAZSyfK&q=85&s=0c04553e20d19a90149c3530e35bc86e" alt="Files Bubble rendering a stack of file cards, each with a file-type icon, file name, and size metadata, plus a Show N more toggle" width="1200" height="1240" data-path="images/filesbubble.png" />
</Frame>

<Note>
  `cardBackgroundColor` only applies when the message carries **multiple** files — a single file card sits directly on the bubble background.
</Note>

In **Jetpack Compose** it is governed by `CometChatFilesBubbleStyle`; the **Kotlin (XML Views)** list reuses your existing [File Bubble](#file-bubble) style. Key Compose properties:

| Property                                                            | Type                  | Description                        |
| ------------------------------------------------------------------- | --------------------- | ---------------------------------- |
| `cardBackgroundColor` / `cardCornerRadius`                          | `Color` / `Dp`        | Each file card (multiples only)    |
| `itemSpacing`                                                       | `Dp`                  | Vertical gap between cards         |
| `fileIconBackgroundColor` / `fileIconCornerRadius` / `fileIconSize` | `Color` / `Dp`        | The file-type icon plate           |
| `titleTextColor` / `titleTextStyle`                                 | `Color` / `TextStyle` | File name text                     |
| `subtitleTextColor` / `subtitleTextStyle`                           | `Color` / `TextStyle` | File size/extension text           |
| `downloadIconTint`                                                  | `Color`               | Per-card download icon             |
| `toggleTextColor` / `toggleTextStyle`                               | `Color` / `TextStyle` | The "+N more" / "Show less" toggle |
| `captionTextColor` / `captionTextStyle`                             | `Color` / `TextStyle` | The caption row under the cards    |

<Note>
  Captions containing rich text (code blocks, quote blocks, inline code) render through the same pipeline as [Text Bubbles](#text-bubble), so their formatting looks identical across message types.
</Note>

***

### Sticker Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/I8u0O-x0rd4hzVDU/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=I8u0O-x0rd4hzVDU&q=85&s=91a4602a5af3519c11280bb3bcf10bc8" width="1200" height="1128" data-path="images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomStickerBubble" parent="CometChatStickerBubbleStyle">
        <item name="cometchatStickerBubbleBackgroundColor">#FEEDE1</item>
    </style>

    <style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatStickerBubbleStyle">@style/CustomStickerBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
        stickerBubbleStyle = CometChatStickerBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1)
        )
    )
    ```
  </Tab>
</Tabs>

### Poll Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/CF1TPyQ0VsVo2G9g/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=CF1TPyQ0VsVo2G9g&q=85&s=90d3e34b417a79915bbed1cee73506c1" width="1200" height="1412" data-path="images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomOutgoingPollBubble" parent="CometChatOutgoingPollBubbleStyle">
        <item name="cometchatPollBubbleBackgroundColor">#F76808</item>
        <item name="cometchatPollBubbleProgressBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatPollBubbleStyle">@style/CustomOutgoingPollBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
        pollBubbleStyle = CometChatPollBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808),
            progressBackgroundColor = Color(0xFFFBAA75)
        )
    )
    ```
  </Tab>
</Tabs>

### Collaborative Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/GoubiNh13zj6T7MK/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=GoubiNh13zj6T7MK&q=85&s=b92b0e20d800f1adbb7f0cea5ad7c981" width="1200" height="1336" data-path="images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomCollaborativeBubble" parent="CometChatOutgoingCollaborativeBubbleStyle">
        <item name="cometchatCollaborativeBubbleBackgroundColor">#F76808</item>
        <item name="cometchatCollaborativeBubbleSeparatorColor">#FBAA75</item>
    </style>

    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatCollaborativeBubbleStyle">@style/CustomCollaborativeBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
        collaborativeBubbleStyle = CometChatCollaborativeBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808),
            separatorColor = Color(0xFFFBAA75)
        )
    )
    ```
  </Tab>
</Tabs>

### Meet Call Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/CyyxMFhPTJkf8p1W/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=CyyxMFhPTJkf8p1W&q=85&s=c0d106a384e78bc858207d664d841965" width="1200" height="600" data-path="images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomMeetCallBubble" parent="CometChatOutgoingMeetCallBubbleStyle">
        <item name="cometchatMeetCallBubbleBackgroundColor">#F76808</item>
        <item name="cometchatMeetCallBubbleCallIconTint">#F76808</item>
    </style>

    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMeetCallBubbleStyle">@style/CustomMeetCallBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
        meetCallBubbleStyle = CometChatMeetCallBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808),
            callIconTint = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

### Delete Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/eLQlReWJtEztYBRU/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=eLQlReWJtEztYBRU&q=85&s=1dd5377cd7b2f6ac9613d2cef20f5df2" width="1200" height="396" data-path="images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomDeleteBubble" parent="CometChatOutgoingDeleteBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatDeleteBubbleStyle">@style/CustomDeleteBubble</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
        deleteBubbleStyle = CometChatDeleteBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

***

## List-Level Bubbles

These bubbles are tied to the Message List style, not the Incoming/Outgoing hubs.

### Call Action Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/RfGvhVr7xmY8k8S7/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=RfGvhVr7xmY8k8S7&q=85&s=21e40552167b54a7b0f9351682033081" width="1200" height="1304" data-path="images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomCallActionBubble" parent="CometChatCallActionBubbleStyle">
        <item name="cometchatCallActionBubbleBackgroundColor">#FEEDE1</item>
        <item name="cometchatCallActionBubbleTextColor">#F76808</item>
        <item name="cometchatCallActionBubbleIconTint">#F76808</item>
    </style>

    <style name="CustomMessageListStyle" parent="CometChatMessageListStyle">
        <item name="cometchatMessageListCallActionBubbleStyle">@style/CustomCallActionBubble</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatMessageListStyle">@style/CustomMessageListStyle</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageList(
        style = CometChatMessageListStyle.default().copy(
            callActionBubbleStyle = CometChatCallActionBubbleStyle.default().copy(
                backgroundColor = Color(0xFFFEEDE1),
                textColor = Color(0xFFF76808),
                iconTint = Color(0xFFF76808)
            )
        )
    )
    ```
  </Tab>
</Tabs>

### Action Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/244P3KMLyVcpwZw8/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=244P3KMLyVcpwZw8&q=85&s=1bedbe76ca8fb6922e65edeffbe85145" width="1200" height="476" data-path="images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <style name="CustomActionBubble" parent="CometChatActionBubbleStyle">
        <item name="cometchatActionBubbleBackgroundColor">#FEEDE1</item>
        <item name="cometchatActionBubbleTextColor">#F76808</item>
    </style>

    <style name="CustomMessageListStyle" parent="CometChatMessageListStyle">
        <item name="cometchatMessageListActionBubbleStyle">@style/CustomActionBubble</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatMessageListStyle">@style/CustomMessageListStyle</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageList(
        style = CometChatMessageListStyle.default().copy(
            actionBubbleStyle = CometChatActionBubbleStyle.default().copy(
                backgroundColor = Color(0xFFFEEDE1),
                textColor = Color(0xFFF76808)
            )
        )
    )
    ```
  </Tab>
</Tabs>