Skip to main content
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

1

Set up the global bubble hubs

Define CustomIncomingMessageBubbleStyle and CustomOutgoingMessageBubbleStyle in res/values/themes.xml and connect them to AppTheme.
2

Style a specific bubble type

Create a custom style for the bubble type (e.g., CustomIncomingTextBubbleStyle) and link it inside the hub style.
3

Build and verify

Run the app, open a conversation, and confirm the bubble styling.
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.

Styling Architecture

To style message bubbles effectively without duplicating code, understand this inheritance hierarchy.
All code in this guide belongs in res/values/themes.xml.
  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.
themes.xml
Customizing Incoming Message Bubble
Customizing Outgoing Message Bubble
Attribute references:

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
themes.xml
Attribute reference: Displays a preview of links shared in messages, enriching the experience with titles, descriptions, and images. Default & Customization
themes.xml

Image Bubble

Image bubbles display images shared within a conversation. Default & Customization
themes.xml
Attribute reference:

Video Bubble

Video bubbles display video messages or clips in a chat. Customization
themes.xml
Attribute reference:

Audio Bubble

Audio bubbles represent audio messages or voice recordings. Default & Customization
themes.xml
Attribute reference:

File Bubble

Displays shared files, such as documents, PDFs, or spreadsheets. Default & Customization
themes.xml
Attribute reference:

Sticker Bubble

Displays visual stickers shared in a conversation. Default & Customization
themes.xml
Attribute reference:

Poll Bubble

Displays polls, options, and live results. Default & Customization
themes.xml
Attribute reference:

Collaborative Bubble

Displays collaborative content, such as shared documents or tasks. Default & Customization
themes.xml
Attribute reference:

Meet Call Bubble

Displays call-related actions and statuses in the chat interface. Default & Customization
themes.xml
Attribute reference:

Delete Bubble

Indicates a message that has been removed by the sender. Default & Customization
themes.xml
Attribute reference:

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
themes.xml
Attribute references:

Action Bubble

Displays global group actions (e.g., “User joined the chat”). Default & Customization
themes.xml
Attribute reference:

AI Assistant Bubble

Styles interactions generated by the AI assistant. These are anchored to the IncomingMessageBubbleStyle. Default & Customization
themes.xml
Attribute reference:

Quoted Reply

Styles the preview block when a user replies to a specific message.
themes.xml
Attribute reference:

Customization matrix