> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Your UI Kit Builder

> Customize CometChat UI Kit Builder components — modify props, styling, and behavior for Android.

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>