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. Each component supports customization of colors, typography, and icons.

Styling Pattern

Kotlin (XML Views)
Jetpack Compose

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

Create a custom style extending the component’s parent style
Override the attributes you want to change
Assign your custom style to AppTheme via the component’s theme attribute

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

Chat Lists & Messaging

Conversation List

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

Users

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <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)
    )
)

Groups

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <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)
    )
)

Message Header

Kotlin (XML Views)
Jetpack Compose

themes.xml

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

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

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

Message List

Kotlin (XML Views)
Jetpack Compose

themes.xml

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

    <style name="CustomMessageListStyle" parent="CometChatMessageListStyle">
        <item name="cometchatMessageListBackgroundColor">#FEEDE1</item>
        <item name="cometchatMessageListOutgoingMessageBubbleStyle">@style/CustomOutgoingBubble</item>
    </style>

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

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

Message Composer

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomMessageComposerStyle" parent="CometChatMessageComposerStyle">
        <item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>
        <item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>
        <item name="cometchatMessageComposerAIIconTint">#F76808</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)
    )
)

Group Members

Kotlin (XML Views)
Jetpack Compose

themes.xml

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

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

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

Thread Header

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomThreadHeaderStyle" parent="CometChatThreadHeaderStyle">
        <item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>
        <item name="cometchatThreadHeaderReplyCountTextColor">#F76808</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)
    )
)

Calling UI

Call Logs

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <style name="CustomCallLogStyle" parent="CometChatCallLogsStyle">
        <item name="cometchatCallLogsSeparatorColor">#F76808</item>
        <item name="cometchatCallLogsTitleTextColor">#F76808</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)
    )
)

Incoming Call

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

Outgoing Call

Kotlin (XML Views)
Jetpack Compose

themes.xml

<resources>
    <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)
        )
    )
)

Base Components

Avatar

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

Badge

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

Status Indicator

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

Reaction List

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

​Styling Pattern

​Chat Lists & Messaging

​Conversation List

​Users

​Groups

​Message Header

​Message List

​Message Composer

​Group Members

​Thread Header

​Calling UI

​Call Logs

​Incoming Call

​Outgoing Call

​Base Components

​Avatar

​Badge

​Status Indicator

​Reaction List

Styling Pattern

Chat Lists & Messaging

Conversation List

Users

Groups

Message Header

Message List

Message Composer

Group Members

Thread Header

Calling UI

Call Logs

Incoming Call

Outgoing Call

Base Components

Avatar

Badge

Status Indicator

Reaction List