> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-multi-attachment-react-uikit-v7.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-docs-multi-attachment-react-uikit-v7/AXc_1Pl91mvh6L3L/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=AXc_1Pl91mvh6L3L&q=85&s=95c181d5148367e204779a5c2b675344" 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-docs-multi-attachment-react-uikit-v7/ocRHEPnNS0tMFrvx/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=ocRHEPnNS0tMFrvx&q=85&s=c11e349e328e5e8e9f7061557653ddfa" 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-docs-multi-attachment-react-uikit-v7/i2bsRmDOkZ-PPesC/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=i2bsRmDOkZ-PPesC&q=85&s=533f55b193f568219fe9dd5581676665" 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-docs-multi-attachment-react-uikit-v7/1tjRVLGQOZFK47Co/images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png?fit=max&auto=format&n=1tjRVLGQOZFK47Co&q=85&s=d8f0d05e8db941232b8ecc2c4ba1df93" width="1200" height="396" data-path="images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/AXc_1Pl91mvh6L3L/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=AXc_1Pl91mvh6L3L&q=85&s=a310f8c42209a2361b7937b5d4843b02" 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-docs-multi-attachment-react-uikit-v7/k4JxCxinPV3LKaph/images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png?fit=max&auto=format&n=k4JxCxinPV3LKaph&q=85&s=b1e5535c2342ecb24c4b9ccfc4dbc251" width="1200" height="1836" data-path="images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/PWltM22ZD7KwDx7q/images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png?fit=max&auto=format&n=PWltM22ZD7KwDx7q&q=85&s=098775a5b495d3553160a59882e29d8a" 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-docs-multi-attachment-react-uikit-v7/ENc0VE134nTVnIhX/images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png?fit=max&auto=format&n=ENc0VE134nTVnIhX&q=85&s=7e4573021d2660da351db970ba54ec95" width="1200" height="1392" data-path="images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/yiF_VFSQheWiPBPa/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=yiF_VFSQheWiPBPa&q=85&s=f972ef38d00a61c1531392b47c472ff0" 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-docs-multi-attachment-react-uikit-v7/aB79XMJS4cnarUFm/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=aB79XMJS4cnarUFm&q=85&s=6d92bd3888d89100523982730ed5550e" 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-docs-multi-attachment-react-uikit-v7/0p0XDCc-ZHF0Xkd7/images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png?fit=max&auto=format&n=0p0XDCc-ZHF0Xkd7&q=85&s=9f71a326c6479507834c4bc2beefd642" width="1200" height="640" data-path="images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/wqVQy9LvP8pg-yMf/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=wqVQy9LvP8pg-yMf&q=85&s=9144b6018d55e39aa9f2ec1c3ab45691" 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-docs-multi-attachment-react-uikit-v7/DBep6P1toI7iS0Dd/images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png?fit=max&auto=format&n=DBep6P1toI7iS0Dd&q=85&s=4adf0ba56b5e7016f408c0ed68dc5a1f" width="1200" height="632" data-path="images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/i2bsRmDOkZ-PPesC/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=i2bsRmDOkZ-PPesC&q=85&s=cb2d635dd69f2e4318fc7915671bfc84" 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-docs-multi-attachment-react-uikit-v7/i2bsRmDOkZ-PPesC/images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png?fit=max&auto=format&n=i2bsRmDOkZ-PPesC&q=85&s=4ae3715b40b4e3ec442536679220c384" width="1200" height="1128" data-path="images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/oLd8-14fgANkuO4J/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=oLd8-14fgANkuO4J&q=85&s=ebd879500e38dd566cee1ff618667165" 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-docs-multi-attachment-react-uikit-v7/DBep6P1toI7iS0Dd/images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png?fit=max&auto=format&n=DBep6P1toI7iS0Dd&q=85&s=05b72857af6ecffc0c840a04acb45782" width="1200" height="1412" data-path="images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/hTU4lTuAyO5ZTExg/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=hTU4lTuAyO5ZTExg&q=85&s=a0ef08b60fcc5846b6c24fd72af48c8f" 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-docs-multi-attachment-react-uikit-v7/wqVQy9LvP8pg-yMf/images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png?fit=max&auto=format&n=wqVQy9LvP8pg-yMf&q=85&s=aec5617df4ba2b2b14cd31209dc19f0e" width="1200" height="1336" data-path="images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/4vEGCr-7oFF3gL3q/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=4vEGCr-7oFF3gL3q&q=85&s=673d459bcd0d787ad375ad4a4a36ff9c" 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-docs-multi-attachment-react-uikit-v7/LOQF8N5fuHUVZ2-G/images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png?fit=max&auto=format&n=LOQF8N5fuHUVZ2-G&q=85&s=efb5947c60ce849ee7055a5ec33dac7b" width="1200" height="600" data-path="images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/3AkQrT_c23-X3KkU/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=3AkQrT_c23-X3KkU&q=85&s=1fb0990d1727591afd79c46116bfe603" 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-docs-multi-attachment-react-uikit-v7/X-UBCRmAjG87FVcA/images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png?fit=max&auto=format&n=X-UBCRmAjG87FVcA&q=85&s=a7fc973746732844aa6645c16968b4b6" width="1200" height="396" data-path="images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/czoZwjOJmBSfpcZm/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=czoZwjOJmBSfpcZm&q=85&s=8547af16eb4aa31f9ff42f91b24b64ec" 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-docs-multi-attachment-react-uikit-v7/DBep6P1toI7iS0Dd/images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png?fit=max&auto=format&n=DBep6P1toI7iS0Dd&q=85&s=ece5fa8cc09f81d831fe65116f2e934c" width="1200" height="1304" data-path="images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/DBep6P1toI7iS0Dd/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=DBep6P1toI7iS0Dd&q=85&s=65cfb378379fb2fa1c58328cb20fd13f" 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-docs-multi-attachment-react-uikit-v7/LOQF8N5fuHUVZ2-G/images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png?fit=max&auto=format&n=LOQF8N5fuHUVZ2-G&q=85&s=53ab61234994270469c8be07df06bb29" width="1200" height="476" data-path="images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/LOQF8N5fuHUVZ2-G/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=LOQF8N5fuHUVZ2-G&q=85&s=19ba28c430231276cca2fe40da188e76" 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-docs-multi-attachment-react-uikit-v7/0p0XDCc-ZHF0Xkd7/images/android-ai-assistant-bubble-default.png?fit=max&auto=format&n=0p0XDCc-ZHF0Xkd7&q=85&s=1e47e8c4f0e43b270ca635795038a180" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-default.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-multi-attachment-react-uikit-v7/0p0XDCc-ZHF0Xkd7/images/android-ai-assistant-bubble-styled.png?fit=max&auto=format&n=0p0XDCc-ZHF0Xkd7&q=85&s=522eed66ea35f0f3edef3165eb8d6ecc" 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-docs-multi-attachment-react-uikit-v7/0p0XDCc-ZHF0Xkd7/images/android-quoted-reply-style.png?fit=max&auto=format&n=0p0XDCc-ZHF0Xkd7&q=85&s=cd264673ddb9ec368f90b911c76cf563" 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>`                 |