Customizing Your UI Kit Builder

Customize Android UI Kit Builder components with BuilderSettingsHelper, generated settings, themes, colors, and source edits.

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

1. Import the helper into your Activity or Fragment
2. Get a reference to your CometChat UI component
3. 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.