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

# Message Bubble Styling

> Customize CometChat Android UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, and per-message-type styling.

<Accordion title="AI Integration Quick Reference">
  | Field           | Value                                                                                                                                                              |
  | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Goal            | Customize incoming, outgoing, and per-type message bubble appearance via XML theme styles                                                                          |
  | Where           | `app/src/main/res/values/themes.xml`                                                                                                                               |
  | Hub styles      | `CometChatIncomingMessageBubbleStyle`, `CometChatOutgoingMessageBubbleStyle`                                                                                       |
  | Per-type styles | Text, Image, Audio, Video, File, Sticker, Poll, Collaborative, Call Action, Delete, AI Assistant bubbles                                                           |
  | Constraints     | App theme must extend `CometChatTheme.DayNight`; rebuild after updating styles                                                                                     |
  | 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 in your Android UI Kit.

## When to use this

* You want to customize the look of incoming and outgoing message bubbles.
* You need different styles for text, image, audio, video, file, sticker, poll, or collaborative bubbles.
* You want to style call action bubbles, delete bubbles, or AI assistant bubbles.
* You need to customize quoted reply previews.
* You prefer centralized styling through `res/values/themes.xml`.

## Prerequisites

* CometChat UI Kit for Android is installed and initialized.
* Your app theme extends `CometChatTheme.DayNight`.
* You can edit `res/values/themes.xml` in your Android module.
* You rebuild or sync Gradle after updating styles.

## Quick start

<Steps>
  <Step title="Set up the global bubble hubs">
    Define `CustomIncomingMessageBubbleStyle` and `CustomOutgoingMessageBubbleStyle` in `res/values/themes.xml` and connect them to `AppTheme`.
  </Step>

  <Step title="Style a specific bubble type">
    Create a custom style for the bubble type (e.g., `CustomIncomingTextBubbleStyle`) and link it inside the hub style.
  </Step>

  <Step title="Build and verify">
    Run the app, open a conversation, and confirm the bubble styling.
  </Step>
</Steps>

Message bubbles are the core visual element in chat applications. Customizing them allows you to create a consistent user experience that aligns with your app's theme.

This guide covers how to style **Base Message Bubbles** (the container) and **Specific Message Types** (Text, Image, Audio, etc.). Customization options include adjusting the **background color**, **text appearance**, and **bubble shape** to differentiate between incoming and outgoing messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/fGexX2v11QMLjwDs/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=fGexX2v11QMLjwDs&q=85&s=b64fab68263012dd81ab09170c799a52" width="724" height="164" data-path="images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png" />
</Frame>

## Styling Architecture

To style message bubbles effectively without duplicating code, understand this inheritance hierarchy.

<Note>
  All code in this guide belongs in `res/values/themes.xml`.
</Note>

1. **`AppTheme`**: The root theme of your application.
2. **`Message Bubble Styles`**: Acts as a central hub for all incoming/outgoing message styles. Linked directly to the `AppTheme`.
3. **`Specific Bubble Styles`**: Targets specific message types (e.g., Text, Video, Audio). These are linked *inside* the Message Bubble Styles.

### Global Setup

Define this **once** in your `res/values/themes.xml`. All subsequent custom bubble styles will be routed through these hubs.

```xml themes.xml lines theme={null}
<!-- 1. Central Hub for Incoming Messages -->
<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#FEEDE1</item>
    <!-- Specific Incoming styles (Text, Image, etc.) will be added here -->
</style>

<!-- 2. Central Hub for Outgoing Messages -->
<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    <!-- Specific Outgoing styles (Text, Image, etc.) will be added here -->
</style>

<!-- 3. Connect the Hubs to your App Theme -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
   <item name="cometchatIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
   <item name="cometchatOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
</style>
```

Customizing Incoming Message Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/KzWXOqoHJmImenpg/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=KzWXOqoHJmImenpg&q=85&s=4c9747691eeb85eeb40ce9eb8a5b6af9" width="1203" height="1321" data-path="images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png" />
</Frame>

Customizing Outgoing Message Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/emvhP9byKNbSLznu/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=emvhP9byKNbSLznu&q=85&s=83f640692b6f88fa772640c099b6a136" width="1203" height="1321" data-path="images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png" />
</Frame>

**Attribute references:**

* [Message bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml)

## Core Message Bubbles

The following sections define how to style specific types of messages. Define the custom style, then link it to the central hubs (`CustomIncomingMessageBubbleStyle` or `CustomOutgoingMessageBubbleStyle`) established above.

### Text Bubble

Text bubbles display plain text messages. These are the most common bubble type.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/ZGAXZrNhwyd-yTPA/images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png?fit=max&auto=format&n=ZGAXZrNhwyd-yTPA&q=85&s=e6f3f5f405bcff4920ecdad5cd45d281" width="1200" height="396" data-path="images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/fGexX2v11QMLjwDs/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=fGexX2v11QMLjwDs&q=85&s=e571432e777613ea9cba1d6b283bc281" width="1200" height="396" data-path="images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingTextBubbleStyle" parent="CometChatIncomingTextMessageBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#FEEDE1</item>
</style>

<!-- Link to Hub -->
<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatTextBubbleStyle">@style/CustomIncomingTextBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingTextBubbleStyle" parent="CometChatOutgoingTextBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#F76808</item>
</style>

<!-- Link to Hub -->
<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatTextBubbleStyle">@style/CustomOutgoingTextBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Text bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml)

### Link Preview Bubble

Displays a preview of links shared in messages, enriching the experience with titles, descriptions, and images.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/KaqoZfbAjKCeB6Wd/images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png?fit=max&auto=format&n=KaqoZfbAjKCeB6Wd&q=85&s=36033530daf7ce4c4d4673d23a424878" width="1200" height="1836" data-path="images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/cH6DMYmUi7XGPCJ6/images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png?fit=max&auto=format&n=cH6DMYmUi7XGPCJ6&q=85&s=1ad665658544242c5ddb173ef8bbaad4" width="1200" height="1836" data-path="images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingTextBubbleStyle" parent="CometChatIncomingTextMessageBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatTextBubbleLinkPreviewBackgroundColor">#FBAA75</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingTextBubbleStyle" parent="CometChatOutgoingTextBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#F76808</item>
    <item name="cometchatTextBubbleLinkPreviewBackgroundColor">#FBAA75</item>
</style>
```

### Image Bubble

Image bubbles display images shared within a conversation.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/M7Xe5D2C2YVlNEEy/images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png?fit=max&auto=format&n=M7Xe5D2C2YVlNEEy&q=85&s=3aeb8a6ed8015c0e7be2f8a6d1723d5f" width="1200" height="1392" data-path="images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/0px8ba-Gw2xNtmel/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=0px8ba-Gw2xNtmel&q=85&s=c8f85d73068330029e32d60ac2f29e69" width="1200" height="1392" data-path="images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingImageBubbleStyle" parent="CometChatIncomingImageMessageBubbleStyle">
   <item name="cometchatImageBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatImageBubbleStyle">@style/CustomIncomingImageBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingImageBubbleStyle" parent="CometChatOutgoingImageBubbleStyle">
    <item name="cometchatImageBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatImageBubbleStyle">@style/CustomOutgoingImageBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Image bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_image_bubble.xml)

### Video Bubble

Video bubbles display video messages or clips in a chat.

**Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/zqfskHrqw9gnaCrA/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=zqfskHrqw9gnaCrA&q=85&s=70d7f2ce838d9386a69ab0d30e13abbb" width="1200" height="1016" data-path="images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingVideoBubbleStyle" parent="CometChatIncomingVideoBubbleStyle">
    <item name="cometchatVideoBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatVideoBubblePlayIconTint">#F76808</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatVideoBubbleStyle">@style/CustomIncomingVideoBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingVideoBubbleStyle" parent="CometChatOutgoingVideoBubbleStyle">
    <item name="cometchatVideoBubbleBackgroundColor">#F76808</item>
    <item name="cometchatVideoBubblePlayIconTint">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatVideoBubbleStyle">@style/CustomOutgoingVideoBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Video bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml)

### Audio Bubble

Audio bubbles represent audio messages or voice recordings.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/-5sdWCmSnVMqKZDA/images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png?fit=max&auto=format&n=-5sdWCmSnVMqKZDA&q=85&s=57255dacea3fd49fde83a7fef1c6f92f" width="1200" height="640" data-path="images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/GfDCNdaiTFFc81lo/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=GfDCNdaiTFFc81lo&q=85&s=c873961d5ed82c718040ad738e4f1eef" width="1200" height="640" data-path="images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingAudioBubbleStyle" parent="CometChatIncomingAudioBubbleStyle">
    <item name="cometchatAudioBubbleAudioWaveColor">#F76808</item>
    <item name="cometchatAudioBubblePlayIconTint">#F76808</item>
    <item name="cometchatAudioBubblePauseIconTint">#F76808</item>
    <item name="cometchatAudioBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatAudioBubbleStyle">@style/CustomIncomingAudioBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingAudioBubbleStyle" parent="CometChatOutgoingAudioBubbleStyle">
    <item name="cometchatAudioBubblePlayIconTint">#F76808</item>
    <item name="cometchatAudioBubblePauseIconTint">#F76808</item>
    <item name="cometchatAudioBubbleBackgroundColor">#F76808</item>
 </style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatAudioBubbleStyle">@style/CustomOutgoingAudioBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Audio bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml)

### File Bubble

Displays shared files, such as documents, PDFs, or spreadsheets.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/klPuF6mA1HMHdx3G/images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png?fit=max&auto=format&n=klPuF6mA1HMHdx3G&q=85&s=200d99b0212369f5ecabf01d8e6642e9" width="1200" height="632" data-path="images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/emvhP9byKNbSLznu/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=emvhP9byKNbSLznu&q=85&s=2781caa86a0cbcf2ba594825da6fdf31" width="1200" height="632" data-path="images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingFileBubbleStyle" parent="CometChatIncomingFileBubbleStyle">
    <item name="cometchatFileBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatFileBubbleFileDownloadIconTint">#F76808</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatFileBubbleStyle">@style/CustomIncomingFileBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingFileBubbleStyle" parent="CometChatOutgoingFileBubbleStyle">
    <item name="cometchatFileBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatFileBubbleStyle">@style/CustomOutgoingFileBubbleStyle</item>
</style>
```

**Attribute reference:**

* [File bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_file_bubble.xml)

### Sticker Bubble

Displays visual stickers shared in a conversation.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/emvhP9byKNbSLznu/images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png?fit=max&auto=format&n=emvhP9byKNbSLznu&q=85&s=71a833bcebe9ac591c1637652cd6f40a" width="1200" height="1128" data-path="images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/_Pg6Q5Xq0h1bqmRd/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=_Pg6Q5Xq0h1bqmRd&q=85&s=20a11758c460178aa3c255bc787f0836" width="1200" height="1128" data-path="images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingStickerBubbleStyle" parent="CometChatStickerBubbleStyle">
    <item name="cometchatStickerBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatStickerBubbleStyle">@style/CustomIncomingStickerBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingStickerBubbleStyle" parent="CometChatStickerBubbleStyle">
    <item name="cometchatStickerBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatStickerBubbleStyle">@style/CustomOutgoingStickerBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Sticker bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_bubble.xml)

### Poll Bubble

Displays polls, options, and live results.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/klPuF6mA1HMHdx3G/images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png?fit=max&auto=format&n=klPuF6mA1HMHdx3G&q=85&s=54ed752ab1981c68e2c04f8ae1350b49" width="1200" height="1412" data-path="images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/yXOOL4RAss5FvRnj/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=yXOOL4RAss5FvRnj&q=85&s=bec7af6502b4d4a04e395f34152d7132" width="1200" height="1412" data-path="images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingPollBubbleStyle" parent="CometChatIncomingPollBubbleStyle">
    <item name="cometchatPollBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatPollBubbleStyle">@style/CustomIncomingPollBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingPollBubbleStyle" parent="CometChatOutgoingPollBubbleStyle">
    <item name="cometchatPollBubbleBackgroundColor">#F76808</item>
    <item name="cometchatPollBubbleProgressBackgroundColor">#FBAA75</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatPollBubbleStyle">@style/CustomOutgoingPollBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Poll bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml)

### Collaborative Bubble

Displays collaborative content, such as shared documents or tasks.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/GfDCNdaiTFFc81lo/images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png?fit=max&auto=format&n=GfDCNdaiTFFc81lo&q=85&s=0a5267c51cc0c8fd57070bb0f3cfa452" width="1200" height="1336" data-path="images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/CjDnRhUye0Ac4eQg/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=CjDnRhUye0Ac4eQg&q=85&s=1d6745ca06a6db6c211ab81826b9a959" width="1200" height="1336" data-path="images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingCollaborativeBubbleStyle" parent="CometChatIncomingCollaborativeBubbleStyle">
    <item name="cometchatCollaborativeBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatCollaborativeBubbleStyle">@style/CustomIncomingCollaborativeBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingCollaborativeBubbleStyle" parent="CometChatOutgoingCollaborativeBubbleStyle">
    <item name="cometchatCollaborativeBubbleBackgroundColor">#F76808</item>
    <item name="cometchatCollaborativeBubbleSeparatorColor">#FBAA75</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatCollaborativeBubbleStyle">@style/CustomOutgoingCollaborativeBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Collaborative bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml)

### Meet Call Bubble

Displays call-related actions and statuses in the chat interface.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/xYjpjt3bElbB9NO6/images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png?fit=max&auto=format&n=xYjpjt3bElbB9NO6&q=85&s=20812f5c35799dd09db9f5b8f89b26c4" width="1200" height="600" data-path="images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/ceK6M7l4RL_K53nk/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=ceK6M7l4RL_K53nk&q=85&s=225c7e0985e165f6329e4552255e291f" width="1200" height="600" data-path="images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingMeetCallBubbleStyle" parent="CometChatIncomingMeetCallBubbleStyle">
    <item name="cometchatMeetCallBubbleBackgroundColor">#FBAA75</item>
    <item name="cometchatMeetCallBubbleCallIconTint">#F76808</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatMeetCallBubbleStyle">@style/CustomIncomingMeetCallBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingMeetCallBubbleStyle" parent="CometChatOutgoingMeetCallBubbleStyle">
    <item name="cometchatMeetCallBubbleBackgroundColor">#F76808</item>
    <item name="cometchatMeetCallBubbleSeparatorColor">#FBAA75</item>
    <item name="cometchatMeetCallBubbleCallIconTint">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMeetCallBubbleStyle">@style/CustomOutgoingMeetCallBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Meet call bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml)

### Delete Bubble

Indicates a message that has been removed by the sender.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/B0jmj6nkiMjBHNyi/images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png?fit=max&auto=format&n=B0jmj6nkiMjBHNyi&q=85&s=99f9a7cf2d246660d1c7ffd2c8be798f" width="1200" height="396" data-path="images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/cRx68hKSYWgpHc5c/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=cRx68hKSYWgpHc5c&q=85&s=f64f55e26a0fde01586af508130d2ea6" width="1200" height="396" data-path="images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- INCOMING -->
<style name="CustomIncomingDeleteBubbleStyle" parent="CometChatIncomingMessageDeleteStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#FBAA75</item>
</style>

<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatDeleteBubbleStyle">@style/CustomIncomingDeleteBubbleStyle</item>
</style>

<!-- OUTGOING -->
<style name="CustomOutgoingDeleteBubbleStyle" parent="CometChatOutgoingDeleteBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatDeleteBubbleStyle">@style/CustomOutgoingDeleteBubbleStyle</item>
</style>
```

**Attribute reference:**

* [Delete bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml)

## List-Level Bubbles & Special Features

Unlike standard messages, **Call Action** and **Action** bubbles are tied to the **Message List Style**, not the Incoming/Outgoing Hubs. AI Assistants and Quoted Replies have specialized formatting.

### Call Action Bubble

Displays call actions like missed calls within the message list.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/klPuF6mA1HMHdx3G/images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png?fit=max&auto=format&n=klPuF6mA1HMHdx3G&q=85&s=4f61351926ee643b136608809c9a96df" width="1200" height="1304" data-path="images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/klPuF6mA1HMHdx3G/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=klPuF6mA1HMHdx3G&q=85&s=d84aee4f107cfb0789ff7f2cbe40dfca" width="1200" height="1304" data-path="images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- 1. Define the Style -->
<style name="CustomCallActionBubbleStyle" parent="CometChatCallActionBubbleStyle">
    <item name="cometchatCallActionBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatCallActionBubbleStrokeWidth">@dimen/cometchat_1dp</item>
    <item name="cometchatCallActionBubbleStrokeColor">#F76808</item>
    <item name="cometchatCallActionBubbleTextColor">#F76808</item>
    <item name="cometchatCallActionBubbleIconTint">#F76808</item>
    <item name="cometchatCallActionBubbleMissedCallBackgroundColor">#FEEDE1</item>
    <item name="cometchatCallActionBubbleMissedCallIconTint">#F76808</item>
    <item name="cometchatCallActionBubbleMissedCallTextColor">#F76808</item>
</style>

<!-- 2. Apply it to the Message List Style -->
<style name="CustomCometChatMessageListStyle" parent="CometChatMessageListStyle">
    <item name="cometchatMessageListCallActionBubbleStyle">@style/CustomCallActionBubbleStyle</item>
</style>

<!-- 3. Connect to AppTheme -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatMessageListStyle">@style/CustomCometChatMessageListStyle</item>
</style>
```

**Attribute references:**

* [Call action bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_action_bubble.xml)
* [Message list attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml)

### Action Bubble

Displays global group actions (e.g., "User joined the chat").

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/xYjpjt3bElbB9NO6/images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png?fit=max&auto=format&n=xYjpjt3bElbB9NO6&q=85&s=58b5987f04706af0e8f32be22bc25f7f" width="1200" height="476" data-path="images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/xYjpjt3bElbB9NO6/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=xYjpjt3bElbB9NO6&q=85&s=390e281473ab4383c153aca7086a3bb4" width="1200" height="476" data-path="images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- 1. Define the Style -->
<style name="CustomActionBubbleStyle" parent="CometChatActionBubbleStyle">
    <item name="cometchatActionBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatActionBubbleStrokeWidth">@dimen/cometchat_1dp</item>
    <item name="cometchatActionBubbleStrokeColor">#F76808</item>
    <item name="cometchatActionBubbleTextColor">#F76808</item>
</style>

<!-- 2. Apply it to the Message List Style -->
<style name="CustomCometChatMessageListStyle" parent="CometChatMessageListStyle">
    <item name="cometchatMessageListActionBubbleStyle">@style/CustomActionBubbleStyle</item>
</style>

<!-- 3. Connect to AppTheme -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatMessageListStyle">@style/CustomCometChatMessageListStyle</item>
</style>
```

**Attribute reference:**

* [Action bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml)

### AI Assistant Bubble

Styles interactions generated by the AI assistant. These are anchored to the `IncomingMessageBubbleStyle`.

**Default & Customization**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/-5sdWCmSnVMqKZDA/images/android-ai-assistant-bubble-default.png?fit=max&auto=format&n=-5sdWCmSnVMqKZDA&q=85&s=1149fea4eca10e777a3ab8179755aa68" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-default.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/-5sdWCmSnVMqKZDA/images/android-ai-assistant-bubble-styled.png?fit=max&auto=format&n=-5sdWCmSnVMqKZDA&q=85&s=d166a20b7c6b6c5d7f7df6a86dde3d4c" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-styled.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- Define AI Font (Optional) -->
<style name="TextStyleTimesNewRoman">
    <item name="android:fontFamily">@font/times_new_roman_regular</item>
</style>

<!-- Define AI Bubble -->
<style name="CustomAIAssistantBubbleStyle">
    <item name="cometChatAIAssistantBubbleBackgroundColor">@color/cometchat_color_transparent</item>
    <item name="cometChatAIAssistantBubbleTextAppearance">@style/TextStyleTimesNewRoman</item>
    <item name="cometChatAIAssistantBubbleTextColor">?attr/cometchatTextColorPrimary</item>
</style>

<!-- Link to Hub -->
<style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatAIAssistantBubbleStyle">@style/CustomAIAssistantBubbleStyle</item>
</style>
```

**Attribute reference:**

* [AI assistant bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/att_cometchat_ai_assistant_bubble.xml)

### Quoted Reply

Styles the preview block when a user replies to a specific message.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-mintlify-715169f7/-5sdWCmSnVMqKZDA/images/android-quoted-reply-style.png?fit=max&auto=format&n=-5sdWCmSnVMqKZDA&q=85&s=708b2c8f47f760f9e6ad4912330a41fe" width="2560" height="1670" data-path="images/android-quoted-reply-style.png" />
</Frame>

```xml themes.xml lines theme={null}
<!-- Define Reply Fonts -->
<style name="TimesNewRoman">
    <item name="android:fontFamily">@font/times_new_roman_regular</item>
</style>

<style name="CustomOutgoingMessageDateStyle">
    <item name="cometchatDateTextAppearance">@style/TimesNewRoman</item>
    <item name="cometchatDateTextColor">@color/white</item>
</style>

<!-- Define Message Preview (The Quote itself) -->
<style name="CustomMessagePreviewStyle">
    <item name="cometChatMessagePreviewBackgroundColor">#ea6d71</item>
    <item name="cometChatMessagePreviewTitleTextAppearance">@style/TimesNewRoman</item>
    <item name="cometChatMessagePreviewSubtitleTextAppearance">@style/TimesNewRoman</item>
</style>

<!-- Define Text Style inside the Reply -->
<style name="CustomTextBubbleStyle">
    <item name="cometchatTextBubbleTextColor">@color/white</item>
    <item name="cometchatTextBubbleTextAppearance">@style/TimesNewRoman</item>
</style>

<!-- Define Wrapper Attributes & Link Preview to Outgoing Hub -->
<style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#e54a4b</item>
    <item name="cometchatMessageBubbleCornerRadius">@dimen/cometchat_radius_3</item>
    <item name="cometchatTextBubbleStyle">@style/CustomTextBubbleStyle</item>
    <item name="cometchatMessageBubbleDateStyle">@style/CustomOutgoingMessageDateStyle</item>
    <item name="cometChatMessagePreviewStyle">@style/CustomMessagePreviewStyle</item>
</style>
```

**Attribute reference:**

* [Message preview attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml)

## Customization matrix

| What you want to change         | Where                   | Property/API                                                                     | Example                                                                                            |
| ------------------------------- | ----------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Incoming bubble background      | `res/values/themes.xml` | `cometchatMessageBubbleBackgroundColor` in `CometChatIncomingMessageBubbleStyle` | `<item name="cometchatMessageBubbleBackgroundColor">#FEEDE1</item>`                                |
| Outgoing bubble background      | `res/values/themes.xml` | `cometchatMessageBubbleBackgroundColor` in `CometChatOutgoingMessageBubbleStyle` | `<item name="cometchatMessageBubbleBackgroundColor">#F76808</item>`                                |
| Text bubble background          | `res/values/themes.xml` | `cometchatTextBubbleBackgroundColor`                                             | `<item name="cometchatTextBubbleBackgroundColor">#FEEDE1</item>`                                   |
| Link preview background         | `res/values/themes.xml` | `cometchatTextBubbleLinkPreviewBackgroundColor`                                  | `<item name="cometchatTextBubbleLinkPreviewBackgroundColor">#FBAA75</item>`                        |
| Image bubble background         | `res/values/themes.xml` | `cometchatImageBubbleBackgroundColor`                                            | `<item name="cometchatImageBubbleBackgroundColor">#FEEDE1</item>`                                  |
| Video bubble play icon tint     | `res/values/themes.xml` | `cometchatVideoBubblePlayIconTint`                                               | `<item name="cometchatVideoBubblePlayIconTint">#F76808</item>`                                     |
| Audio bubble wave color         | `res/values/themes.xml` | `cometchatAudioBubbleAudioWaveColor`                                             | `<item name="cometchatAudioBubbleAudioWaveColor">#F76808</item>`                                   |
| File bubble download icon tint  | `res/values/themes.xml` | `cometchatFileBubbleFileDownloadIconTint`                                        | `<item name="cometchatFileBubbleFileDownloadIconTint">#F76808</item>`                              |
| Poll bubble progress background | `res/values/themes.xml` | `cometchatPollBubbleProgressBackgroundColor`                                     | `<item name="cometchatPollBubbleProgressBackgroundColor">#FBAA75</item>`                           |
| Collaborative bubble separator  | `res/values/themes.xml` | `cometchatCollaborativeBubbleSeparatorColor`                                     | `<item name="cometchatCollaborativeBubbleSeparatorColor">#FBAA75</item>`                           |
| Meet call bubble icon tint      | `res/values/themes.xml` | `cometchatMeetCallBubbleCallIconTint`                                            | `<item name="cometchatMeetCallBubbleCallIconTint">#F76808</item>`                                  |
| Delete bubble background        | `res/values/themes.xml` | `cometchatMessageBubbleBackgroundColor` in delete style                          | `<item name="cometchatMessageBubbleBackgroundColor">#FBAA75</item>`                                |
| Call action bubble text color   | `res/values/themes.xml` | `cometchatCallActionBubbleTextColor`                                             | `<item name="cometchatCallActionBubbleTextColor">#F76808</item>`                                   |
| Action bubble text color        | `res/values/themes.xml` | `cometchatActionBubbleTextColor`                                                 | `<item name="cometchatActionBubbleTextColor">#F76808</item>`                                       |
| AI assistant bubble background  | `res/values/themes.xml` | `cometChatAIAssistantBubbleBackgroundColor`                                      | `<item name="cometChatAIAssistantBubbleBackgroundColor">@color/cometchat_color_transparent</item>` |
| Quoted reply preview background | `res/values/themes.xml` | `cometChatMessagePreviewBackgroundColor`                                         | `<item name="cometChatMessagePreviewBackgroundColor">#ea6d71</item>`                               |
| Bubble corner radius            | `res/values/themes.xml` | `cometchatMessageBubbleCornerRadius`                                             | `<item name="cometchatMessageBubbleCornerRadius">@dimen/cometchat_radius_3</item>`                 |