Message Bubble Styling - CometChat Docs

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:

Hub styles — IncomingMessageBubbleStyle and OutgoingMessageBubbleStyle control the base bubble appearance
Per-type styles — Text, Image, Audio, etc. are nested inside the hub styles

Global Setup

Kotlin (XML Views)
Jetpack Compose

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>

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)
Jetpack Compose

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>

// 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)
Jetpack Compose

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>

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

Audio Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

Video Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

File Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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)
CometChatVideosBubbleStyle (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

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)
Jetpack Compose

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>

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

Poll Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

Collaborative Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

Meet Call Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

Delete Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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)
Jetpack Compose

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>

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

Action Bubble

Kotlin (XML Views)
Jetpack Compose

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>

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

​Styling Architecture

​Global Setup

​Core Message Bubbles

​Text Bubble

​Image Bubble

​Audio Bubble

​Video Bubble

​File Bubble

​Media Grid Bubble

​Audio Files Bubble

​Files Bubble

​Sticker Bubble

​Poll Bubble

​Collaborative Bubble

​Meet Call Bubble

​Delete Bubble

​List-Level Bubbles

​Call Action Bubble

​Action Bubble

Styling Architecture

Global Setup

Core Message Bubbles

Text Bubble

Image Bubble

Audio Bubble

Video Bubble

File Bubble

Media Grid Bubble

Audio Files Bubble

Files Bubble

Sticker Bubble

Poll Bubble

Collaborative Bubble

Meet Call Bubble

Delete Bubble

List-Level Bubbles

Call Action Bubble

Action Bubble