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

# Message Composer

> Message input area with send, attachment, voice note, sticker, and AI buttons. Supports text, media, mentions, and message editing.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatMessageComposer",
    "package": "com.cometchat.chatuikit.messagecomposer",
    "xmlElement": "<com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer />",
    "description": "Message input area with send, attachment, voice note, sticker, and AI buttons. Supports text, media, mentions, and message editing.",
    "primaryOutput": {
      "method": "setOnSendButtonClick",
      "type": "SendButtonClick"
    },
    "methods": {
      "data": {
        "setUser": {
          "type": "User",
          "default": "null",
          "note": "Sets the target user for one-on-one conversations"
        },
        "setGroup": {
          "type": "Group",
          "default": "null",
          "note": "Sets the target group for group conversations"
        }
      },
      "callbacks": {
        "setOnSendButtonClick": "SendButtonClick — void onClick(Context context, BaseMessage message)",
        "setOnError": "OnError",
        "setOnTextChangedListener": "CometChatTextWatcher"
      },
      "visibility": {
        "setAttachmentButtonVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" },
        "setVoiceNoteButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setSendButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setStickersButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setAuxiliaryButtonVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setImageAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setCameraAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setVideoAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setAudioAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setFileAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setPollAttachmentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setCollaborativeDocumentOptionVisibility": { "type": "int", "default": "View.VISIBLE" },
        "setCollaborativeWhiteboardOptionVisibility": { "type": "int", "default": "View.VISIBLE" }
      },
      "viewSlots": {
        "setHeaderView": "View — custom view above the text input area",
        "setFooterView": "View — custom view below the text input area",
        "setSendButtonView": "View — replaces the default send button",
        "setAuxiliaryButtonView": "View — replaces the auxiliary button area (stickers, AI)",
        "setAttachmentOptions": "List<CometChatMessageComposerAction> — replaces default attachment options",
        "setAIOptions": "Function4<Context, User, Group, HashMap, List<CometChatMessageComposerAction>> — replaces AI options",
        "setTextFormatters": "List<CometChatTextFormatter> — custom text formatters (mentions, etc.)",
        "setSuggestionListItemView": "SuggestionListViewHolderListener — custom suggestion list item"
      },
      "advanced": {
        "setParentMessageId": "long — sets the parent message ID for threaded replies",
        "setInitialComposerText": "String — sets predefined text in the input field",
        "getText": "String — returns the current raw text",
        "getProcessedText": "String — returns text with formatting applied",
        "getComposerViewModel": "MessageComposerViewModel — internal ViewModel access",
        "getMessageInput": "CometChatMessageInput — internal message input access",
        "getView": "LinearLayout — root view access"
      },
      "style": {
        "setStyle": {
          "type": "@StyleRes int",
          "parent": "CometChatMessageComposerStyle"
        }
      }
    },
    "events": [],
    "sdkListeners": []
  }
  ```
</Accordion>

## Where It Fits

`CometChatMessageComposer` is an input component. It renders the message input area and sends messages to the active conversation. Wire it with `CometChatMessageHeader` and `CometChatMessageList` to build a complete messaging layout.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin ChatActivity.kt lines theme={null}
    class ChatActivity : AppCompatActivity() {

        private lateinit var messageHeader: CometChatMessageHeader
        private lateinit var messageList: CometChatMessageList
        private lateinit var messageComposer: CometChatMessageComposer

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_chat)

            messageHeader = findViewById(R.id.message_header)
            messageList = findViewById(R.id.message_list)
            messageComposer = findViewById(R.id.message_composer)

            // Set the user on all three components
            messageHeader.setUser(user)
            messageList.setUser(user)
            messageComposer.setUser(user)
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java ChatActivity.java lines theme={null}
    public class ChatActivity extends AppCompatActivity {

        private CometChatMessageHeader messageHeader;
        private CometChatMessageList messageList;
        private CometChatMessageComposer messageComposer;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_chat);

            messageHeader = findViewById(R.id.message_header);
            messageList = findViewById(R.id.message_list);
            messageComposer = findViewById(R.id.message_composer);

            // Set the user on all three components
            messageHeader.setUser(user);
            messageList.setUser(user);
            messageComposer.setUser(user);
        }
    }
    ```
  </Tab>
</Tabs>

## Quick Start

Add the component to your layout XML:

```xml layout_activity.xml lines theme={null}
<com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer
        android:id="@+id/composer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/qyfJptTKpJBV4TKk/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=qyfJptTKpJBV4TKk&q=85&s=be625574812e2466e65c31e3917dd663" width="2560" height="464" data-path="images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png" />
</Frame>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.

<Warning>
  The MessageComposer is responsible for managing runtime permissions. To ensure the **ActivityResultLauncher** is properly initialized, its object should be created in the **onCreate** state of an activity. To ensure that the composer is loaded within the fragment, it is important to make sure that the fragment is loaded in the `onCreate` state of the activity.
</Warning>

To add programmatically in an Activity:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val composer = CometChatMessageComposer(this)
        composer.setUser(user)
        setContentView(composer)
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        CometChatMessageComposer composer = new CometChatMessageComposer(this);
        composer.setUser(user);
        setContentView(composer);
    }
    ```
  </Tab>
</Tabs>

Or in a Fragment:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourFragment.kt lines theme={null}
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        val composer = CometChatMessageComposer(requireContext())
        composer.setUser(user)
        return composer
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java YourFragment.java lines theme={null}
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        CometChatMessageComposer composer = new CometChatMessageComposer(getContext());
        composer.setUser(user);
        return composer;
    }
    ```
  </Tab>
</Tabs>

## Actions and Events

### Callback Methods

#### `setOnSendButtonClick`

Fires when the send button is tapped. Primary hook — override to intercept or replace the default message-sending logic.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    messageComposer.setOnSendButtonClick(object : CometChatMessageComposer.SendButtonClick {
        override fun onClick(context: Context, baseMessage: BaseMessage) {
            Toast.makeText(context, "OnSendButtonClicked ..", Toast.LENGTH_SHORT).show()
        }
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    messageComposer.setOnSendButtonClick(new CometChatMessageComposer.SendButtonClick() {
        @Override
        public void onClick(Context context, BaseMessage baseMessage) {
            Toast.makeText(context, "OnSendButtonClicked ..", Toast.LENGTH_SHORT).show();
        }
    });
    ```
  </Tab>
</Tabs>

> **What this does:** Replaces the default send-button behavior. When a user taps the send button, your custom lambda executes instead of the built-in message sending logic.

#### `setOnError`

Fires on internal errors (network failure, auth issue, SDK exception).

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    messageComposer.setOnError(object : OnError {
        override fun onError(context: Context, e: CometChatException) {
            // Your Exception Handling code.
        }
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    messageComposer.setOnError(new OnError() {
        @Override
        public void onError(Context context, CometChatException e) {
            //Your Exception Handling code.
        }
    });
    ```
  </Tab>
</Tabs>

> **What this does:** Registers an error listener. If the component encounters an error, your callback receives the `CometChatException`.

#### `setOnTextChangedListener`

Fires whenever the message input's text value changes, enabling dynamic text handling.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin YourActivity.kt lines theme={null}
    messageComposer.setOnTextChangedListener(object : CometChatTextWatcher() {
        override fun onTextChanged(charSequence: CharSequence, start: Int, before: Int, count: Int) {
        }

        override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {
        }

        override fun afterTextChanged(editable: Editable) {
        }
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java YourActivity.java lines theme={null}
    messageComposer.setOnTextChangedListener(new CometChatTextWatcher() {
        @Override
        public void onTextChanged(CharSequence charSequence, int start, int before, int count) {

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void afterTextChanged(Editable editable) {

        }
    });
    ```
  </Tab>
</Tabs>

> **What this does:** Registers a `CometChatTextWatcher` that fires callbacks when the text in the composer input field changes. Use `onTextChanged` for real-time character tracking, `beforeTextChanged` for pre-change state, and `afterTextChanged` for post-change processing.

* **Verify**: After setting an action callback, trigger the corresponding user interaction (tap send, type text) and confirm your custom logic executes instead of the default behavior.

### Global UI Events (CometChatMessageEvents)

The MessageComposer component does not emit any events of its own. However, message-related events can be observed via `CometChatMessageEvents` from other components in the messaging flow.

### SDK Events

The MessageComposer component does not attach SDK listeners directly. Typing indicators are managed internally when `disableTypingEvents` is `false` (default).

## Functionality

Small functional customizations such as toggling visibility of UI elements and configuring composer behavior.

| Method                                       | Type      | Default        | Description                                                               |
| -------------------------------------------- | --------- | -------------- | ------------------------------------------------------------------------- |
| `setAttachmentButtonVisibility`              | `int`     | `View.VISIBLE` | Toggles visibility for the attachment button                              |
| `setVoiceNoteButtonVisibility`               | `int`     | `View.VISIBLE` | Toggles visibility for the voice note recording button                    |
| `setSendButtonVisibility`                    | `int`     | `View.VISIBLE` | Toggles visibility for the send button                                    |
| `setStickersButtonVisibility`                | `int`     | `View.VISIBLE` | Toggles visibility for the stickers button                                |
| `setAuxiliaryButtonVisibility`               | `int`     | `View.VISIBLE` | Toggles visibility for the auxiliary button area (AI, stickers)           |
| `setImageAttachmentOptionVisibility`         | `int`     | `View.VISIBLE` | Controls whether image attachments are allowed                            |
| `setCameraAttachmentOptionVisibility`        | `int`     | `View.VISIBLE` | Controls whether camera attachments are allowed                           |
| `setVideoAttachmentOptionVisibility`         | `int`     | `View.VISIBLE` | Controls whether video attachments are allowed                            |
| `setAudioAttachmentOptionVisibility`         | `int`     | `View.VISIBLE` | Controls whether audio attachments are allowed                            |
| `setFileAttachmentOptionVisibility`          | `int`     | `View.VISIBLE` | Controls whether file attachments are allowed                             |
| `setPollAttachmentOptionVisibility`          | `int`     | `View.VISIBLE` | Controls whether polls can be shared                                      |
| `setCollaborativeDocumentOptionVisibility`   | `int`     | `View.VISIBLE` | Controls whether collaborative documents can be shared                    |
| `setCollaborativeWhiteboardOptionVisibility` | `int`     | `View.VISIBLE` | Controls whether collaborative whiteboards can be shared                  |
| `disableTypingEvents`                        | `boolean` | `false`        | Disables or enables typing indicator events                               |
| `disableSoundForMessages`                    | `boolean` | `false`        | Toggles sound for outgoing messages                                       |
| `setDisableMentions`                         | `boolean` | `false`        | Disables mentions in text; removes `CometChatMentionsFormatter` instances |
| `setMaxLine`                                 | `int`     | SDK default    | Maximum lines allowed in the input field                                  |
| `setPlaceHolderText`                         | `String`  | SDK default    | Sets the placeholder text in the message input field                      |

* **Verify**: After calling a visibility method, confirm the corresponding UI element is shown or hidden.

## Custom View Slots

Each slot replaces a section of the default composer UI.

| Slot                 | Method                                                        | Replaces                              |
| -------------------- | ------------------------------------------------------------- | ------------------------------------- |
| Header view          | `setHeaderView(View)`                                         | Custom view above the text input area |
| Footer view          | `setFooterView(View)`                                         | Custom view below the text input area |
| Send button          | `setSendButtonView(View)`                                     | Default send button                   |
| Auxiliary button     | `setAuxiliaryButtonView(View)`                                | Auxiliary button area (stickers, AI)  |
| Attachment options   | `setAttachmentOptions(List<CometChatMessageComposerAction>)`  | Default attachment options            |
| AI options           | `setAIOptions(Function4)`                                     | Default AI options                    |
| Text formatters      | `setTextFormatters(List<CometChatTextFormatter>)`             | Default text formatters               |
| Suggestion list item | `setSuggestionListItemView(SuggestionListViewHolderListener)` | Default suggestion list item view     |

### `setHeaderView`

Sets a custom view above the text input area.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val view: View = LayoutInflater.from(context).inflate(R.layout.custom_header_layout, null)
    cometChatMessageComposer.setHeaderView(view)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    View view = getLayoutInflater().inflate(R.layout.custom_header_layout, null);
    cometChatMessageComposer.setHeaderView(view);
    ```
  </Tab>
</Tabs>

> **What this does:** Sets a custom `View` as the header of the composer. The header view renders above the text input area.

Example with a "Notes" card header:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/F1NBmCh5qoHS2CIE/images/dbb04a8b-message_composer_header_view-11ddf1d50aa74a8868351007037451f9.png?fit=max&auto=format&n=F1NBmCh5qoHS2CIE&q=85&s=04e974e788e0ff75b445788630d7d2a4" width="1280" height="240" data-path="images/dbb04a8b-message_composer_header_view-11ddf1d50aa74a8868351007037451f9.png" />
</Frame>

Create a `custom_header_layout.xml` layout:

```xml custom_header_layout.xml lines theme={null}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/cometchat_10dp"
        android:layout_marginTop="@dimen/cometchat_margin_1"
        android:layout_marginEnd="@dimen/cometchat_10dp"
        android:layout_marginBottom="@dimen/cometchat_margin_1"
        android:elevation="0dp"
        app:cardBackgroundColor="#EDEAFA"
        app:cardCornerRadius="@dimen/cometchat_10dp"
        app:cardElevation="0dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/cometchat_padding_3"
            android:layout_marginTop="@dimen/cometchat_padding_1"
            android:layout_marginEnd="@dimen/cometchat_padding_3"
            android:layout_marginBottom="@dimen/cometchat_padding_1"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="20dp"
                android:layout_height="@dimen/cometchat_20dp"
                android:src="@drawable/ic_calls"
                app:tint="?attr/cometchatPrimaryColor" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/cometchat_margin_1"
                android:text="Notes"
                android:textAppearance="?attr/cometchatTextAppearanceBodyRegular"
                android:textColor="?attr/cometchatTextColorPrimary" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

</LinearLayout>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val view: View = LayoutInflater.from(context).inflate(R.layout.custom_header_layout, null)
    cometChatMessageComposer.setHeaderView(view)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    View view = getLayoutInflater().inflate(R.layout.custom_header_layout, null);
    cometChatMessageComposer.setHeaderView(view);
    ```
  </Tab>
</Tabs>

### `setFooterView`

Sets a custom view below the text input area.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setFooterView(view)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setFooterView(view);
    ```
  </Tab>
</Tabs>

> **What this does:** Sets a custom `View` as the footer of the composer. The footer view renders below the text input area.

### `setSendButtonView`

Replaces the default send button with a custom view.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setSendButtonView(view)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setSendButtonView(view);
    ```
  </Tab>
</Tabs>

> **What this does:** Replaces the default send button with your custom `View`. The custom view takes over the send button position in the composer.

Custom send button example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/MoukXfOA8-IbkyPZ/images/3a7932a2-message_composer_send_button_view-f2e27a65301a5ced00e5854fa3b4ee6f.png?fit=max&auto=format&n=MoukXfOA8-IbkyPZ&q=85&s=46374b8539d8eb0386fc55836c156b95" width="1280" height="240" data-path="images/3a7932a2-message_composer_send_button_view-f2e27a65301a5ced00e5854fa3b4ee6f.png" />
</Frame>

First, create a custom send button drawable:

```xml drawable/custom_send_button.xml lines theme={null}
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
  <path
      android:pathData="M4,0L28,0A4,4 0,0 1,32 4L32,28A4,4 0,0 1,28 32L4,32A4,4 0,0 1,0 28L0,4A4,4 0,0 1,4 0z"
      android:fillColor="#EDEAFA"/>
  <path
      android:pathData="M16.977,24.922C16.612,24.922 16.349,24.792 16.188,24.531C16.026,24.271 15.888,23.945 15.773,23.555L14.531,19.43C14.458,19.169 14.432,18.961 14.453,18.805C14.474,18.643 14.56,18.482 14.711,18.32L22.688,9.719C22.734,9.672 22.758,9.62 22.758,9.563C22.758,9.505 22.737,9.458 22.695,9.422C22.654,9.385 22.604,9.367 22.547,9.367C22.495,9.362 22.445,9.383 22.398,9.43L13.828,17.438C13.656,17.594 13.49,17.682 13.328,17.703C13.167,17.719 12.961,17.688 12.711,17.609L8.492,16.328C8.117,16.213 7.807,16.078 7.563,15.922C7.318,15.76 7.195,15.5 7.195,15.141C7.195,14.859 7.307,14.617 7.531,14.414C7.755,14.211 8.031,14.047 8.359,13.922L21.797,8.773C21.979,8.706 22.148,8.654 22.305,8.617C22.466,8.576 22.612,8.555 22.742,8.555C22.997,8.555 23.198,8.628 23.344,8.773C23.49,8.919 23.563,9.12 23.563,9.375C23.563,9.51 23.542,9.656 23.5,9.813C23.463,9.969 23.412,10.138 23.344,10.32L18.227,23.688C18.081,24.063 17.906,24.362 17.703,24.586C17.5,24.81 17.258,24.922 16.977,24.922Z"
      android:fillColor="#6852D6"/>
</vector>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val imageView = ImageView(this)
    imageView.setImageResource(R.drawable.custom_send_button)
    imageView.setOnClickListener {
        Toast
            .makeText(this@YourActivity, "Custom Send Button Clicked !!!", Toast.LENGTH_SHORT)
            .show()
    }
    cometChatMessageComposer.setSendButtonView(imageView)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    ImageView imageView = new ImageView(this);
    imageView.setImageResource(R.drawable.custom_send_button);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Toast.makeText(YourActivity.this, "Custom Send Button Clicked !!!", Toast.LENGTH_SHORT).show();
        }
    });
    cometChatMessageComposer.setSendButtonView(imageView);
    ```
  </Tab>
</Tabs>

### `setAuxiliaryButtonView`

Replaces the auxiliary button area. The default auxiliary area provides sticker and AI functionality.

<Note>
  The MessageComposer uses the AuxiliaryButton for sticker functionality. If you override it with `setAuxiliaryButtonView()`, retrieve the default auxiliary buttons via `CometChatUIKit.getDataSource().getAuxiliaryOption()` and include them in your custom layout to preserve sticker/AI buttons.
</Note>

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setAuxiliaryButtonView(view)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setAuxiliaryButtonView(view);
    ```
  </Tab>
</Tabs>

Custom SOS button example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/eLHw5QGTFIHJKVut/images/673c7c47-message_composer_auxiliary_button_view-d7be5a9bcabce2d9260e8338658c8fc7.png?fit=max&auto=format&n=eLHw5QGTFIHJKVut&q=85&s=e88e96747dbb77c9e644df8d5e80df13" width="1280" height="240" data-path="images/673c7c47-message_composer_auxiliary_button_view-d7be5a9bcabce2d9260e8338658c8fc7.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val imageView = ImageView(this)
    imageView.setImageResource(android.R.drawable.save_icon)
    val linearLayout = LinearLayout(this)
    linearLayout.orientation = LinearLayout.HORIZONTAL

    // code to get default auxiliary buttons
    val view = CometChatUIKit
                .getDataSource()
                .getAuxiliaryOption(
                    this,
                    user,
                    group,
                    binding.messageComposer.composerViewModel.getIdMap(),
                    binding.messageComposer.additionParameter
                )

    linearLayout.addView(view)
    linearLayout.addView(imageView)
    cometChatMessageComposer.setAuxiliaryButtonView(linearLayout)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    ImageView imageView = new ImageView(this);
    imageView.setImageResource(R.drawable.save_icon);
    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.HORIZONTAL);
    // code to get default auxiliary buttons
    View view = CometChatUIKit
                .getDataSource()
                .getAuxiliaryOption(this,
                                    user,
                                    group,
                                    binding.messageComposer.getComposerViewModel().getIdMap(),
                                    binding.messageComposer.getAdditionParameter());

    linearLayout.addView(view);
    linearLayout.addView(imageView);
    cometChatMessageComposer.setAuxiliaryButtonView(linearLayout);
    ```
  </Tab>
</Tabs>

> **What this does:** Creates a horizontal `LinearLayout` containing the default auxiliary buttons (retrieved via `CometChatUIKit.getDataSource().getAuxiliaryOption()`) and a custom `ImageView`. The combined layout replaces the default auxiliary button area, preserving the existing sticker/AI buttons while adding a custom button.

### `setAttachmentOptions`

Replaces the default attachment options with a custom list of `CometChatMessageComposerAction` objects.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setAttachmentOptions(actionList)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setAttachmentOptions(actionList);
    ```
  </Tab>
</Tabs>

Custom attachment options example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/E5DbhavBfTmsHVE7/images/927b388b-message_composer_attachment_options-7fab1d4e46f7ec14b998d555d3d26968.png?fit=max&auto=format&n=E5DbhavBfTmsHVE7&q=85&s=3613b1068c0636f5475e845a3e57d5c0" width="1280" height="935" data-path="images/927b388b-message_composer_attachment_options-7fab1d4e46f7ec14b998d555d3d26968.png" />
</Frame>

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val actionList = ArrayList<CometChatMessageComposerAction>()

    val action1 = CometChatMessageComposerAction()
    action1.title = "Custom Option 1"
    action1.icon = R.drawable.ic_cp_1
    action1.onClick = {
        Toast.makeText(context, "Custom Option 1 !!!", Toast.LENGTH_SHORT).show()
    }
    actionList.add(action1)

    val action2 = CometChatMessageComposerAction()
    action2.title = "Custom Option 2"
    action2.icon = R.drawable.ic_cp_2
    action2.onClick = {
        Toast.makeText(context, "Custom Option 2 !!!", Toast.LENGTH_SHORT).show()
    }
    actionList.add(action2)

    val action3 = CometChatMessageComposerAction()
    action3.title = "Custom Option 3"
    action3.icon = R.drawable.ic_cp_3
    action3.onClick = {
        Toast.makeText(context, "Custom Option 3 !!!", Toast.LENGTH_SHORT).show()
    }
    actionList.add(action3)

    val action4 = CometChatMessageComposerAction()
    action4.title = "Custom Option 4"
    action4.icon = R.drawable.ic_cp_4
    action4.onClick = {
        Toast.makeText(context, "Custom Option 4 !!!", Toast.LENGTH_SHORT).show()
    }
    actionList.add(action4)

    cometChatMessageComposer.setAttachmentOptions(actionList)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    List<CometChatMessageComposerAction> actionList = new ArrayList<>();

    CometChatMessageComposerAction action1 = new CometChatMessageComposerAction();
    action1.setTitle("Custom Option 1");
    action1.setIcon(R.drawable.ic_cp_1);
    action1.setOnClick(new OnClick() {
        @Override
        public void onClick() {
            Toast.makeText(context, "Custom Option 1 !!!", Toast.LENGTH_SHORT).show();
        }
    });
    actionList.add(action1);

    CometChatMessageComposerAction action2 = new CometChatMessageComposerAction();
    action2.setTitle("Custom Option 2");
    action2.setIcon(R.drawable.ic_cp_2);
    action2.setOnClick(new OnClick() {
        @Override
        public void onClick() {
            Toast.makeText(context, "Custom Option 2 !!!", Toast.LENGTH_SHORT).show();
        }
    });
    actionList.add(action2);

    CometChatMessageComposerAction action3 = new CometChatMessageComposerAction();
    action3.setTitle("Custom Option 3");
    action3.setIcon(R.drawable.ic_cp_3);
    action3.setOnClick(new OnClick() {
        @Override
        public void onClick() {
            Toast.makeText(context, "Custom Option 3 !!!", Toast.LENGTH_SHORT).show();
        }
    });
    actionList.add(action3);

    CometChatMessageComposerAction action4 = new CometChatMessageComposerAction();
    action4.setTitle("Custom Option 4");
    action4.setIcon(R.drawable.ic_cp_4);
    action4.setOnClick(new OnClick() {
        @Override
        public void onClick() {
            Toast.makeText(context, "Custom Option 4 !!!", Toast.LENGTH_SHORT).show();
        }
    });
    actionList.add(action4);

    cometChatMessageComposer.setAttachmentOptions(actionList);
    ```
  </Tab>
</Tabs>

> **What this does:** Creates four custom `CometChatMessageComposerAction` objects, each with a title, icon, and click handler. The list replaces the default attachment options (camera, image, video, audio, file, poll, etc.) with these four custom actions.

### `setAIOptions`

Replaces the default AI options with a custom provider function.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setAIOptions { context, user, group, idMap ->
        val actionList = ArrayList<CometChatMessageComposerAction>()
        // Build custom AI actions
        actionList
    }
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setAIOptions((context, user, group, idMap) -> {
        List<CometChatMessageComposerAction> actionList = new ArrayList<>();
        // Build custom AI actions
        return actionList;
    });
    ```
  </Tab>
</Tabs>

> **What this does:** Registers a function that returns a list of `CometChatMessageComposerAction` objects for the AI options sheet. The function receives the current context, user, group, and ID map.

### `setTextFormatters`

Assigns a list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/android/mentions-formatter-guide).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/lojUhXqO8ysHzRtp/images/b2f00911-mentions_message_composer-b1d1dd7961bc3c2953e7439bb516200b.png?fit=max&auto=format&n=lojUhXqO8ysHzRtp&q=85&s=318e5339a05abb841e47ec66bfb025ec" width="1280" height="800" data-path="images/b2f00911-mentions_message_composer-b1d1dd7961bc3c2953e7439bb516200b.png" />
</Frame>

```xml themes.xml lines theme={null}
<style name="CustomMessageComposerMentionsStyle" parent="CometChatMessageComposerMentionsStyle">
    <item name="cometchatMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
    <item name="cometchatMentionTextColor">#000000</item>
    <item name="cometchatMentionBackgroundColor">#000000</item>
    <item name="cometchatSelfMentionTextColor">#30A46C</item>
    <item name="cometchatSelfMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
    <item name="cometchatSelfMentionBackgroundColor">#30A46C</item>
</style>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    // Initialize CometChatMentionsFormatter
    val mentionFormatter = CometChatMentionsFormatter(context)
    // set style to customize composer mention text
    mentionFormatter.setMessageComposerMentionTextStyle(context, R.style.CustomMessageComposerMentionsStyle)

    // This can be passed as an array of formatter in CometChatMessageComposer by using setTextFormatters method.
    val textFormatters: MutableList<CometChatTextFormatter> = ArrayList()
    textFormatters.add(mentionFormatter)
    messageComposer.setTextFormatters(textFormatters)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    // Initialize CometChatMentionsFormatter
    CometChatMentionsFormatter mentionFormatter = new CometChatMentionsFormatter(context);

    // set style to customize composer mention text
    mentionFormatter.setMessageComposerMentionTextStyle(context, R.style.CustomMessageComposerMentionsStyle);

    // This can be passed as an array of formatter in CometChatMessageComposer by using setTextFormatters method.
    List<CometChatTextFormatter> textFormatters = new ArrayList<>();
    textFormatters.add(mentionFormatter);
    messageComposer.setTextFormatters(textFormatters);
    ```
  </Tab>
</Tabs>

> **What this does:** Creates a `CometChatMentionsFormatter`, applies the custom mentions style to it, adds it to a list of text formatters, and sets that list on the `CometChatMessageComposer`. Mentions in the composer input will render with the custom colors and text appearance.

### `setSuggestionListItemView`

Replaces the default suggestion list item view with a custom view holder listener.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    messageComposer.setSuggestionListItemView(suggestionListViewHolderListener)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    messageComposer.setSuggestionListItemView(suggestionListViewHolderListener);
    ```
  </Tab>
</Tabs>

> **What this does:** Registers a `SuggestionListViewHolderListener` that provides a custom view for each item in the suggestion list (e.g., mentions dropdown).

* **Verify**: After setting any custom view slot, confirm the custom view renders in the correct position within the composer, and the data binding populates correctly.

## Common Patterns

### Text-only composer

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setAttachmentButtonVisibility(View.GONE)
    cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE)
    cometChatMessageComposer.setAuxiliaryButtonVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setAttachmentButtonVisibility(View.GONE);
    cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE);
    cometChatMessageComposer.setAuxiliaryButtonVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

### Custom attachment options only

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setImageAttachmentOptionVisibility(View.GONE)
    cometChatMessageComposer.setVideoAttachmentOptionVisibility(View.GONE)
    cometChatMessageComposer.setAudioAttachmentOptionVisibility(View.GONE)
    cometChatMessageComposer.setCameraAttachmentOptionVisibility(View.GONE)
    cometChatMessageComposer.setPollAttachmentOptionVisibility(View.GONE)
    cometChatMessageComposer.setCollaborativeDocumentOptionVisibility(View.GONE)
    cometChatMessageComposer.setCollaborativeWhiteboardOptionVisibility(View.GONE)
    // Only file attachments remain
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setImageAttachmentOptionVisibility(View.GONE);
    cometChatMessageComposer.setVideoAttachmentOptionVisibility(View.GONE);
    cometChatMessageComposer.setAudioAttachmentOptionVisibility(View.GONE);
    cometChatMessageComposer.setCameraAttachmentOptionVisibility(View.GONE);
    cometChatMessageComposer.setPollAttachmentOptionVisibility(View.GONE);
    cometChatMessageComposer.setCollaborativeDocumentOptionVisibility(View.GONE);
    cometChatMessageComposer.setCollaborativeWhiteboardOptionVisibility(View.GONE);
    // Only file attachments remain
    ```
  </Tab>
</Tabs>

### Disable voice recording

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

### Prefilled composer with disabled typing events

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setInitialComposerText("Hello!")
    cometChatMessageComposer.disableTypingEvents(true)
    cometChatMessageComposer.disableSoundForMessages(true)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setInitialComposerText("Hello!");
    cometChatMessageComposer.disableTypingEvents(true);
    cometChatMessageComposer.disableSoundForMessages(true);
    ```
  </Tab>
</Tabs>

## Advanced Methods

### `setUser` / `setGroup`

Associates the composer with a specific conversation. Use `setUser` for one-on-one and `setGroup` for group conversations.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    // One-on-one conversation
    cometChatMessageComposer.setUser(user)

    // Group conversation
    cometChatMessageComposer.setGroup(group)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    // One-on-one conversation
    cometChatMessageComposer.setUser(user);

    // Group conversation
    cometChatMessageComposer.setGroup(group);
    ```
  </Tab>
</Tabs>

### `setParentMessageId`

Sets the parent message ID for threaded replies. When set, messages sent from the composer are sent as replies to the specified parent message.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setParentMessageId(parentMessage.id)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setParentMessageId(parentMessage.getId());
    ```
  </Tab>
</Tabs>

### `setInitialComposerText`

Sets predefined text in the composer input field.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setInitialComposerText("Your_Text")
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setInitialComposerText("Your_Text");
    ```
  </Tab>
</Tabs>

### `getText` / `getProcessedText`

Returns the current text from the composer. `getText` returns the raw text, while `getProcessedText` returns text with formatting (mentions, etc.) applied.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    val rawText = cometChatMessageComposer.text
    val processedText = cometChatMessageComposer.processedText
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    String rawText = cometChatMessageComposer.getText();
    String processedText = cometChatMessageComposer.getProcessedText();
    ```
  </Tab>
</Tabs>

### Internal Access

These methods provide direct access to internal components for advanced use cases.

| Method                   | Returns                    | Description                            |
| ------------------------ | -------------------------- | -------------------------------------- |
| `getComposerViewModel()` | `MessageComposerViewModel` | The ViewModel managing composer state  |
| `getMessageInput()`      | `CometChatMessageInput`    | The internal message input component   |
| `getView()`              | `LinearLayout`             | The root view of the composer          |
| `getAdditionParameter()` | `AdditionParameter`        | Additional parameters for the composer |
| `getUser()`              | `User`                     | The currently set user                 |
| `getGroup()`             | `Group`                    | The currently set group                |

> Use these only when the standard API is insufficient. Directly manipulating the ViewModel or internal views may conflict with the component's internal state management.

## Style

The component uses XML theme styles. Define a custom style with parent `CometChatMessageComposerStyle` in `themes.xml`, then apply with `setStyle()`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/GQCy4V9W9Tf76kX8/images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png?fit=max&auto=format&n=GQCy4V9W9Tf76kX8&q=85&s=01b95c344964ad43ba97a4dc9d1eac93" width="1280" height="232" data-path="images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png" />
</Frame>

First, create a custom send button drawable:

```html lines theme={null}
<!-- active send button drawable -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
    <path
        android:fillColor="#F76808"
        android:pathData="M16,0L16,0A16,16 0,0 1,32 16L32,16A16,16 0,0 1,16 32L16,32A16,16 0,0 1,0 16L0,16A16,16 0,0 1,16 0z" />
    <group>
        <clip-path android:pathData="M4,4h24v24h-24z" />
        <path
            android:fillColor="?attr/cometchatColorWhite"
            android:pathData="M10.767,22.723C10.465,22.843 10.178,22.818 9.907,22.646C9.636,22.474 9.5,22.223 9.5,21.894V17.673L16.423,16L9.5,14.327V10.106C9.5,9.777 9.636,9.526 9.907,9.354C10.178,9.182 10.465,9.157 10.767,9.277L24.723,15.161C25.095,15.328 25.281,15.608 25.281,16.002C25.281,16.395 25.095,16.674 24.723,16.838L10.767,22.723Z" />
    </group>
</vector>
```

Then define the custom style in `themes.xml`:

```xml themes.xml lines theme={null}
    <style name="CustomMessageComposerStyle" parent="CometChatMessageComposerStyle">
        <item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>
        <item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>
        <item name="cometchatMessageComposerActiveStickerIconTint">#F76808</item>
        <item name="cometchatMessageComposerInactiveStickerIconTint">#F76808</item>
        <item name="cometchatMessageComposerAIIconTint">#F76808</item>
        <item name="cometchatMessageComposerActiveSendButtonDrawable">
            @drawable/active_send_button
        </item>
    </style>
```

<Tabs>
  <Tab title="Kotlin">
    ```kotlin lines theme={null}
    cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle)
    ```
  </Tab>

  <Tab title="Java">
    ```java lines theme={null}
    cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle);
    ```
  </Tab>
</Tabs>

To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_composer.xml).

### Programmatic Style Properties

In addition to XML theme styles, the component exposes programmatic setters for fine-grained control:

| Method                            | Type             | Description                                    |
| --------------------------------- | ---------------- | ---------------------------------------------- |
| `setBackgroundColor`              | `@ColorInt int`  | Background color of the component              |
| `setCornerRadius`                 | `int`            | Corner radius of the component                 |
| `setComposeBoxBackgroundColor`    | `@ColorInt int`  | Background color of the compose box            |
| `setComposeBoxStrokeWidth`        | `@Dimension int` | Stroke width of the compose box border         |
| `setComposeBoxStrokeColor`        | `@ColorInt int`  | Stroke color of the compose box border         |
| `setComposeBoxCornerRadius`       | `@Dimension int` | Corner radius of the compose box               |
| `setComposeBoxBackgroundDrawable` | `Drawable`       | Custom background drawable for the compose box |
| `setSeparatorColor`               | `@ColorInt int`  | Color of the separator line                    |
| `setAttachmentIcon`               | `Drawable`       | Custom attachment icon drawable                |
| `setAttachmentIconTint`           | `@ColorInt int`  | Tint color for the attachment icon             |
| `setVoiceRecordingIcon`           | `Drawable`       | Custom voice recording icon drawable           |
| `setVoiceRecordingIconTint`       | `@ColorInt int`  | Tint color for the voice recording icon        |
| `setAIIcon`                       | `Drawable`       | Custom AI icon drawable                        |
| `setAIIconTint`                   | `@ColorInt int`  | Tint color for the AI icon                     |
| `setActiveSendButtonDrawable`     | `Drawable`       | Drawable for the active send button            |
| `setInactiveSendButtonDrawable`   | `Drawable`       | Drawable for the inactive send button          |
| `setActiveStickerIcon`            | `Drawable`       | Drawable for the active sticker icon           |
| `setActiveStickerIconTint`        | `@ColorInt int`  | Tint for the active sticker icon               |
| `setInactiveStickerIcon`          | `Drawable`       | Drawable for the inactive sticker icon         |
| `setInactiveStickerIconTint`      | `@ColorInt int`  | Tint for the inactive sticker icon             |
| `setMessageInputStyle`            | `@StyleRes int`  | Style for the message input field              |
| `setMentionsStyle`                | `@StyleRes int`  | Style for mentions rendering                   |
| `setMediaRecorderStyle`           | `@StyleRes int`  | Style for the media recorder                   |
| `setSuggestionListStyle`          | `@StyleRes int`  | Style for the suggestion list                  |
| `setAttachmentOptionSheetStyle`   | `@StyleRes int`  | Style for the attachment option sheet          |
| `setAIOptionSheetStyle`           | `@StyleRes int`  | Style for the AI option sheet                  |

### Edit Preview Style Properties

When editing a message, a preview appears above the input. These properties control its appearance:

| Method                                | Type             | Description                                  |
| ------------------------------------- | ---------------- | -------------------------------------------- |
| `setEditPreviewTitleTextAppearance`   | `@StyleRes int`  | Text appearance for the edit preview title   |
| `setEditPreviewTitleTextColor`        | `@ColorInt int`  | Text color for the edit preview title        |
| `setEditPreviewMessageTextAppearance` | `@StyleRes int`  | Text appearance for the edit preview message |
| `setEditPreviewMessageTextColor`      | `@ColorInt int`  | Text color for the edit preview message      |
| `setEditPreviewBackgroundColor`       | `@ColorInt int`  | Background color for the edit preview        |
| `setEditPreviewCornerRadius`          | `@Dimension int` | Corner radius for the edit preview           |
| `setEditPreviewStrokeColor`           | `@ColorInt int`  | Stroke color for the edit preview            |
| `setEditPreviewStrokeWidth`           | `@Dimension int` | Stroke width for the edit preview            |
| `setEditPreviewCloseIcon`             | `Drawable`       | Close icon for the edit preview              |
| `setEditPreviewCloseIconTint`         | `@ColorInt int`  | Tint for the edit preview close icon         |

## Customization Matrix

| What to change                  | Where             | Property/API                                             | Example                                                                                             |
| ------------------------------- | ----------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Override send button behavior   | Activity/Fragment | `setOnSendButtonClick`                                   | `setOnSendButtonClick(sendButtonClick)`                                                             |
| Listen for text changes         | Activity/Fragment | `setOnTextChangedListener`                               | `setOnTextChangedListener(textWatcher)`                                                             |
| Handle errors                   | Activity/Fragment | `setOnError`                                             | `setOnError(onError)`                                                                               |
| Target user                     | Activity/Fragment | `setUser(User)`                                          | `.setUser(user)`                                                                                    |
| Target group                    | Activity/Fragment | `setGroup(Group)`                                        | `.setGroup(group)`                                                                                  |
| Thread replies                  | Activity/Fragment | `setParentMessageId(long)`                               | `.setParentMessageId(parentMessage.getId())`                                                        |
| Attachment button visibility    | Activity/Fragment | `setAttachmentButtonVisibility(int)`                     | `.setAttachmentButtonVisibility(View.GONE)`                                                         |
| Voice note button visibility    | Activity/Fragment | `setVoiceNoteButtonVisibility(int)`                      | `.setVoiceNoteButtonVisibility(View.GONE)`                                                          |
| Send button visibility          | Activity/Fragment | `setSendButtonVisibility(int)`                           | `.setSendButtonVisibility(View.GONE)`                                                               |
| Stickers button visibility      | Activity/Fragment | `setStickersButtonVisibility(int)`                       | `.setStickersButtonVisibility(View.GONE)`                                                           |
| Auxiliary button visibility     | Activity/Fragment | `setAuxiliaryButtonVisibility(int)`                      | `.setAuxiliaryButtonVisibility(View.GONE)`                                                          |
| Image attachment option         | Activity/Fragment | `setImageAttachmentOptionVisibility(int)`                | `.setImageAttachmentOptionVisibility(View.GONE)`                                                    |
| Camera attachment option        | Activity/Fragment | `setCameraAttachmentOptionVisibility(int)`               | `.setCameraAttachmentOptionVisibility(View.GONE)`                                                   |
| Video attachment option         | Activity/Fragment | `setVideoAttachmentOptionVisibility(int)`                | `.setVideoAttachmentOptionVisibility(View.GONE)`                                                    |
| Audio attachment option         | Activity/Fragment | `setAudioAttachmentOptionVisibility(int)`                | `.setAudioAttachmentOptionVisibility(View.GONE)`                                                    |
| File attachment option          | Activity/Fragment | `setFileAttachmentOptionVisibility(int)`                 | `.setFileAttachmentOptionVisibility(View.GONE)`                                                     |
| Poll attachment option          | Activity/Fragment | `setPollAttachmentOptionVisibility(int)`                 | `.setPollAttachmentOptionVisibility(View.GONE)`                                                     |
| Collaborative document option   | Activity/Fragment | `setCollaborativeDocumentOptionVisibility(int)`          | `.setCollaborativeDocumentOptionVisibility(View.GONE)`                                              |
| Collaborative whiteboard option | Activity/Fragment | `setCollaborativeWhiteboardOptionVisibility(int)`        | `.setCollaborativeWhiteboardOptionVisibility(View.GONE)`                                            |
| Typing events                   | Activity/Fragment | `disableTypingEvents(boolean)`                           | `.disableTypingEvents(true)`                                                                        |
| Outgoing message sound          | Activity/Fragment | `disableSoundForMessages(boolean)`                       | `.disableSoundForMessages(true)`                                                                    |
| Custom outgoing message sound   | Activity/Fragment | `setCustomSoundForMessages(int)`                         | `.setCustomSoundForMessages(R.raw.custom_sound)`                                                    |
| Predefined text                 | Activity/Fragment | `setInitialComposerText(String)`                         | `.setInitialComposerText("Hello!")`                                                                 |
| Max input lines                 | Activity/Fragment | `setMaxLine(int)`                                        | `.setMaxLine(5)`                                                                                    |
| Placeholder text                | Activity/Fragment | `setPlaceHolderText(String)`                             | `.setPlaceHolderText("Type a message...")`                                                          |
| Disable mentions                | Activity/Fragment | `setDisableMentions(boolean)`                            | `.setDisableMentions(true)`                                                                         |
| Auxiliary button alignment      | Activity/Fragment | `setAuxiliaryButtonAlignment(AuxiliaryButtonsAlignment)` | `.setAuxiliaryButtonAlignment(alignment)`                                                           |
| Header view                     | Activity/Fragment | `setHeaderView(View)`                                    | See `setHeaderView` code above                                                                      |
| Footer view                     | Activity/Fragment | `setFooterView(View)`                                    | See `setFooterView` code above                                                                      |
| Send button view                | Activity/Fragment | `setSendButtonView(View)`                                | See `setSendButtonView` code above                                                                  |
| Auxiliary button view           | Activity/Fragment | `setAuxiliaryButtonView(View)`                           | See `setAuxiliaryButtonView` code above                                                             |
| Attachment options (replace)    | Activity/Fragment | `setAttachmentOptions(List)`                             | See `setAttachmentOptions` code above                                                               |
| AI options (replace)            | Activity/Fragment | `setAIOptions(Function4)`                                | See `setAIOptions` code above                                                                       |
| Text formatters                 | Activity/Fragment | `setTextFormatters(List)`                                | See `setTextFormatters` code above                                                                  |
| Suggestion list item view       | Activity/Fragment | `setSuggestionListItemView(listener)`                    | See `setSuggestionListItemView` code above                                                          |
| Attachment icon tint            | `themes.xml`      | `cometchatMessageComposerAttachmentIconTint`             | `<item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>`                            |
| Voice recording icon tint       | `themes.xml`      | `cometchatMessageComposerVoiceRecordingIconTint`         | `<item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>`                        |
| Active sticker icon tint        | `themes.xml`      | `cometchatMessageComposerActiveStickerIconTint`          | `<item name="cometchatMessageComposerActiveStickerIconTint">#F76808</item>`                         |
| Inactive sticker icon tint      | `themes.xml`      | `cometchatMessageComposerInactiveStickerIconTint`        | `<item name="cometchatMessageComposerInactiveStickerIconTint">#F76808</item>`                       |
| AI icon tint                    | `themes.xml`      | `cometchatMessageComposerAIIconTint`                     | `<item name="cometchatMessageComposerAIIconTint">#F76808</item>`                                    |
| Active send button drawable     | `themes.xml`      | `cometchatMessageComposerActiveSendButtonDrawable`       | `<item name="cometchatMessageComposerActiveSendButtonDrawable">@drawable/active_send_button</item>` |
| Apply a custom style            | Activity/Fragment | `setStyle(int styleRes)`                                 | `cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle);`                            |
| Mentions text style             | `themes.xml`      | `CometChatMessageComposerMentionsStyle`                  | `<item name="cometchatMentionTextColor">#000000</item>`                                             |
| Compose box background          | Activity/Fragment | `setComposeBoxBackgroundColor(int)`                      | `.setComposeBoxBackgroundColor(Color.WHITE)`                                                        |
| Compose box stroke              | Activity/Fragment | `setComposeBoxStrokeColor(int)`                          | `.setComposeBoxStrokeColor(Color.GRAY)`                                                             |
| Separator color                 | Activity/Fragment | `setSeparatorColor(int)`                                 | `.setSeparatorColor(Color.LTGRAY)`                                                                  |
| Edit preview style              | Activity/Fragment | `setEditPreview*` methods                                | See Style section above                                                                             |

## Next Steps

<CardGroup cols={2}>
  <Card title="Message Header" icon="heading" href="/ui-kit/android/message-header">
    Display user/group info in the toolbar
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/android/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/android/conversations">
    Browse recent conversations
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/android/theme-introduction">
    Customize colors, fonts, and styles
  </Card>
</CardGroup>