Styles

Customize component appearance using XML theme attributes or programmatic setter methods to match your app’s brand.

The UI Kit supports two approaches to styling: XML theme attributes for declarative, app-wide theming, and programmatic setters for runtime customization.

Programmatic setters take precedence over XML theme attributes when both are applied to the same property.

XML Theme Hierarchy

The theming system follows a three-level hierarchy:

1. Your AppTheme extends CometChatTheme.DayNight (theme-level colors and fonts)
2. Component styles extend parent styles (e.g., cometchatConversationsStyle)
3. Sub-component styles are nested within component styles (e.g., avatar style within conversations)

<!-- Level 1: Theme-level colors -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#6851D6</item>
    <item name="cometchatErrorColor">#FF3B30</item>
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatFontRegular">@font/my_regular_font</item>
    <item name="cometchatFontMedium">@font/my_medium_font</item>
    <item name="cometchatFontBold">@font/my_bold_font</item>

    <!-- Level 2: Component-level style -->
    <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
</style>

<!-- Level 2: Component style -->
<style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
    <item name="cometchatBackgroundColor">#F5F5F5</item>
    <item name="cometchatSeparatorColor">#E0E0E0</item>

    <!-- Level 3: Sub-component style -->
    <item name="cometchatAvatarStyle">@style/CustomAvatarStyle</item>
</style>

<!-- Level 3: Sub-component style -->
<style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
    <item name="cometchatCornerRadius">12dp</item>
    <item name="cometchatBackgroundColor">#E8E0FF</item>
</style>

Font Customization

Override fonts at the theme level using these attributes:

Attribute	Usage
cometchatFontBold	Headings, titles, and emphasized text
cometchatFontMedium	Subtitles and secondary headings
cometchatFontRegular	Body text, descriptions, and input fields

Programmatic Styling with CometChatTheme

The CometChatTheme class provides static setter/getter methods for runtime color and typography token overrides:

Color Tokens

Method	Description
setPrimaryColor(int)	Primary brand color used for buttons, links, and highlights
setErrorColor(int)	Error state color
setSuccessColor(int)	Success state color
setWarningColor(int)	Warning state color
setInfoColor(int)	Informational state color
setBackgroundColor1(int) – setBackgroundColor4(int)	Background color levels
setTextColorPrimary(int)	Primary text color
setTextColorSecondary(int)	Secondary text color
setTextColorTertiary(int)	Tertiary text color
setTextColorDisabled(int)	Disabled text color
setTextColorWhite(int)	White text color
setTextColorHighlight(int)	Highlighted text color

Icon Tints

Method	Description
setIconTintPrimary(int)	Primary icon tint
setIconTintSecondary(int)	Secondary icon tint
setIconTintTertiary(int)	Tertiary icon tint
setIconTintWhite(int)	White icon tint
setIconTintHighlight(int)	Highlighted icon tint

Button Colors

Method	Description
setPrimaryButtonBackgroundColor(int)	Primary button background
setPrimaryButtonTextColor(int)	Primary button text
setSecondaryButtonBackgroundColor(int)	Secondary button background
setSecondaryButtonTextColor(int)	Secondary button text

Kotlin

// Override theme colors at runtime
CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"))
CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"))
CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"))
CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"))

Java

// Override theme colors at runtime
CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"));
CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"));
CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"));
CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"));

Component Style Setters

Each component exposes setter methods for its own style and sub-component styles. Using CometChatConversations as an example:

Method	Applies To
setStyle(@StyleRes int)	The component’s own style
setAvatarStyle(@StyleRes int)	Avatar sub-component
setBadgeStyle(@StyleRes int)	Unread badge sub-component
setReceiptStyle(@StyleRes int)	Message receipt icons
setTypingIndicatorStyle(@StyleRes int)	Typing indicator
setMentionsStyle(@StyleRes int)	Mentions formatting
setStatusIndicatorStyle(@StyleRes int)	Online/offline status indicator
setDateStyle(@StyleRes int)	Date/time label

Kotlin

val conversations = CometChatConversations(context)
conversations.setStyle(R.style.CustomConversationsStyle)
conversations.setAvatarStyle(R.style.CustomAvatarStyle)
conversations.setBadgeStyle(R.style.CustomBadgeStyle)

Java

CometChatConversations conversations = new CometChatConversations(context);
conversations.setStyle(R.style.CustomConversationsStyle);
conversations.setAvatarStyle(R.style.CustomAvatarStyle);
conversations.setBadgeStyle(R.style.CustomBadgeStyle);

Related

• Theming Introduction — Full theming reference for the UI Kit.
• Component Styling — Detailed per-component style attribute reference.
• Customization Overview — See all customization categories.