> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-multi-attachment-react-uikit-v7.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Message Bubble Styling
> Configure and style incoming, outgoing, and specific message bubbles in your Android UI Kit.
| Field | Value |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Kotlin XML Views | Override XML styles extending `CometChatIncomingMessageBubbleStyle` / `CometChatOutgoingMessageBubbleStyle` in `themes.xml` |
| Jetpack Compose | Pass `CometChatMessageListStyle.default().copy()` with nested bubble styles to `CometChatMessageList` |
| Hub styles | Incoming and Outgoing bubble styles act as central hubs for per-type bubble customization |
| Per-type styles | Text, Image, Audio, Video, File, Sticker, Poll, Collaborative, Meet Call, Delete, Action, Call Action |
| Related | [Theme Introduction](/ui-kit/android/v6/theme-introduction) · [Component Styling](/ui-kit/android/v6/component-styling) · [Message List](/ui-kit/android/v6/message-list) |
Configure and style incoming, outgoing, and specific message bubbles.
***
## Styling Architecture
Message bubbles follow a hub-and-spoke pattern:
1. **Hub styles** — `IncomingMessageBubbleStyle` and `OutgoingMessageBubbleStyle` control the base bubble appearance
2. **Per-type styles** — Text, Image, Audio, etc. are nested inside the hub styles
### Global Setup
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
CometChatMessageList(
style = CometChatMessageListStyle.default().copy(
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1)
),
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808)
)
)
)
```
***
## Core Message Bubbles
### Text Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
// Inside CometChatMessageListStyle
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
textBubbleStyle = CometChatTextBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1)
)
),
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
textBubbleStyle = CometChatTextBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808)
)
)
```
### Image Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
imageBubbleStyle = CometChatImageBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1)
)
)
```
### Audio Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
audioBubbleStyle = CometChatAudioBubbleStyle.default().copy(
playIconTint = Color(0xFFF76808),
backgroundColor = Color(0xFFFEEDE1)
)
)
```
### Video Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
videoBubbleStyle = CometChatVideoBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1),
playIconTint = Color(0xFFF76808)
)
)
```
### File Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
fileBubbleStyle = CometChatFileBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1),
downloadIconTint = Color(0xFFF76808)
)
)
```
### Sticker Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
stickerBubbleStyle = CometChatStickerBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1)
)
)
```
### Poll Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
pollBubbleStyle = CometChatPollBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808),
progressBackgroundColor = Color(0xFFFBAA75)
)
)
```
### Collaborative Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
collaborativeBubbleStyle = CometChatCollaborativeBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808),
separatorColor = Color(0xFFFBAA75)
)
)
```
### Meet Call Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
meetCallBubbleStyle = CometChatMeetCallBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808),
callIconTint = Color(0xFFF76808)
)
)
```
### Delete Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
deleteBubbleStyle = CometChatDeleteBubbleStyle.default().copy(
backgroundColor = Color(0xFFF76808)
)
)
```
***
## List-Level Bubbles
These bubbles are tied to the Message List style, not the Incoming/Outgoing hubs.
### Call Action Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
CometChatMessageList(
style = CometChatMessageListStyle.default().copy(
callActionBubbleStyle = CometChatCallActionBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1),
textColor = Color(0xFFF76808),
iconTint = Color(0xFFF76808)
)
)
)
```
### Action Bubble
```xml themes.xml lines theme={null}
```
```kotlin lines theme={null}
CometChatMessageList(
style = CometChatMessageListStyle.default().copy(
actionBubbleStyle = CometChatActionBubbleStyle.default().copy(
backgroundColor = Color(0xFFFEEDE1),
textColor = Color(0xFFF76808)
)
)
)
```