> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.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-angular-v5-docs-update/xHWe3as1OGB4Vmrv/images/90e70e8b-incoming_outgoing_bubble-534f3104b6c087d0b2db810b9e69e216.png?fit=max&auto=format&n=xHWe3as1OGB4Vmrv&q=85&s=4f14baa3004a37d87e40d312135d1ad3" 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-angular-v5-docs-update/p231kj41ev7n6i2F/images/68dfc288-incoming_bubble_styling-41b09e86811d02c5b9c62cd135e23188.png?fit=max&auto=format&n=p231kj41ev7n6i2F&q=85&s=dcf89c0e4f6e97726a4762cd7891a3ac" 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-angular-v5-docs-update/L37wiDyfxR82vJto/images/40b99d2c-outgoing_bubble_styling-3762ae90255a5e762e4d5efad2465cf6.png?fit=max&auto=format&n=L37wiDyfxR82vJto&q=85&s=0dd9efea681a1dea2b946e3c12b7a6ed" 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-angular-v5-docs-update/6IESCr-kzBV6qAKP/images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png?fit=max&auto=format&n=6IESCr-kzBV6qAKP&q=85&s=d301de21f95eb09c98407e3b0075629e" width="1200" height="396" data-path="images/809ca388-default_text_bubble-3950681b2586cee82f95475de9a2ad1b.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/xHWe3as1OGB4Vmrv/images/94f47151-custom_text_bubble-31254c676ff87f3e25ecb4f89f5f5ffc.png?fit=max&auto=format&n=xHWe3as1OGB4Vmrv&q=85&s=ce1d499125cce90909bb52b976440abf" 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-angular-v5-docs-update/TF_xZkrXqcO6WU3a/images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png?fit=max&auto=format&n=TF_xZkrXqcO6WU3a&q=85&s=c1be39b68ed282cc7c5ced06937023a8" width="1200" height="1836" data-path="images/147a1904-default_link_preview_bubble-b0718eaa09e0c01e47ff2f0aaa258bf0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/jFxtGVgb6H4XYgC5/images/dd96b3ff-custom_link_preview_bubble-1b9e60f73664714bcde7f4e654077a02.png?fit=max&auto=format&n=jFxtGVgb6H4XYgC5&q=85&s=e8d7eccef33658288e61b5911b34ecdf" 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-angular-v5-docs-update/xXJ8R25bxTI-kBC4/images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png?fit=max&auto=format&n=xXJ8R25bxTI-kBC4&q=85&s=a7fb9f8dd6761013889955d63a55026a" width="1200" height="1392" data-path="images/10135e8c-default_image_bubble-eb1c9814e16ddf71dabb0d15045c37af.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/hwxNMEhOmiUEENc8/images/050d471a-custom_image_bubble-cbf84ceb47eb0f7b6a0c27689fc911b9.png?fit=max&auto=format&n=hwxNMEhOmiUEENc8&q=85&s=729e021576570dee2806fb5b027afdf7" 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-angular-v5-docs-update/hS2ODI36gzqSC7wJ/images/b4e3e6a4-custom_video_bubble-105a5b18f4021eafdf4266bedce930d7.png?fit=max&auto=format&n=hS2ODI36gzqSC7wJ&q=85&s=ae479d5c53d1f022759dbcb6679c4c01" 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-angular-v5-docs-update/T0aTXbhtWmYnVWC0/images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png?fit=max&auto=format&n=T0aTXbhtWmYnVWC0&q=85&s=63faa2b2bddab3ed79fa246311e6aafd" width="1200" height="640" data-path="images/b126bdd3-default_audio_bubble-7fb590ace370c888dba2650fa4669468.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/h7P8UchGUEpy8xCu/images/a1a5851e-custom_audio_bubble-7435f7e797b4c409156bc0df3c0bc077.png?fit=max&auto=format&n=h7P8UchGUEpy8xCu&q=85&s=58367dc1a50024f9d5ea1d79de8db017" 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-angular-v5-docs-update/1AfY8AvJMqtx4lQu/images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png?fit=max&auto=format&n=1AfY8AvJMqtx4lQu&q=85&s=76fac3e0a3db217d49bcb6c9746083c4" width="1200" height="632" data-path="images/24743f44-default_file_bubble-083b19e01f49bddd2d1581bce2cd1959.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/L37wiDyfxR82vJto/images/3dffd2e7-custom_file_bubble-08f741eb4ad1e4a5098a5b65431f895b.png?fit=max&auto=format&n=L37wiDyfxR82vJto&q=85&s=269e8b81d6b90f865df1e4e29ee721c7" 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-angular-v5-docs-update/L37wiDyfxR82vJto/images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png?fit=max&auto=format&n=L37wiDyfxR82vJto&q=85&s=fe141ef0b73fd5c11899c14ee291654f" width="1200" height="1128" data-path="images/416ea259-default_sticker_bubble-8e4e300dd8b0bfc85905c13ff4b3644d.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/pnzgsGg7Vjogofic/images/8d48d80f-custom_sticker_bubble-5fac9a1c34cbecfeb3b4015755805309.png?fit=max&auto=format&n=pnzgsGg7Vjogofic&q=85&s=3d2006e62de8397b5e95730dc74168a8" 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-angular-v5-docs-update/1AfY8AvJMqtx4lQu/images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png?fit=max&auto=format&n=1AfY8AvJMqtx4lQu&q=85&s=f87a1114053e7e512a2e759b46b4cf45" width="1200" height="1412" data-path="images/28a41154-default_poll_bubble-d342e70693cdb8f683d9150111cf1721.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/5NIKqN7BW7oUoBak/images/6c80d571-custom_poll_bubble-02042749c5c6030498163b51be103658.png?fit=max&auto=format&n=5NIKqN7BW7oUoBak&q=85&s=db1034600ee315dcc6c958a2ac8fbcba" 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-angular-v5-docs-update/h7P8UchGUEpy8xCu/images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png?fit=max&auto=format&n=h7P8UchGUEpy8xCu&q=85&s=112628dc517fab9b8aba658292edb8bb" width="1200" height="1336" data-path="images/a47a4f71-default_collaborative_bubble-532bcce90f0194e12e0f65b023b88e5e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/PJhf5xm-xXvMA0BD/images/4a4f308c-custom_collaborative_bubble-882924e176c97b69879fc4a4db812be4.png?fit=max&auto=format&n=PJhf5xm-xXvMA0BD&q=85&s=43b9041ceddfd04ed31ca147eca7dfc0" 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-angular-v5-docs-update/eXJ1ugMRc327AOoY/images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png?fit=max&auto=format&n=eXJ1ugMRc327AOoY&q=85&s=d4a50da4ae85a051a4b618c9e017a310" width="1200" height="600" data-path="images/5dd8351e-default_meet_call_bubble-651bb8f94fb7cbb52a0f1ec191abdd75.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/gV-Quvnw2qfqWme9/images/2c71f1e5-custom_meet_call_bubble-ea1e86f24d9572d4f32e9d07df84c004.png?fit=max&auto=format&n=gV-Quvnw2qfqWme9&q=85&s=78fdc343d0d6a0978e52f46e0c1f3e22" 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-angular-v5-docs-update/UlRk7SYYn7zdv3js/images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png?fit=max&auto=format&n=UlRk7SYYn7zdv3js&q=85&s=d77cb6ad8b85db414b712caecbb0ae3c" width="1200" height="396" data-path="images/5427417c-default_delete_bubble-6f875810b6bca699d99168c06a2405ad.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/QcHXltXFKjSg4WPo/images/d323f495-custom_delete_bubble-9504ef572fcf69ada7c0ae9c1025f468.png?fit=max&auto=format&n=QcHXltXFKjSg4WPo&q=85&s=b261248f898d8ead18b8537f9663afd1" 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-angular-v5-docs-update/1AfY8AvJMqtx4lQu/images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png?fit=max&auto=format&n=1AfY8AvJMqtx4lQu&q=85&s=d3b4395df51b5b87f839cf4d84fa9d94" width="1200" height="1304" data-path="images/22fe6b58-default_call_action_bubble-718466aaf48ac7d81ff36b6901f68c48.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/1AfY8AvJMqtx4lQu/images/2680816a-custom_call_action_bubble-273452145034c0846b211e2ed53bc6df.png?fit=max&auto=format&n=1AfY8AvJMqtx4lQu&q=85&s=207ec1d6a812e5f0ad22caa5117271cf" 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-angular-v5-docs-update/eXJ1ugMRc327AOoY/images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png?fit=max&auto=format&n=eXJ1ugMRc327AOoY&q=85&s=3630c0a78489d63290bfd3f8993cd47e" width="1200" height="476" data-path="images/5e7674db-default_action_bubble-56d677344bfa2b44352443fac346f5b0.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/eXJ1ugMRc327AOoY/images/5ef64cf9-custom_action_bubble-c026ed34c02477f513b78475818781bc.png?fit=max&auto=format&n=eXJ1ugMRc327AOoY&q=85&s=3bcd9eb3ba143d229146d094e08df857" 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-angular-v5-docs-update/T0aTXbhtWmYnVWC0/images/android-ai-assistant-bubble-default.png?fit=max&auto=format&n=T0aTXbhtWmYnVWC0&q=85&s=61917e36955043295a352f6abf9901ed" width="3040" height="1760" data-path="images/android-ai-assistant-bubble-default.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/T0aTXbhtWmYnVWC0/images/android-ai-assistant-bubble-styled.png?fit=max&auto=format&n=T0aTXbhtWmYnVWC0&q=85&s=28f0a6cae26892d803088ff87e066d83" 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-angular-v5-docs-update/T0aTXbhtWmYnVWC0/images/android-quoted-reply-style.png?fit=max&auto=format&n=T0aTXbhtWmYnVWC0&q=85&s=699028a6846812533c52a1286d3635cb" 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>`                 |