> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.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-feature-card-builder/E5DbhavBfTmsHVE7/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=E5DbhavBfTmsHVE7&q=85&s=ad6f6d81b38b470cef9ea7e3d7d96675" 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-feature-card-builder/eLHw5QGTFIHJKVut/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=eLHw5QGTFIHJKVut&q=85&s=55963378f91a9116b57ba4b76a689dde" 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-feature-card-builder/Sa9o3dFd0TJV05JN/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=Sa9o3dFd0TJV05JN&q=85&s=ccd6886640624c73f2deaa1b99992662" 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-feature-card-builder/sD1l8I7Yw1lyflGY/images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png?fit=max&auto=format&n=sD1l8I7Yw1lyflGY&q=85&s=9e503f0ec400e411e74761598bb8b5b2" width="1200" height="396" data-path="images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/E5DbhavBfTmsHVE7/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=E5DbhavBfTmsHVE7&q=85&s=5a87c9dd63bdf6ad862f4a50e51d90f2" 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-feature-card-builder/fYzY4CDkBxaMi0xU/images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png?fit=max&auto=format&n=fYzY4CDkBxaMi0xU&q=85&s=05bc00bb7a23432e9c29da2faa2ccb73" width="1200" height="1836" data-path="images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/F1NBmCh5qoHS2CIE/images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png?fit=max&auto=format&n=F1NBmCh5qoHS2CIE&q=85&s=d2f4431a98686bad7b5e5c6dbbeb8beb" 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-feature-card-builder/dJudw7bxdEqknjCY/images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png?fit=max&auto=format&n=dJudw7bxdEqknjCY&q=85&s=65aeaef7a03781e989d8e655c10a5b1f" width="1200" height="1392" data-path="images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/tKDtB3xjE6jATqmt/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=tKDtB3xjE6jATqmt&q=85&s=07b19dc884ed0e3b30f93061a5c767d1" 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-feature-card-builder/DVsmmwOU2QxMA-Wv/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=DVsmmwOU2QxMA-Wv&q=85&s=5896313522c1ad344ff754809781851c" 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-feature-card-builder/lojUhXqO8ysHzRtp/images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png?fit=max&auto=format&n=lojUhXqO8ysHzRtp&q=85&s=2a0db05802ece6b933539d4f2ebcc6a8" width="1200" height="640" data-path="images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/BeS0cj3AlwGwbqBl/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=BeS0cj3AlwGwbqBl&q=85&s=06587b4398e9868739e40df3f9019fc0" 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-feature-card-builder/p-BaO12CMdpnxKfV/images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png?fit=max&auto=format&n=p-BaO12CMdpnxKfV&q=85&s=e9528d2861c2a496055172410e1eed9c" width="1200" height="632" data-path="images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/Sa9o3dFd0TJV05JN/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=Sa9o3dFd0TJV05JN&q=85&s=52aeff5a43a7b8584ba70389ce354f2b" 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-feature-card-builder/Sa9o3dFd0TJV05JN/images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png?fit=max&auto=format&n=Sa9o3dFd0TJV05JN&q=85&s=8be5c78ec8890d7414c67df32e9eafd2" width="1200" height="1128" data-path="images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/qyfJptTKpJBV4TKk/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=qyfJptTKpJBV4TKk&q=85&s=23f5320ea07ace0f42f937a1d626a382" 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-feature-card-builder/p-BaO12CMdpnxKfV/images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png?fit=max&auto=format&n=p-BaO12CMdpnxKfV&q=85&s=eee03e304018c7c5ddf39d3053ab7013" width="1200" height="1412" data-path="images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/3ouLMA4YsO-gmlOS/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=3ouLMA4YsO-gmlOS&q=85&s=c150c4002fa567706c2a0d3b6b8471b6" 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-feature-card-builder/BeS0cj3AlwGwbqBl/images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png?fit=max&auto=format&n=BeS0cj3AlwGwbqBl&q=85&s=e59249acaa3d6855805dfa8913f1ab5f" width="1200" height="1336" data-path="images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/GQCy4V9W9Tf76kX8/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=GQCy4V9W9Tf76kX8&q=85&s=ad1846cf6b0d5feda7251a6ddcef0460" 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-feature-card-builder/POKce_Oe2FDpCjGg/images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png?fit=max&auto=format&n=POKce_Oe2FDpCjGg&q=85&s=1d22cba44b62b79c4c0af721e3cfdfca" width="1200" height="600" data-path="images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/v-eSvFFm_r_istSu/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=v-eSvFFm_r_istSu&q=85&s=9b29fb34bd834e2af5ac1e45883f5fb2" 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-feature-card-builder/U1KbQ0VSXjjiH44y/images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png?fit=max&auto=format&n=U1KbQ0VSXjjiH44y&q=85&s=a44ce6b60c36a320ab688ae503e543ad" width="1200" height="396" data-path="images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/dQDh-qNy-2PyfeNi/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=dQDh-qNy-2PyfeNi&q=85&s=15cfb61b0f2e275fc8d4274ad5dcf59d" 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-feature-card-builder/p-BaO12CMdpnxKfV/images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png?fit=max&auto=format&n=p-BaO12CMdpnxKfV&q=85&s=a58349033d3736c0b5d4a78e358f6f6f" width="1200" height="1304" data-path="images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/p-BaO12CMdpnxKfV/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=p-BaO12CMdpnxKfV&q=85&s=7b80ea635b27d041cc7c0ad371c032f6" 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-feature-card-builder/POKce_Oe2FDpCjGg/images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png?fit=max&auto=format&n=POKce_Oe2FDpCjGg&q=85&s=fad65cd5ca54ec8822370910394785b8" width="1200" height="476" data-path="images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/POKce_Oe2FDpCjGg/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=POKce_Oe2FDpCjGg&q=85&s=5e96d81ec69b3746b635f0365f6773f2" 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-feature-card-builder/lojUhXqO8ysHzRtp/images/android-ai-assistant-bubble-default.png?fit=max&auto=format&n=lojUhXqO8ysHzRtp&q=85&s=4fcc401241354875fab73bbe1297274e" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-default.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/lojUhXqO8ysHzRtp/images/android-ai-assistant-bubble-styled.png?fit=max&auto=format&n=lojUhXqO8ysHzRtp&q=85&s=8429e6f7677c429fd3bd3138d91ec7e1" 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-feature-card-builder/lojUhXqO8ysHzRtp/images/android-quoted-reply-style.png?fit=max&auto=format&n=lojUhXqO8ysHzRtp&q=85&s=0b2fc391d6a20d74840bbe94fc37cc58" 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>`                 |