Message Bubble Styling

Configure and style incoming, outgoing, and specific message bubbles in your Android UI Kit.

AI Integration Quick Reference

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 · Component Styling · 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

Kotlin (XML Views)

themes.xml

<!-- Hub for Incoming Messages -->
<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#FEEDE1</item>
</style>

<!-- Hub for Outgoing Messages -->
<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
</style>

<!-- Connect to AppTheme -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatIncomingMessageBubbleStyle">@style/CustomIncomingBubble</item>
    <item name="cometchatOutgoingMessageBubbleStyle">@style/CustomOutgoingBubble</item>
</style>

Jetpack Compose

CometChatMessageList(
    style = CometChatMessageListStyle.default().copy(
        incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1)
        ),
        outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
            backgroundColor = Color(0xFFF76808)
        )
    )
)

---

Core Message Bubbles

Text Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomIncomingTextBubble" parent="CometChatIncomingTextMessageBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomOutgoingTextBubble" parent="CometChatOutgoingTextBubbleStyle">
    <item name="cometchatTextBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatTextBubbleStyle">@style/CustomIncomingTextBubble</item>
</style>

<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatTextBubbleStyle">@style/CustomOutgoingTextBubble</item>
</style>

Jetpack Compose

// 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

Kotlin (XML Views)

themes.xml

<style name="CustomIncomingImageBubble" parent="CometChatIncomingImageMessageBubbleStyle">
    <item name="cometchatImageBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatImageBubbleStyle">@style/CustomIncomingImageBubble</item>
</style>

Jetpack Compose

incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
    imageBubbleStyle = CometChatImageBubbleStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1)
    )
)

Audio Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomIncomingAudioBubble" parent="CometChatIncomingAudioBubbleStyle">
    <item name="cometchatAudioBubbleAudioWaveColor">#F76808</item>
    <item name="cometchatAudioBubblePlayIconTint">#F76808</item>
    <item name="cometchatAudioBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatAudioBubbleStyle">@style/CustomIncomingAudioBubble</item>
</style>

Jetpack Compose

incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
    audioBubbleStyle = CometChatAudioBubbleStyle.default().copy(
        playIconTint = Color(0xFFF76808),
        backgroundColor = Color(0xFFFEEDE1)
    )
)

Video Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomIncomingVideoBubble" parent="CometChatIncomingVideoBubbleStyle">
    <item name="cometchatVideoBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatVideoBubblePlayIconTint">#F76808</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatVideoBubbleStyle">@style/CustomIncomingVideoBubble</item>
</style>

Jetpack Compose

incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
    videoBubbleStyle = CometChatVideoBubbleStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1),
        playIconTint = Color(0xFFF76808)
    )
)

File Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomIncomingFileBubble" parent="CometChatIncomingFileBubbleStyle">
    <item name="cometchatFileBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatFileBubbleFileDownloadIconTint">#F76808</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatFileBubbleStyle">@style/CustomIncomingFileBubble</item>
</style>

Jetpack Compose

incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
    fileBubbleStyle = CometChatFileBubbleStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1),
        downloadIconTint = Color(0xFFF76808)
    )
)

Media Grid Bubble

Renders a message that carries multiple image or video attachments as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a “+N” overflow overlay; video tiles carry a centered play badge and a duration chip. Tapping a tile opens the fullscreen media viewer. A caption renders underneath the grid.

The image grid and video grid derive their look from your CometChat theme. In Jetpack Compose they are governed by the dedicated CometChatImagesBubbleStyle and CometChatVideosBubbleStyle classes. Their grid-specific properties:

CometChatImagesBubbleStyle (Compose)

Property	Type	Description
tileCornerRadius	Dp	Corner radius of each grid tile
gridSpacing	Dp	Gap between tiles (default 2.dp)
tilePlaceholderColor	Color	Shown while a tile’s image loads
moreOverlayBackgroundColor	Color	Scrim over the last tile when items overflow
moreOverlayTextColor / moreOverlayTextStyle	Color / TextStyle	The “+N” overflow label
captionTextColor / captionTextStyle	Color / TextStyle	The caption row under the grid

CometChatVideosBubbleStyle (Compose)

Property	Type	Description
tileCornerRadius / gridSpacing	Dp	Tile corner radius and gap
tilePlaceholderColor	Color	Shown while a thumbnail loads
moreOverlayBackgroundColor / moreOverlayTextColor / moreOverlayTextStyle	Color / TextStyle	The “+N” overflow overlay
playBadgeBackgroundColor / playIconTint	Color	The centered play badge on video tiles
durationChipBackgroundColor / durationTextColor / durationTextStyle	Color / TextStyle	The duration chip
showVideoDuration	Boolean	Whether the duration chip is shown
captionTextColor / captionTextStyle	Color / TextStyle	The caption row under the grid

---

Audio Files Bubble

Renders a message carrying audio file attachments (audio chosen through the file/audio picker) — one player row per file, each with a play/pause button, a seekable progress bar, the time, the file name, and a download control. Four or more files collapse behind a “Show N more” toggle. Only one row plays at a time.

This bubble is distinct from the Audio Bubble, which renders voice notes recorded with the composer’s microphone. Voice notes keep their waveform look and are never grouped with other attachments.

In Jetpack Compose it is governed by CometChatAudiosBubbleStyle; the Kotlin (XML Views) list reuses your existing Audio Bubble style. Key Compose properties:

Property	Type	Description
cardBackgroundColor / cardCornerRadius	Color / Dp	Each player card (applies only when the message carries multiple files)
itemSpacing	Dp	Vertical gap between cards
playButtonBackgroundColor / playIconTint	Color	The play/pause circle
seekFillColor / seekTrackColor / seekKnobColor / seekKnobBorderColor	Color	The seek bar
titleTextColor / titleTextStyle	Color / TextStyle	File name text
durationTextColor / durationTextStyle	Color / TextStyle	The “mm:ss / mm:ss” time text
downloadIconTint	Color	Per-card download icon
toggleTextColor / toggleTextStyle	Color / TextStyle	The “Show N more” / “Show less” toggle
captionTextColor / captionTextStyle	Color / TextStyle	The caption row under the cards

---

Files Bubble

Renders a message carrying document attachments as a connected stack of file cards — each with a file-type icon (PDF, Word, Excel, PowerPoint, ZIP, …), the file name, and its size/extension metadata. Four or more files collapse behind a “+N more” toggle. Tapping a card opens the file. A caption renders under the stack.

cardBackgroundColor only applies when the message carries multiple files — a single file card sits directly on the bubble background.

In Jetpack Compose it is governed by CometChatFilesBubbleStyle; the Kotlin (XML Views) list reuses your existing File Bubble style. Key Compose properties:

Property	Type	Description
cardBackgroundColor / cardCornerRadius	Color / Dp	Each file card (multiples only)
itemSpacing	Dp	Vertical gap between cards
fileIconBackgroundColor / fileIconCornerRadius / fileIconSize	Color / Dp	The file-type icon plate
titleTextColor / titleTextStyle	Color / TextStyle	File name text
subtitleTextColor / subtitleTextStyle	Color / TextStyle	File size/extension text
downloadIconTint	Color	Per-card download icon
toggleTextColor / toggleTextStyle	Color / TextStyle	The “+N more” / “Show less” toggle
captionTextColor / captionTextStyle	Color / TextStyle	The caption row under the cards

Captions containing rich text (code blocks, quote blocks, inline code) render through the same pipeline as Text Bubbles, so their formatting looks identical across message types.

---

Sticker Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomStickerBubble" parent="CometChatStickerBubbleStyle">
    <item name="cometchatStickerBubbleBackgroundColor">#FEEDE1</item>
</style>

<style name="CustomIncomingBubble" parent="CometChatIncomingMessageBubbleStyle">
    <item name="cometchatStickerBubbleStyle">@style/CustomStickerBubble</item>
</style>

Jetpack Compose

incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
    stickerBubbleStyle = CometChatStickerBubbleStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1)
    )
)

Poll Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomOutgoingPollBubble" parent="CometChatOutgoingPollBubbleStyle">
    <item name="cometchatPollBubbleBackgroundColor">#F76808</item>
    <item name="cometchatPollBubbleProgressBackgroundColor">#FBAA75</item>
</style>

<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatPollBubbleStyle">@style/CustomOutgoingPollBubble</item>
</style>

Jetpack Compose

outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
    pollBubbleStyle = CometChatPollBubbleStyle.default().copy(
        backgroundColor = Color(0xFFF76808),
        progressBackgroundColor = Color(0xFFFBAA75)
    )
)

Collaborative Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomCollaborativeBubble" parent="CometChatOutgoingCollaborativeBubbleStyle">
    <item name="cometchatCollaborativeBubbleBackgroundColor">#F76808</item>
    <item name="cometchatCollaborativeBubbleSeparatorColor">#FBAA75</item>
</style>

<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatCollaborativeBubbleStyle">@style/CustomCollaborativeBubble</item>
</style>

Jetpack Compose

outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
    collaborativeBubbleStyle = CometChatCollaborativeBubbleStyle.default().copy(
        backgroundColor = Color(0xFFF76808),
        separatorColor = Color(0xFFFBAA75)
    )
)

Meet Call Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomMeetCallBubble" parent="CometChatOutgoingMeetCallBubbleStyle">
    <item name="cometchatMeetCallBubbleBackgroundColor">#F76808</item>
    <item name="cometchatMeetCallBubbleCallIconTint">#F76808</item>
</style>

<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatMeetCallBubbleStyle">@style/CustomMeetCallBubble</item>
</style>

Jetpack Compose

outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
    meetCallBubbleStyle = CometChatMeetCallBubbleStyle.default().copy(
        backgroundColor = Color(0xFFF76808),
        callIconTint = Color(0xFFF76808)
    )
)

Delete Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomDeleteBubble" parent="CometChatOutgoingDeleteBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
</style>

<style name="CustomOutgoingBubble" parent="CometChatOutgoingMessageBubbleStyle">
    <item name="cometchatDeleteBubbleStyle">@style/CustomDeleteBubble</item>
</style>

Jetpack Compose

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

Kotlin (XML Views)

themes.xml

<style name="CustomCallActionBubble" parent="CometChatCallActionBubbleStyle">
    <item name="cometchatCallActionBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatCallActionBubbleTextColor">#F76808</item>
    <item name="cometchatCallActionBubbleIconTint">#F76808</item>
</style>

<style name="CustomMessageListStyle" parent="CometChatMessageListStyle">
    <item name="cometchatMessageListCallActionBubbleStyle">@style/CustomCallActionBubble</item>
</style>

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatMessageListStyle">@style/CustomMessageListStyle</item>
</style>

Jetpack Compose

CometChatMessageList(
    style = CometChatMessageListStyle.default().copy(
        callActionBubbleStyle = CometChatCallActionBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            textColor = Color(0xFFF76808),
            iconTint = Color(0xFFF76808)
        )
    )
)

Action Bubble

Kotlin (XML Views)

themes.xml

<style name="CustomActionBubble" parent="CometChatActionBubbleStyle">
    <item name="cometchatActionBubbleBackgroundColor">#FEEDE1</item>
    <item name="cometchatActionBubbleTextColor">#F76808</item>
</style>

<style name="CustomMessageListStyle" parent="CometChatMessageListStyle">
    <item name="cometchatMessageListActionBubbleStyle">@style/CustomActionBubble</item>
</style>

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatMessageListStyle">@style/CustomMessageListStyle</item>
</style>

Jetpack Compose

CometChatMessageList(
    style = CometChatMessageListStyle.default().copy(
        actionBubbleStyle = CometChatActionBubbleStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            textColor = Color(0xFFF76808)
        )
    )
)