Customizing Your UI Kit Builder

The CometChatBuilderSettings.kt file handles basic feature toggles. For deeper customizations, modify component props using BuilderSettingsHelper or edit the source code directly.

Understanding the Customization Architecture

The Android UI Kit Builder uses two main files for customization:

File	Purpose	When to Modify
`CometChatBuilderSettings.kt`	Auto-generated feature flags and configuration constants	Functional changes (enable/disable features)
`themes.xml`	Theme styles, colors, and typography	UI/visual changes (colors, fonts, spacing)
`BuilderSettingsHelper.kt`	Utility class that applies settings to UI components	Component-level customizations

CometChatBuilderSettings.kt is auto-generated by the Builder plugin from your cometchat-builder-settings.json file. You can modify the values directly in the Kotlin file, but changes will be overwritten if you rebuild with the plugin.

Using BuilderSettingsHelper

The BuilderSettingsHelper is a utility class that applies your Builder configuration to CometChat UI components. It reads values from CometChatBuilderSettings and configures component properties accordingly.

How It Works

Import the helper into your Activity or Fragment
Get a reference to your CometChat UI component
Call the appropriate method to apply settings

import com.yourpackage.BuilderSettingsHelper

// Apply settings to your components
BuilderSettingsHelper.applySettingsToMessageHeader(messageHeader)
BuilderSettingsHelper.applySettingsToMessageList(messageList)
BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)

Component-Level Customizations

MessageHeader

The applySettingsToMessageHeader method configures call buttons and user status visibility based on your Builder settings.

import com.cometchat.chatuikit.messageheader.CometChatMessageHeader
import com.yourpackage.BuilderSettingsHelper

class MessagesActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val messageHeader: CometChatMessageHeader = binding.messageHeader
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingsToMessageHeader(messageHeader)
    }
}

Settings Applied:

Setting	Property	Description
`VoiceAndVideoCalling.ONEONONEVOICECALLING`	`voiceCallButtonVisibility`	Shows/hides voice call button for 1:1 chats
`VoiceAndVideoCalling.ONEONONEVIDEOCALLING`	`videoCallButtonVisibility`	Shows/hides video call button for 1:1 chats
`VoiceAndVideoCalling.GROUPVOICECONFERENCE`	`voiceCallButtonVisibility`	Shows/hides voice call button for groups
`VoiceAndVideoCalling.GROUPVIDEOCONFERENCE`	`videoCallButtonVisibility`	Shows/hides video call button for groups
`CoreMessagingExperience.USERANDFRIENDSPRESENCE`	`userStatusVisibility`	Shows/hides online status indicator

MessageList

The applySettingsToMessageList method configures message options, reactions, AI features, and more.

import com.cometchat.chatuikit.messagelist.CometChatMessageList
import com.yourpackage.BuilderSettingsHelper

class MessagesActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val messageList: CometChatMessageList = binding.messageList
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingsToMessageList(messageList)
    }
}

Settings Applied:

Setting	Property	Description
`CoreMessagingExperience.THREADCONVERSATIONANDREPLIES`	`replyInThreadOptionVisibility`	Shows/hides reply in thread option
`CoreMessagingExperience.EDITMESSAGE`	`editMessageOptionVisibility`	Shows/hides edit message option
`CoreMessagingExperience.DELETEMESSAGE`	`deleteMessageOptionVisibility`	Shows/hides delete message option
`CoreMessagingExperience.MESSAGEDELIVERYANDREADRECEIPTS`	`receiptsVisibility`	Shows/hides read receipts
`CoreMessagingExperience.QUOTEDREPLIES`	`isSwipeToReplyEnabled`, `replyOptionVisibility`	Enables swipe-to-reply and reply option
`DeeperUserEngagement.REACTIONS`	`messageReactionOptionVisibility`	Shows/hides reaction option
`DeeperUserEngagement.MESSAGETRANSLATION`	`translateMessageOptionVisibility`	Shows/hides translate option
`AiUserCopilot.CONVERSATIONSTARTER`	`isEnableConversationStarter`	Enables AI conversation starters
`AiUserCopilot.SMARTREPLY`	`isEnableSmartReplies`	Enables AI smart replies
`PrivateMessagingWithinGroups.SENDPRIVATEMESSAGETOGROUPMEMBERS`	`messagePrivatelyOptionVisibility`	Shows/hides message privately option

MessageComposer

The applySettingsToMessageComposer method configures attachment options, typing indicators, mentions, and more.

import com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer
import com.yourpackage.BuilderSettingsHelper

class MessagesActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val messageComposer: CometChatMessageComposer = binding.messageComposer
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)
    }
}

Settings Applied:

Setting	Property	Description
`CoreMessagingExperience.TYPINGINDICATOR`	`disableTypingEvents()`	Enables/disables typing indicators
`CoreMessagingExperience.PHOTOSSHARING`	`cameraAttachmentOptionVisibility`, `imageAttachmentOptionVisibility`	Shows/hides photo attachments
`CoreMessagingExperience.VIDEOSHARING`	`videoAttachmentOptionVisibility`	Shows/hides video attachments
`CoreMessagingExperience.AUDIOSHARING`	`audioAttachmentOptionVisibility`	Shows/hides audio attachments
`CoreMessagingExperience.FILESHARING`	`fileAttachmentOptionVisibility`	Shows/hides file attachments
`DeeperUserEngagement.MENTIONS`	`isDisableMentions`	Enables/disables @mentions
`DeeperUserEngagement.MENTIONALL`	`setDisableMentionAll()`	Enables/disables @all mentions
`DeeperUserEngagement.POLLS`	`pollAttachmentOptionVisibility`	Shows/hides polls option
`DeeperUserEngagement.COLLABORATIVEWHITEBOARD`	`collaborativeWhiteboardOptionVisibility`	Shows/hides whiteboard option
`DeeperUserEngagement.COLLABORATIVEDOCUMENT`	`collaborativeDocumentOptionVisibility`	Shows/hides document option
`DeeperUserEngagement.VOICENOTES`	`voiceNoteButtonVisibility`	Shows/hides voice notes button
`DeeperUserEngagement.STICKERS`	`stickersButtonVisibility`	Shows/hides stickers button

Users

The applySettingsToUsers method configures user list display options.

import com.cometchat.chatuikit.users.CometChatUsers
import com.yourpackage.BuilderSettingsHelper

class UsersActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val users: CometChatUsers = binding.users
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingsToUsers(users)
    }
}

Settings Applied:

Setting	Property	Description
`CoreMessagingExperience.USERANDFRIENDSPRESENCE`	`userStatusVisibility`	Shows/hides online status indicator

CallLogs

The applySettingsToCallLogs method configures call log display and call buttons.

import com.cometchat.chatuikit.calls.calllogs.CometChatCallLogs
import com.yourpackage.BuilderSettingsHelper

class CallsActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val callLogs: CometChatCallLogs = binding.callLogs
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingsToCallLogs(callLogs)
    }
}

Settings Applied:

Setting	Property	Description
`VoiceAndVideoCalling.ONEONONEVIDEOCALLING`	`itemVideoCallIcon`	Shows/hides video call icon
`VoiceAndVideoCalling.ONEONONEVOICECALLING`	`itemIncomingCallIcon`	Shows/hides voice call icon

GroupMembers

The applySettingToGroupMembers method configures moderator controls and member display options.

import com.cometchat.chatuikit.groupmembers.CometChatGroupMembers
import com.yourpackage.BuilderSettingsHelper

class GroupMembersActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val groupMembers: CometChatGroupMembers = binding.groupMembers
        
        // Apply Builder settings
        BuilderSettingsHelper.applySettingToGroupMembers(groupMembers)
    }
}

Settings Applied:

Setting	Property	Description
`ModeratorControls.KICKUSERS`	`kickMemberOptionVisibility`	Shows/hides kick member option
`ModeratorControls.BANUSERS`	`banMemberOptionVisibility`	Shows/hides ban member option
`ModeratorControls.PROMOTEDEMOTEMEMBERS`	`scopeChangeOptionVisibility`	Shows/hides promote/demote option
`CoreMessagingExperience.USERANDFRIENDSPRESENCE`	`userStatusVisibility`	Shows/hides online status indicator

Functional Changes via CometChatBuilderSettings

For functional changes (enabling/disabling features), you can directly access the CometChatBuilderSettings object:

import com.cometchat.builder.CometChatBuilderSettings

// Check if a feature is enabled
if (CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING) {
    // Photo sharing is enabled
}

// Check AI features
if (CometChatBuilderSettings.ChatFeatures.AiUserCopilot.SMARTREPLY) {
    // Smart reply is enabled
}

// Check call features
if (CometChatBuilderSettings.CallFeatures.VoiceAndVideoCalling.ONEONONEVIDEOCALLING) {
    // 1:1 video calling is enabled
}

// Access layout settings
val tabs = CometChatBuilderSettings.Layout.TABS // List of enabled tabs
val chatType = CometChatBuilderSettings.Layout.CHATTYPE // "user" or "group"

// Access style settings
val brandColor = CometChatBuilderSettings.Style.Color.BRANDCOLOR
val theme = CometChatBuilderSettings.Style.THEME // "light", "dark", or "system"

Modifying Feature Flags at Runtime

You can modify feature flags at runtime by directly setting the values:

// Disable photo sharing at runtime
CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING = false

// Enable AI smart replies
CometChatBuilderSettings.ChatFeatures.AiUserCopilot.SMARTREPLY = true

// Then re-apply settings to your components
BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)
BuilderSettingsHelper.applySettingsToMessageList(messageList)

Runtime changes to CometChatBuilderSettings are not persisted. They will reset to the original values when the app restarts.

UI/Theme Changes via themes.xml

For visual customizations (colors, fonts, spacing), modify the themes.xml file in your res/values directory.

Customizing Colors

themes.xml

<style name="CometChat.Builder.Theme" parent="CometChatTheme.DayNight">
    <!-- Brand color (primary accent) -->
    <item name="cometchatPrimaryColor">#6852D6</item>
    
    <!-- Text colors -->
    <item name="cometchatTextColorPrimary">#141414</item>
    <item name="cometchatTextColorSecondary">#727272</item>
    
    <!-- Background colors -->
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatBackgroundColor2">#F5F5F5</item>
</style>

Customizing Typography

themes.xml

<style name="CometChat.Builder.Theme" parent="CometChatTheme.DayNight">
    <!-- Custom fonts -->
    <item name="cometchatFontBold">@font/your_font_bold</item>
    <item name="cometchatFontRegular">@font/your_font_regular</item>
    <item name="cometchatFontMedium">@font/your_font_medium</item>
</style>

Pre-built Font Themes

The Builder includes pre-built font themes you can use:

themes.xml

<!-- Use Roboto (default) -->
<style name="YourAppTheme" parent="Builder.Theme.Roboto" />

<!-- Use Arial -->
<style name="YourAppTheme" parent="Builder.Theme.Arial" />

<!-- Use Inter -->
<style name="YourAppTheme" parent="Builder.Theme.Inter" />

<!-- Use Times New Roman -->
<style name="YourAppTheme" parent="Builder.Theme.TimesNewRoman" />

Customizing Component Styles

You can customize individual component styles by overriding their style attributes:

themes.xml

<!-- Custom Message List Style -->
<style name="CustomCometChatMessageListStyle" parent="CometChatMessageListStyle">
    <item name="cometchatMessageListOutgoingMessageBubbleStyle">
        @style/CustomOutgoingMessageBubbleStyle
    </item>
</style>

<!-- Custom Outgoing Message Bubble -->
<style name="CustomOutgoingMessageBubbleStyle">
    <item name="cometchatMessageBubbleBackgroundColor">?attr/cometchatBackgroundColor4</item>
    <item name="cometchatMessageBubbleCornerRadius">@dimen/cometchat_radius_3</item>
</style>

<!-- Custom Message Composer Style -->
<style name="CustomMessageComposerStyle">
    <item name="cometchatMessageComposerComposeBoxStrokeWidth">@dimen/cometchat_1dp</item>
    <item name="cometchatMessageComposerComposeBoxCornerRadius">@dimen/cometchat_radius_2</item>
</style>

Next Steps

UI Kit Builder Settings

Understand all available feature toggles and configuration options.

Components Overview

Explore all available UI components and their customization options.

Theming

Deep dive into colors, typography, and advanced styling.

Directory Structure

Understand how the exported code is organized.

​Understanding the Customization Architecture

​Using BuilderSettingsHelper

​How It Works

​Component-Level Customizations

​MessageHeader

​MessageList

​MessageComposer

​Users

​CallLogs

​GroupMembers

​Functional Changes via CometChatBuilderSettings

​Modifying Feature Flags at Runtime

​UI/Theme Changes via themes.xml

​Customizing Colors

​Customizing Typography

​Pre-built Font Themes

​Customizing Component Styles

​Next Steps

UI Kit Builder Settings

Components Overview

Theming

Directory Structure

Understanding the Customization Architecture

Using BuilderSettingsHelper

How It Works

Component-Level Customizations

MessageHeader

MessageList

MessageComposer

Users

CallLogs

GroupMembers

Functional Changes via CometChatBuilderSettings

Modifying Feature Flags at Runtime

UI/Theme Changes via themes.xml

Customizing Colors

Customizing Typography

Pre-built Font Themes

Customizing Component Styles

Next Steps