> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-ios-pin-save-threads-parity.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/v5/theme-introduction) \| [Component Styling](/ui-kit/android/v5/component-styling) \| [Message List](/ui-kit/android/v5/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-ios-pin-save-threads-parity/VHzrhusOd5x0uaa3/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=VHzrhusOd5x0uaa3&q=85&s=9108e95cfc9ba532820d69ded0c12b4d" 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-ios-pin-save-threads-parity/-rGdrHQrfXQqKgWm/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=-rGdrHQrfXQqKgWm&q=85&s=366347d020334593f9f212911683d55f" 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-ios-pin-save-threads-parity/siowzplWpMgGKJVE/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=siowzplWpMgGKJVE&q=85&s=584b1d5c2d99f3abcc33f2b73845ae0c" 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-ios-pin-save-threads-parity/bAwvNPPqCavE0rmy/images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png?fit=max&auto=format&n=bAwvNPPqCavE0rmy&q=85&s=f4290a18f231d138af85a4cbeff47bdf" width="1200" height="396" data-path="images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/VHzrhusOd5x0uaa3/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=VHzrhusOd5x0uaa3&q=85&s=4df103e22b980a824a5fc5fdeb522f3b" 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-ios-pin-save-threads-parity/u0JDgPh90eE3KAvB/images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png?fit=max&auto=format&n=u0JDgPh90eE3KAvB&q=85&s=2ace270c22c13a11fa47f22ba505dbef" width="1200" height="1836" data-path="images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/cH-LzrAMat95m-el/images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png?fit=max&auto=format&n=cH-LzrAMat95m-el&q=85&s=2ff5f007537b23b8c297c900587bf785" 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-ios-pin-save-threads-parity/u0JDgPh90eE3KAvB/images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png?fit=max&auto=format&n=u0JDgPh90eE3KAvB&q=85&s=0940c6bdc0f052cdcd26d8ebcdef391a" width="1200" height="1392" data-path="images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/GSQ3vGuuaVDm8z9_/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=GSQ3vGuuaVDm8z9_&q=85&s=2d6060ff76623efe43bea093e9abd771" 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-ios-pin-save-threads-parity/uEtlehJFAWZPvHsd/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=uEtlehJFAWZPvHsd&q=85&s=973b29a98eccb36d54be75c4a07ffac7" 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-ios-pin-save-threads-parity/dzlR2Bbm7LnFrup1/images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png?fit=max&auto=format&n=dzlR2Bbm7LnFrup1&q=85&s=df907f1bed916f62bdda7e58fef4cc43" width="1200" height="640" data-path="images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/PFSQKNYPm060UHbW/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=PFSQKNYPm060UHbW&q=85&s=6a3c5ccb4d3383e02cde7988ae9d30ee" 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-ios-pin-save-threads-parity/ERqhbilbHoY8cmym/images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png?fit=max&auto=format&n=ERqhbilbHoY8cmym&q=85&s=245f3ffb3e6a04711012c6cb55e14c44" width="1200" height="632" data-path="images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/siowzplWpMgGKJVE/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=siowzplWpMgGKJVE&q=85&s=1b4e9abc00683726bf7a2192ab212aaf" 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-ios-pin-save-threads-parity/siowzplWpMgGKJVE/images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png?fit=max&auto=format&n=siowzplWpMgGKJVE&q=85&s=e3ce9c4eac5b1882d0fcc751bc1f5632" width="1200" height="1128" data-path="images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/tNmSoUK-0sShuFqj/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=tNmSoUK-0sShuFqj&q=85&s=64d7c198d0a090a0e644836efc2b375a" 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-ios-pin-save-threads-parity/ERqhbilbHoY8cmym/images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png?fit=max&auto=format&n=ERqhbilbHoY8cmym&q=85&s=eb3b69eeaa2b8728a09d2f820c25af11" width="1200" height="1412" data-path="images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/mP9-JaGabBfJcYgr/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=mP9-JaGabBfJcYgr&q=85&s=dd9a1b40a0e65049f826af43be1e567c" 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-ios-pin-save-threads-parity/PFSQKNYPm060UHbW/images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png?fit=max&auto=format&n=PFSQKNYPm060UHbW&q=85&s=ed6b51ed50d21a1a21c927e7f6e9d2b1" width="1200" height="1336" data-path="images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/phjov0LCKD13muf1/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=phjov0LCKD13muf1&q=85&s=1a54dd3bad0da812e90c44f3c5b40e26" 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-ios-pin-save-threads-parity/p8I4idgR5HM1yFjS/images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png?fit=max&auto=format&n=p8I4idgR5HM1yFjS&q=85&s=5e2d5f483266cbae184b8b20e4cc89e3" width="1200" height="600" data-path="images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/LuXl9GVp1LaXO8k4/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=LuXl9GVp1LaXO8k4&q=85&s=7338ebfa0fa71a51c9d21b22d319797d" 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-ios-pin-save-threads-parity/Zgo9i-2s5gNzCWR_/images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png?fit=max&auto=format&n=Zgo9i-2s5gNzCWR_&q=85&s=384cd645a6f7d247f7b95ee2fd5ee954" width="1200" height="396" data-path="images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/VKe2B_Rr7L7ZZRDc/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=VKe2B_Rr7L7ZZRDc&q=85&s=c5b6a0102e18d9a4282cea21800e5cdb" 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-ios-pin-save-threads-parity/ERqhbilbHoY8cmym/images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png?fit=max&auto=format&n=ERqhbilbHoY8cmym&q=85&s=919f5042c4771424f6954e3a612a356e" width="1200" height="1304" data-path="images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/ERqhbilbHoY8cmym/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=ERqhbilbHoY8cmym&q=85&s=61d8608af64c8a5e5e959f151c5c067f" 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-ios-pin-save-threads-parity/p8I4idgR5HM1yFjS/images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png?fit=max&auto=format&n=p8I4idgR5HM1yFjS&q=85&s=bbace0c1387d9b3a8438279bf411b251" width="1200" height="476" data-path="images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/p8I4idgR5HM1yFjS/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=p8I4idgR5HM1yFjS&q=85&s=9750b46badd9cece7c3175b7c4e2dd8a" 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-ios-pin-save-threads-parity/dzlR2Bbm7LnFrup1/images/android-ai-assistant-bubble-default.png?fit=max&auto=format&n=dzlR2Bbm7LnFrup1&q=85&s=3fb66487d46332ca7b7eff2d2e530732" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-default.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-pin-save-threads-parity/dzlR2Bbm7LnFrup1/images/android-ai-assistant-bubble-styled.png?fit=max&auto=format&n=dzlR2Bbm7LnFrup1&q=85&s=4bf97ffe6b88240c258cb4192269f7c4" 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-ios-pin-save-threads-parity/dzlR2Bbm7LnFrup1/images/android-quoted-reply-style.png?fit=max&auto=format&n=dzlR2Bbm7LnFrup1&q=85&s=1375227f76d8af8a0b392626d65d0a59" 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>`                 |