Component Styling - CometChat Docs

AI Integration Quick Reference

Field	Value
Kotlin XML Views	Override XML styles in `themes.xml` extending component parent styles (e.g., `CometChatConversationsStyle`), assign via theme attributes
Jetpack Compose	Pass style data classes as parameters (e.g., `CometChatConversationsStyle`, `CometChatMessageListStyle`) with `.default()` and `.copy()`
Pattern (XML)	Create custom style → extend parent → assign to `AppTheme` via theme attribute
Pattern (Compose)	Call `ComponentStyle.default().copy(property = value)` → pass as `style` parameter
Related	Theme Introduction · Color Resources · Message Bubble Styling

This page shows how to style CometChat UI Kit components in Android. It is written for Android developers customizing UI Kit v6.

When to use this

You want UI Kit screens (lists, headers, and message UI) to match your brand colors and typography.
You need to customize calling and AI UI components without rebuilding UI from scratch.
You prefer centralized styling through res/values/themes.xml (XML Views) or style data classes (Compose).
You want consistent iconography by supplying your own vector drawables.
You need a repeatable pattern that can be applied across components.

Prerequisites

CometChat Android UI Kit v6 installed in your app.
Your app theme extends CometChatTheme.DayNight (for XML Views).
You can edit res/values/themes.xml in your Android module.
You can add drawable resources to res/drawable/ when needed.
You rebuild or sync Gradle after updating styles.

Styling Pattern

Kotlin (XML Views)
Jetpack Compose

Components read styles from XML theme attributes. The pattern is:

Open res/values/themes.xml.
Create a custom style that extends the component’s parent style (for example, CometChatConversationsStyle).
Assign your custom style to AppTheme using the component’s theme attribute (for example, cometchatConversationsStyle).
Sync Gradle and rebuild the app.
Navigate to the screen that uses the component and confirm the visual change.

themes.xml

<resources>
    <style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
        <item name="cometchatConversationsAvatarStyle">@style/CustomAvatarStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
    </style>
</resources>

You can also set fonts globally:

themes.xml

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatFontBold">@font/your_font_bold</item>
    <item name="cometchatFontMedium">@font/your_font_medium</item>
    <item name="cometchatFontRegular">@font/your_font_regular</item>
</style>

Components accept a style parameter — a data class with .default() factory and .copy() for overrides:

CometChatConversations(
    style = CometChatConversationsStyle.default().copy(
        backgroundColor = Color(0xFFFFF9F5),
        titleTextColor = Color(0xFFF76808)
    )
)

Nested styles (e.g., avatar inside conversations) are overridden the same way:

CometChatConversations(
    style = CometChatConversationsStyle.default().copy(
        avatarStyle = CometChatAvatarStyle.default().copy(
            backgroundColor = Color(0xFFFBAA75),
            cornerRadius = 8.dp
        )
    )
)

Core concepts

AppTheme is the single place where UI Kit style hooks are wired (XML Views).
Each UI Kit component has a parent style (for example, CometChatMessageListStyle) and a theme attribute (for example, cometchatMessageListStyle).
Custom styles must extend the correct parent style to inherit default behavior.
Drawable overrides (for example, custom icons) live in res/drawable/ and are referenced from styles.
Fonts can be set once at the theme level and reused across components.

Implementation

Use the following sections to style each component. Each section lists what changes, where to change it, the exact code to paste, and how to verify the result.

Chat Lists & Messaging

Conversations

The CometChatConversations component renders the recent chats list.

What you’re changing: avatar and badge styling in the conversation list.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatConversations
Default behavior: UI Kit default avatar and badge styles.
Override: set cometchatConversationsStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomBadgeCountStyle" parent="CometChatBadgeStyle">
        <item name="cometchatBadgeBackgroundColor">#F76808</item>
        <item name="cometchatBadgeTextColor">#FFFFFF</item>
    </style>

    <style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
        <item name="cometchatConversationsAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatConversationsBadgeStyle">@style/CustomBadgeCountStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
    </style>
</resources>

CometChatConversations(
    style = CometChatConversationsStyle.default().copy(
        avatarStyle = CometChatAvatarStyle.default().copy(
            backgroundColor = Color(0xFFFBAA75),
            cornerRadius = 8.dp
        ),
        badgeStyle = CometChatBadgeStyle.default().copy(
            backgroundColor = Color(0xFFF76808),
            textColor = Color.White
        )
    )
)

What this does: applies custom avatar and badge styles to conversation list items.
Verify: the Conversations list shows updated avatar backgrounds and badge colors.

Attribute references:

Users

The CometChatUsers component renders a list of users for selection or navigation.

What you’re changing: user list avatar and separator styling.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatUsers
Default behavior: UI Kit default avatar and list styling.
Override: set cometchatUsersStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomUsersStyle" parent="CometChatUsersStyle">
        <item name="cometchatUsersAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatUsersSeparatorColor">#F76808</item>
        <item name="cometchatUsersTitleTextColor">#F76808</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatUsersStyle">@style/CustomUsersStyle</item>
    </style>
</resources>

CometChatUsers(
    style = CometChatUsersStyle.default().copy(
        separatorColor = Color(0xFFF76808),
        titleTextColor = Color(0xFFF76808)
    )
)

What this does: applies avatar and separator color overrides to the user list.
Verify: the Users list shows updated avatar backgrounds and separator color.

Attribute references:

Groups

The CometChatGroups component renders group items and their summary data.

What you’re changing: group list avatar and typography colors.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatGroups
Default behavior: UI Kit default group item styling.
Override: set cometchatGroupsStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomGroupsStyle" parent="CometChatGroupsStyle">
        <item name="cometchatGroupsAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatGroupsSeparatorColor">#F76808</item>
        <item name="cometchatGroupsTitleTextColor">#F76808</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatGroupsStyle">@style/CustomGroupsStyle</item>
    </style>
</resources>

CometChatGroups(
    style = CometChatGroupsStyle.default().copy(
        separatorColor = Color(0xFFF76808),
        titleTextColor = Color(0xFFF76808)
    )
)

What this does: styles group avatars and separators in the Groups list.
Verify: the Groups list shows the updated avatar background and title color.

Attribute references:

Message Header

The CometChatMessageHeader component renders the title, avatar, and action icons for a chat.

What you’re changing: title text color, avatar styling, and call button icons.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatMessageHeader
Default behavior: UI Kit default header typography and icons.
Override: set cometchatMessageHeaderStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomCallButtonStyle" parent="CometChatCallButtonsStyle">
        <item name="cometchatCallButtonsVideoCallIconTint">#F76808</item>
        <item name="cometchatCallButtonsVoiceCallIconTint">#F76808</item>
    </style>

    <style name="CustomMessageHeaderStyle" parent="CometChatMessageHeaderStyle">
        <item name="cometchatMessageHeaderTitleTextColor">#F76808</item>
        <item name="cometchatMessageHeaderAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatMessageHeaderCallButtonsStyle">@style/CustomCallButtonStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatMessageHeaderStyle">@style/CustomMessageHeaderStyle</item>
    </style>
</resources>

CometChatMessageHeader(
    style = CometChatMessageHeaderStyle.default().copy(
        titleTextColor = Color(0xFFF76808)
    )
)

What this does: applies custom title color, avatar styling, and call button tints in the message header.
Verify: open a conversation and check the header text and call button icons.

Attribute references:

Message List

The CometChatMessageList component renders conversation messages and their bubble styles.

What you’re changing: message list background and outgoing bubble styling.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatMessageList
Default behavior: UI Kit default message list background and bubble colors.
Override: set cometchatMessageListStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomCometChatMessageListStyle" parent="CometChatMessageListStyle">
        <item name="cometchatMessageListBackgroundColor">#FEEDE1</item>
        <item name="cometchatMessageListOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
    </style>

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

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

What this does: changes the message list background and outgoing bubble color.
Verify: open a conversation and check outgoing message bubble colors.

Attribute references:

Message Composer

The CometChatMessageComposer component renders the input box and action buttons.

What you’re changing: send button icon and composer icon tints.

Where to change it: res/drawable/active_send_button.xml and res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatMessageComposer
Default behavior: UI Kit default composer icons and send button drawable.
Override: set cometchatMessageComposerStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

res/drawable/active_send_button.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
    <path
        android:fillColor="#F76808"
        android:pathData="M16,0L16,0A16,16 0,0 1,32 16L32,16A16,16 0,0 1,16 32L16,32A16,16 0,0 1,0 16L0,16A16,16 0,0 1,16 0z" />
    <group>
        <clip-path android:pathData="M4,4h24v24h-24z" />
        <path
            android:fillColor="?attr/cometchatColorWhite"
            android:pathData="M10.767,22.723C10.465,22.843 10.178,22.818 9.907,22.646C9.636,22.474 9.5,22.223 9.5,21.894V17.673L16.423,16L9.5,14.327V10.106C9.5,9.777 9.636,9.526 9.907,9.354C10.178,9.182 10.465,9.157 10.767,9.277L24.723,15.161C25.095,15.328 25.281,15.608 25.281,16.002C25.281,16.395 25.095,16.674 24.723,16.838L10.767,22.723Z" />
    </group>
</vector>

res/values/themes.xml

<resources>
    <style name="CustomMessageComposerStyle" parent="CometChatMessageComposerStyle">
        <item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>
        <item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>
        <item name="cometchatMessageComposerActiveStickerIconTint">#F76808</item>
        <item name="cometchatMessageComposerInactiveStickerIconTint">#F76808</item>
        <item name="cometchatMessageComposerAIIconTint">#F76808</item>
        <item name="cometchatMessageComposerActiveSendButtonDrawable">@drawable/active_send_button</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatMessageComposerStyle">@style/CustomMessageComposerStyle</item>
    </style>
</resources>

CometChatMessageComposer(
    style = CometChatMessageComposerStyle.default().copy(
        attachmentIconTint = Color(0xFFF76808),
        voiceRecordingIconTint = Color(0xFFF76808),
        aiIconTint = Color(0xFFF76808)
    )
)

What this does: applies custom icon tints and the active send button drawable to the composer.
Verify: the composer shows the custom send button and tinted icons.

Attribute references:

Message Composer attributes

Group Members

The CometChatGroupMembers component lists users inside a group.

What you’re changing: group member list avatars, separators, and back icon tint.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatGroupMembers
Default behavior: UI Kit default list styling.
Override: set cometchatGroupMembersStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomGroupMembersStyle" parent="CometChatGroupMembersStyle">
        <item name="cometchatGroupMembersAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatGroupMembersSeparatorColor">#F76808</item>
        <item name="cometchatGroupMembersTitleTextColor">#F76808</item>
        <item name="cometchatGroupMembersBackIconTint">#F76808</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatGroupMembersStyle">@style/CustomGroupMembersStyle</item>
        <item name="cometchatPrimaryColor">#F76808</item>
    </style>
</resources>

CometChatGroupMembers(
    style = CometChatGroupMembersStyle.default().copy(
        separatorColor = Color(0xFFF76808),
        titleTextColor = Color(0xFFF76808)
    )
)

What this does: applies custom avatar and separator styling to the group members list.
Verify: the group members screen shows updated avatar and separator colors.

Attribute references:

Thread Header

The CometChatThreadHeader component renders the parent message preview in threaded views.

What you’re changing: thread header bubble colors and reply count styling.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatThreadHeader
Default behavior: UI Kit default thread header styling.
Override: set cometchatThreadHeaderStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
    </style>

    <style name="CustomThreadHeaderStyle" parent="CometChatThreadHeaderStyle">
        <item name="cometchatThreadHeaderOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
        <item name="cometchatThreadHeaderIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
        <item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>
        <item name="cometchatThreadHeaderReplyCountTextColor">#F76808</item>
        <item name="cometchatThreadHeaderReplyCountBackgroundColor">#FEEDE1</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatThreadHeaderStyle">@style/CustomThreadHeaderStyle</item>
    </style>
</resources>

CometChatThreadHeader(
    style = CometChatThreadHeaderStyle.default().copy(
        backgroundColor = Color(0xFFFEEDE1),
        replyCountTextColor = Color(0xFFF76808)
    )
)

What this does: customizes thread header bubble colors and reply count styling.
Verify: open a thread and confirm the header background and reply count colors.

Attribute references:

Mentions

The CometChatMentions styling controls how user mentions appear inside messages.

What you’re changing: mention text and background styles for incoming and outgoing bubbles.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatMentions
Default behavior: UI Kit default mention styling.
Override: set cometchatMessageBubbleMentionsStyle in both incoming and outgoing bubble styles.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomIncomingMessageBubbleMentionStyle" parent="CometChatIncomingBubbleMentionsStyle">
        <item name="cometchatMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
        <item name="cometchatMentionTextColor">#D6409F</item>
        <item name="cometchatMentionBackgroundColor">#D6409F</item>
        <item name="cometchatSelfMentionTextColor">#30A46C</item>
        <item name="cometchatSelfMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
        <item name="cometchatSelfMentionBackgroundColor">#30A46C</item>
    </style>

    <style name="CustomOutgoingMessageBubbleMentionStyle" parent="CometChatOutgoingBubbleMentionsStyle">
        <item name="cometchatMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
        <item name="cometchatMentionTextColor">#FFFFFF</item>
        <item name="cometchatMentionBackgroundColor">#F9F8FD</item>
        <item name="cometchatSelfMentionTextColor">#30A46C</item>
        <item name="cometchatSelfMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
        <item name="cometchatSelfMentionBackgroundColor">#30A46C</item>
    </style>

    <style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
        <item name="cometchatMessageBubbleMentionsStyle">@style/CustomIncomingMessageBubbleMentionStyle</item>
    </style>

    <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
        <item name="cometchatMessageBubbleMentionsStyle">@style/CustomOutgoingMessageBubbleMentionStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
        <item name="cometchatOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
    </style>
</resources>

CometChatMessageList(
    style = CometChatMessageListStyle.default().copy(
        incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
            mentionTextColor = Color(0xFFD6409F)
        ),
        outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
            mentionTextColor = Color.White
        )
    )
)

What this does: customizes mention colors for incoming and outgoing message bubbles.
Verify: send a mention in a chat and check the mention highlight colors.

Attribute references:

Calling UI

Call Logs

The CometChatCallLogs component renders recent call history.

What you’re changing: call log list separators and title colors.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatCallLogs
Default behavior: UI Kit default call log styling.
Override: set cometchatCallLogsStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomCallLogStyle" parent="CometChatCallLogsStyle">
        <item name="cometchatCallLogsSeparatorColor">#F76808</item>
        <item name="cometchatCallLogsTitleTextColor">#F76808</item>
        <item name="cometchatCallLogsAvatarStyle">@style/CustomAvatarStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatCallLogsStyle">@style/CustomCallLogStyle</item>
    </style>
</resources>

CometChatCallLogs(
    style = CometChatCallLogsStyle.default().copy(
        separatorColor = Color(0xFFF76808),
        titleTextColor = Color(0xFFF76808)
    )
)

What this does: applies custom avatar and text colors to the call logs list.
Verify: open Call Logs and confirm the separator and title colors.

Attribute references:

Call Logs attributes

Incoming Call

The CometChatIncomingCall component renders the incoming call UI.

What you’re changing: incoming call background, buttons, and avatar styling.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatIncomingCall
Default behavior: UI Kit default incoming call layout and colors.
Override: set cometchatIncomingCallStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomIncomingCallStyle" parent="CometChatIncomingCallStyle">
        <item name="cometchatIncomingCallBackgroundColor">#AA9EE8</item>
        <item name="cometchatIncomingCallAcceptButtonBackgroundColor">?attr/cometchatPrimaryColor</item>
        <item name="cometchatIncomingCallRejectButtonTextColor">?attr/cometchatErrorColor</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatIncomingCallStyle">@style/CustomIncomingCallStyle</item>
    </style>
</resources>

CometChatIncomingCall(
    call = call,
    style = CometChatIncomingCallStyle.default().copy(
        backgroundColor = Color(0xFFAA9EE8)
    )
)

What this does: customizes the incoming call screen background and action buttons.
Verify: trigger an incoming call and confirm the background and button colors.

Attribute references:

Outgoing Call

The CometChatOutgoingCall component renders the outgoing call UI.

What you’re changing: outgoing call avatar styling.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatOutgoingCall
Default behavior: UI Kit default outgoing call styling.
Override: set cometchatOutgoingCallStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomOutgoingCall" parent="CometChatOutgoingCallStyle">
        <item name="cometchatOutgoingCallAvatarStyle">@style/CustomAvatarStyle</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatOutgoingCallStyle">@style/CustomOutgoingCall</item>
    </style>
</resources>

CometChatOutgoingCall(
    call = call,
    style = CometChatOutgoingCallStyle.default().copy(
        avatarStyle = CometChatAvatarStyle.default().copy(
            backgroundColor = Color(0xFFFBAA75)
        )
    )
)

What this does: applies a custom avatar style to the outgoing call screen.
Verify: place a call and confirm the avatar styling.

Attribute references:

Base Components

Avatar

The CometChatAvatar component is used across lists and headers.

What you’re changing: avatar shape and background color.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatAvatar
Default behavior: UI Kit default avatar styling.
Override: set cometchatAvatarStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatAvatarStyle">@style/CustomAvatarStyle</item>
    </style>
</resources>

// Globally via CometChatConversations, CometChatUsers, etc.
style = ComponentStyle.default().copy(
    avatarStyle = CometChatAvatarStyle.default().copy(
        backgroundColor = Color(0xFFFBAA75),
        cornerRadius = 8.dp
    )
)

What this does: applies a consistent avatar style across UI Kit components.
Verify: open any list with avatars and confirm the style.

Attribute references:

Avatar attributes

Badge

The CometChatBadge component shows unread or notification counts.

What you’re changing: badge background, text color, and corner radius.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatBadge
Default behavior: UI Kit default badge styling.
Override: set cometchatBadgeStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomBadgeStyle" parent="CometChatBadgeStyle">
        <item name="cometchatBadgeBackgroundColor">#F44649</item>
        <item name="cometchatBadgeTextColor">#FFFFFF</item>
        <item name="cometchatBadgeCornerRadius">4dp</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatBadgeStyle">@style/CustomBadgeStyle</item>
    </style>
</resources>

// Via parent component style
style = CometChatConversationsStyle.default().copy(
    badgeStyle = CometChatBadgeStyle.default().copy(
        backgroundColor = Color(0xFFF44649),
        textColor = Color.White,
        cornerRadius = 4.dp
    )
)

What this does: applies a custom badge appearance across UI Kit lists.
Verify: check any unread badge to confirm colors and radius.

Attribute references:

Badge attributes

Status Indicator

The CometChatStatusIndicator component shows user presence status.

What you’re changing: status indicator icon shape and drawable.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatStatusIndicator
Default behavior: UI Kit default presence icon.
Override: set cometchatStatusIndicatorStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomStatusIndicatorStyle" parent="CometChatStatusIndicatorStyle">
        <item name="cometchatStatusIndicatorCornerRadius">8dp</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatStatusIndicatorStyle">@style/CustomStatusIndicatorStyle</item>
    </style>
</resources>

// Via parent component style
style = ComponentStyle.default().copy(
    statusIndicatorStyle = CometChatStatusIndicatorStyle.default().copy(
        cornerRadius = 8.dp
    )
)

What this does: applies the custom status indicator in UI Kit components.
Verify: check any user list to confirm the presence icon.

Attribute references:

Status Indicator attributes

Reaction List

The CometChatReactionList component renders reactions on messages.

What you’re changing: active tab color in the reaction list.

Where to change it: res/values/themes.xml (XML Views) or style parameter (Compose)
Applies to: CometChatReactionList
Default behavior: UI Kit default reaction list styling.
Override: set cometchatReactionListStyle in AppTheme or pass a style object.

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomReactionListStyle" parent="CometChatReactionListStyle">
        <item name="cometchatReactionListTabTextActiveColor">#F76808</item>
    </style>

    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatReactionListStyle">@style/CustomReactionListStyle</item>
    </style>
</resources>

CometChatReactionList(
    style = CometChatReactionListStyle.default().copy(
        tabTextActiveColor = Color(0xFFF76808)
    )
)

What this does: applies a custom active tab color in the reaction list.
Verify: open reactions and confirm the active tab color.

Attribute references:

Reaction List attributes

Customization matrix

What you want to change	Where	Property or API	Example
Conversations avatar and badge	`themes.xml` / style param	`cometchatConversationsStyle`	`cometchatConversationsBadgeStyle`
Users list separators	`themes.xml` / style param	`cometchatUsersStyle`	`cometchatUsersSeparatorColor`
Group list titles	`themes.xml` / style param	`cometchatGroupsStyle`	`cometchatGroupsTitleTextColor`
Header call icons	`themes.xml` / style param	`cometchatMessageHeaderStyle`	`cometchatMessageHeaderCallButtonsStyle`
Message list background	`themes.xml` / style param	`cometchatMessageListStyle`	`cometchatMessageListBackgroundColor`
Composer send button	`res/drawable/` + `themes.xml`	`cometchatMessageComposerActiveSendButtonDrawable`	`@drawable/active_send_button`
Call buttons styling	`themes.xml` / style param	`cometchatCallButtonsStyle`	`cometchatCallButtonsVideoCallBackgroundColor`

​When to use this

​Prerequisites

​Styling Pattern

​Core concepts

​Implementation

​Chat Lists & Messaging

​Conversations

​Users

​Groups

​Message Header

​Message List

​Message Composer

​Group Members

​Thread Header

​Mentions

​Calling UI

​Call Logs

​Incoming Call

​Outgoing Call

​Base Components

​Avatar

​Badge

​Status Indicator

​Reaction List

​Customization matrix

When to use this

Prerequisites

Styling Pattern

Core concepts

Implementation

Chat Lists & Messaging

Conversations

Users

Groups

Message Header

Message List

Message Composer

Group Members

Thread Header

Mentions

Calling UI

Call Logs

Incoming Call

Outgoing Call

Base Components

Avatar

Badge

Status Indicator

Reaction List

Customization matrix