> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Info>
  `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.
</Info>

***

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

```kotlin theme={null}
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.

```kotlin theme={null}
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.

```kotlin theme={null}
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.

```kotlin theme={null}
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.

```kotlin theme={null}
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.

```kotlin theme={null}
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.

```kotlin theme={null}
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:

```kotlin theme={null}
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:

```kotlin theme={null}
// 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)
```

<Note>
  Runtime changes to `CometChatBuilderSettings` are not persisted. They will reset to the original values when the app restarts.
</Note>

***

## UI/Theme Changes via themes.xml

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

### Customizing Colors

```xml themes.xml theme={null}
<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

```xml themes.xml theme={null}
<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:

```xml themes.xml theme={null}
<!-- 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:

```xml themes.xml theme={null}
<!-- 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

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/android/builder-settings">
    Understand all available feature toggles and configuration options.
  </Card>

  <Card title="Components Overview" href="/ui-kit/android/components-overview">
    Explore all available UI components and their customization options.
  </Card>

  <Card title="Theming" href="/ui-kit/android/theme-introduction">
    Deep dive into colors, typography, and advanced styling.
  </Card>

  <Card title="Directory Structure" href="/chat-builder/android/builder-dir-structure">
    Understand how the exported code is organized.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.