Message Composer - CometChat Docs

CometChatMessageComposer enables users to write and send a variety of messages, including text, image, video, and custom messages. It supports features such as live reactions, attachments, and message editing.

When to use this

You need a message input area where users can type and send text messages.
You want to support sending image, video, audio, and file attachments.
You need live reaction and sticker functionality in the composer.
You want to customize attachment options, send button, or auxiliary buttons.
You need text formatting support such as mentions in the composer.
You want to listen for text changes or override the send button behavior.

Prerequisites

CometChat SDK initialized with CometChatUIKit.init() and a user logged in.
The cometchat-chat-uikit-android dependency added to your project.
A valid layout XML file or Activity/Fragment where you will place the component.

Quick start

Open your layout XML file (e.g., layout_activity.xml).
Add the CometChatMessageComposer XML element:

layout_activity.xml

<com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer
                android:id="@+id/composer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

What this does: Adds the CometChatMessageComposer component to your layout. It fills the available width and wraps its height to fit the composer UI.

Build and run your app.
Verify that the message composer appears with a text input field, attachment button, and send button.

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.

Set the User or Group object on the composer so it knows which conversation to send messages to:

Java
Kotlin

messageComposer.setUser(user);

messageComposer.setUser(user)

What this does: Associates the composer with a specific User object so that messages are sent to that user’s conversation. If you are in a group conversation, use .setGroup(group) instead.

Core concepts

CometChatMessageComposer: The main component class that renders the message input area with send, attachment, and auxiliary buttons. Add it via XML layout.
Actions: Callbacks such as setOnSendButtonClick, setOnError, and setOnTextChangedListener that let you respond to user interactions in the composer.
Filters: The MessageComposer component does not have any available filters.
Events: The MessageComposer component does not emit any events of its own.
Style: XML theme styles (parent CometChatMessageComposerStyle) applied via setStyle() to customize colors, icons, and tints.
Functionality: Methods like setUser, setGroup, disableTypingEvents, setAttachmentButtonVisibility, and others that control composer behavior.
Advanced views: Methods like setTextFormatters, setAttachmentOptions, setAuxiliaryButtonView, setSendButtonView, and setHeaderView that let you replace default UI elements with custom layouts.

Implementation

Actions

What you’re changing: How the component responds to user interactions such as tapping the send button, encountering errors, and text input changes.

Where: Activity or Fragment where you hold a reference to CometChatMessageComposer (e.g., messageComposer).
Applies to: CometChatMessageComposer.
Default behavior: The send button sends the composed message. Errors are handled internally. Text changes are not externally observed.
Override: Call the corresponding setter method to replace the default behavior with your own logic.

`setOnSendButtonClick`

The OnSendButtonClick event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer EditText. You can override this action with the following code snippet.

Java
Kotlin

    messageComposer.setOnSendButtonClick(new CometChatMessageComposer.SendButtonClick() {
        @Override
        public void onClick(Context context, BaseMessage baseMessage) {
            Toast.makeText(context, "OnSendButtonClicked ..", Toast.LENGTH_SHORT).show();
        }
    });

    messageComposer.setOnSendButtonClick(object : CometChatMessageComposer.SendButtonClick {
    override fun onClick(context: Context, baseMessage: BaseMessage) {
        Toast.makeText(context, "OnSendButtonClicked ..", Toast.LENGTH_SHORT).show()
    }
    })

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`

This action does not change the behavior of the component but listens for any errors that occur in the MessageComposer component.

Java
Kotlin

YourActivity.java

messageComposer.setOnError(new OnError() {
    @Override
    public void onError(Context context, CometChatException e) {
        //Your Exception Handling code.
    }
});

YourActivity.kt

messageComposer.setOnError(object : OnError {
    override fun onError(context: Context, e: CometChatException) {
        // Your Exception Handling code.
    }
})

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

`setOnTextChangedListener`

Function triggered whenever the message input’s text value changes, enabling dynamic text handling.

Java
Kotlin

YourActivity.java

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) {

            }
        });

YourActivity.kt

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) {
            }
        })

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.

Filters

The MessageComposer component does not have any available filters.

Events

The MessageComposer component does not emit any events of its own.

Style

What you’re changing: The visual appearance of the MessageComposer component using XML theme styles.

Where: themes.xml for style definitions, and your Activity/Fragment for applying the style.
Applies to: CometChatMessageComposer.
Default behavior: The component uses the default CometChatMessageComposerStyle.
Override: Define a custom style with parent CometChatMessageComposerStyle in themes.xml, then call setStyle() on the component.

Code:

First, create a custom send button drawable:

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

What this does: Defines a custom vector drawable for the active send button with an orange circular background and a white send arrow icon.

Then define the custom style in themes.xml:

    <!-- themes.xml -->
    <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>

What this does: Defines a custom style that tints the attachment icon, voice recording icon, sticker icons, and AI icon to orange (#F76808), and replaces the active send button drawable with the custom vector defined above.

Apply the style to the component:

Java
Kotlin

cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle);

cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle)

What this does: Applies the CustomMessageComposerStyle theme to the CometChatMessageComposer component, changing the icon tints and send button appearance.

To know more such attributes, visit the attributes file.

Verify: The composer attachment icon, voice recording icon, sticker icons, and AI icon display in orange (#F76808), and the active send button shows the custom orange circular drawable.

Functionality

What you’re changing: Small functional customizations such as toggling visibility of UI elements, setting custom sounds, configuring typing events, and setting predefined text.

Where: Activity or Fragment where you hold a reference to CometChatMessageComposer.
Applies to: CometChatMessageComposer.
Default behavior: All UI elements are visible with default settings. Typing events are enabled. No predefined text is set.
Override: Call the corresponding method on the component instance.

Methods	Description	Code
`setUser`	Used to pass user object of which header specific details will be shown	`.setUser(user)`
`setGroup`	Used to pass group object of which header specific details will be shown	`.setGroup(Group)`
`disableTypingEvents`	Used to disable/enable typing events, default false	`.disableTypingEvents(boolean)`
`disableSoundForMessages`	Used to toggle sound for outgoing messages	`.disableSoundForMessages(boolean)`
`setInitialComposerText`	Used to set predefined text	`.setInitialComposerText("Your_Text")`
`setMaxLine`	Maximum lines allowed to increase in the input field	`.setMaxLine(int)`
`setAuxiliaryButtonAlignment`	Controls position of auxiliary button view, can be left or right. Default right	`.setAuxiliaryButtonAlignment(AuxiliaryButtonsAlignment)`
`setDisableMentions`	Sets whether mentions in text should be disabled. If set to true, it removes any formatters that are instances of `CometChatMentionsFormatter`	`.setDisableMentions(true);`
`setCustomSoundForMessages`	Used to give custom sounds to outgoing messages	`.setCustomSoundForMessages(String)`
`setAttachmentButtonVisibility`	Hides the attachment button in the composer	`.setAttachmentButtonVisibility(View.VISIBLE)`
`setStickersButtonVisibility`	Hides the stickers button in the composer	`.setStickersButtonVisibility(View.GONE)`
`setSendButtonVisibility`	Hides the send button in the composer	`.setSendButtonVisibility(View.VISIBLE)`
`setCameraAttachmentOptionVisibility`	Controls whether camera attachments are allowed	`.setCameraAttachmentOptionVisibility(View.VISIBLE)`
`setImageAttachmentOptionVisibility`	Controls whether image attachments are allowed	`.setImageAttachmentOptionVisibility(View.VISIBLE)`
`setVideoAttachmentOptionVisibility`	Controls whether video attachments are allowed	`.setVideoAttachmentOptionVisibility(View.VISIBLE)`
`setAudioAttachmentOptionVisibility`	Controls whether audio attachments are allowed	`.setAudioAttachmentOptionVisibility(View.VISIBLE)`
`setFileAttachmentOptionVisibility`	Controls whether file attachments are allowed	`.setFileAttachmentOptionVisibility(View.VISIBLE)`
`setPollAttachmentOptionVisibility`	Controls whether polls can be shared	`.setPollAttachmentOptionVisibility(View.VISIBLE)`
`setCollaborativeDocumentOptionVisibility`	Controls whether collaborative documents can be shared	`.setCollaborativeDocumentOptionVisibility(View.VISIBLE)`
`setCollaborativeWhiteboardOptionVisibility`	Controls whether collaborative whiteboards can be shared	`.setCollaborativeWhiteboardOptionVisibility(View.VISIBLE)`

Verify: After calling a visibility method, confirm the corresponding UI element is shown or hidden. After calling disableTypingEvents(true), confirm no typing indicators are sent. After calling setInitialComposerText("Your_Text"), confirm the text input field shows the predefined text.

Advanced views

What you’re changing: The default UI elements of the composer including text formatters, attachment options, auxiliary buttons, send button, and header view.

Where: Activity or Fragment where you hold a reference to CometChatMessageComposer.
Applies to: CometChatMessageComposer.
Default behavior: The component renders its built-in views for each part of the composer.
Override: Call the corresponding setter method and provide a custom view or callback.

`setTextFormatters`

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out CometChatMentionsFormatter.

themes.xml

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

What this does: Defines a custom mentions style with black text and background for regular mentions, and green (#30A46C) text and background for self-mentions, both using the body regular text appearance.

Java
Kotlin

// 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);

// 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)

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.

`setAttachmentOptions`

By using setAttachmentOptions(), you can set a list of custom CometChatMessageComposerAction for the MessageComposer component. This replaces the existing list of attachment options.

Java
Kotlin

cometChatMessageComposer.setAttachmentOptions()

cometChatMessageComposer.setAttachmentOptions()

What this does: Calls setAttachmentOptions() to replace the default attachment options. Pass a list of CometChatMessageComposerAction objects to define custom attachment actions.

In this example, the existing attachment options are overridden with four custom actions:

Java
Kotlin

    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);

    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 2 !!!", 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)

What this does: Creates four custom CometChatMessageComposerAction objects, each with a title, icon, and click handler that shows a toast. The list is passed to setAttachmentOptions(), replacing the default attachment options (camera, image, video, audio, file, poll, etc.) with these four custom actions.

`setAuxiliaryButtonView`

You can insert a custom view into the MessageComposer component to add additional functionality using this method. Note: The MessageComposer component uses the AuxiliaryButton to provide sticker functionality. If you override the AuxiliaryButton, it replaces the sticker functionality.

Java
Kotlin

 cometChatMessageComposer.setAuxiliaryButtonView()

 cometChatMessageComposer.setAuxiliaryButtonView()

What this does: Calls setAuxiliaryButtonView() to replace the default auxiliary button area. Pass a custom View to define your own auxiliary button content.

In this example, a custom SOS button with click functionality is added. A layout is created and inflated inside .setAuxiliaryButtonView():

Java
Kotlin

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);
inearLayout.addView(imageView);
cometChatMessageComposer.setAuxiliaryButtonView(linearLayout);

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)

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

`setSendButtonView`

You can set a custom view in place of the already existing send button view using this method.

Java
Kotlin

    cometChatMessageComposer.setSendButtonView(view);

    cometChatMessageComposer.setSendButtonView(view)

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

First, create a custom send button drawable:

drawable/custom_send_button.xml

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

What this does: Defines a custom vector drawable for the send button with a light purple rounded-rectangle background and a purple send arrow icon.

Then create an ImageView with the custom drawable and set it as the send button:

Java
Kotlin

        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);

        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)

What this does: Creates an ImageView with the custom send button drawable, attaches a click listener that shows a toast, and sets it as the send button view on the composer. The custom button replaces the default send button.

`setHeaderView`

You can set a custom header view to the MessageComposer component using this method. The header view appears above the text input area.

Java
Kotlin

cometChatMessageComposer.setHeaderView(view);

cometChatMessageComposer.setHeaderView(view);

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

In the following example, a mock smart reply view is applied to the MessageComposer component using .setHeaderView():

custom_header_layout

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

What this does: Defines a custom header layout with a MaterialCardView containing an icon and “Notes” text label. The card has a light purple background (#EDEAFA) with rounded corners.

Java
Kotlin

View view = getLayoutInflater().inflate(R.layout.custom_header_layout, null);
cometChatMessageComposer.setHeaderView(view);

val view: View = LayoutInflater.from(context).inflate(R.layout.custom_header_layout, null)
cometChatMessageComposer.setHeaderView(view)

What this does: Inflates the custom header layout XML and sets it as the header view on the composer. The “Notes” card appears above the text input area.

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

Customization matrix

What you want to change	Where	Property/API	Example
Attachment icon tint	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerAttachmentIconTint`	`<item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>`
Voice recording icon tint	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerVoiceRecordingIconTint`	`<item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>`
Active sticker icon tint	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerActiveStickerIconTint`	`<item name="cometchatMessageComposerActiveStickerIconTint">#F76808</item>`
Inactive sticker icon tint	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerInactiveStickerIconTint`	`<item name="cometchatMessageComposerInactiveStickerIconTint">#F76808</item>`
AI icon tint	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerAIIconTint`	`<item name="cometchatMessageComposerAIIconTint">#F76808</item>`
Active send button drawable	`themes.xml`	`CometChatMessageComposerStyle` with `cometchatMessageComposerActiveSendButtonDrawable`	`<item name="cometchatMessageComposerActiveSendButtonDrawable">@drawable/active_send_button</item>`
Apply a custom style	Activity/Fragment	`setStyle(int styleRes)`	`cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle);`
Target user	Activity/Fragment	`setUser(User)`	`.setUser(user)`
Target group	Activity/Fragment	`setGroup(Group)`	`.setGroup(Group)`
Typing events	Activity/Fragment	`disableTypingEvents(boolean)`	`.disableTypingEvents(true)`
Outgoing message sound	Activity/Fragment	`disableSoundForMessages(boolean)`	`.disableSoundForMessages(true)`
Predefined text	Activity/Fragment	`setInitialComposerText(String)`	`.setInitialComposerText("Your_Text")`
Max input lines	Activity/Fragment	`setMaxLine(int)`	`.setMaxLine(5)`
Auxiliary button alignment	Activity/Fragment	`setAuxiliaryButtonAlignment(AuxiliaryButtonsAlignment)`	`.setAuxiliaryButtonAlignment(AuxiliaryButtonsAlignment)`
Disable mentions	Activity/Fragment	`setDisableMentions(boolean)`	`.setDisableMentions(true);`
Custom outgoing message sound	Activity/Fragment	`setCustomSoundForMessages(String)`	`.setCustomSoundForMessages(String)`
Attachment button visibility	Activity/Fragment	`setAttachmentButtonVisibility(int)`	`.setAttachmentButtonVisibility(View.VISIBLE)`
Stickers button visibility	Activity/Fragment	`setStickersButtonVisibility(int)`	`.setStickersButtonVisibility(View.GONE)`
Send button visibility	Activity/Fragment	`setSendButtonVisibility(int)`	`.setSendButtonVisibility(View.VISIBLE)`
Camera attachment option	Activity/Fragment	`setCameraAttachmentOptionVisibility(int)`	`.setCameraAttachmentOptionVisibility(View.VISIBLE)`
Image attachment option	Activity/Fragment	`setImageAttachmentOptionVisibility(int)`	`.setImageAttachmentOptionVisibility(View.VISIBLE)`
Video attachment option	Activity/Fragment	`setVideoAttachmentOptionVisibility(int)`	`.setVideoAttachmentOptionVisibility(View.VISIBLE)`
Audio attachment option	Activity/Fragment	`setAudioAttachmentOptionVisibility(int)`	`.setAudioAttachmentOptionVisibility(View.VISIBLE)`
File attachment option	Activity/Fragment	`setFileAttachmentOptionVisibility(int)`	`.setFileAttachmentOptionVisibility(View.VISIBLE)`
Poll attachment option	Activity/Fragment	`setPollAttachmentOptionVisibility(int)`	`.setPollAttachmentOptionVisibility(View.VISIBLE)`
Collaborative document option	Activity/Fragment	`setCollaborativeDocumentOptionVisibility(int)`	`.setCollaborativeDocumentOptionVisibility(View.VISIBLE)`
Collaborative whiteboard option	Activity/Fragment	`setCollaborativeWhiteboardOptionVisibility(int)`	`.setCollaborativeWhiteboardOptionVisibility(View.VISIBLE)`
Mentions text style	`themes.xml`	`CometChatMessageComposerMentionsStyle`	`<item name="cometchatMentionTextColor">#000000</item>`
Text formatters	Activity/Fragment	`setTextFormatters(List<CometChatTextFormatter>)`	See `setTextFormatters` code above
Attachment options (replace)	Activity/Fragment	`setAttachmentOptions(List<CometChatMessageComposerAction>)`	See `setAttachmentOptions` code above
Auxiliary button view	Activity/Fragment	`setAuxiliaryButtonView(View)`	See `setAuxiliaryButtonView` code above
Send button view	Activity/Fragment	`setSendButtonView(View)`	See `setSendButtonView` code above
Header view	Activity/Fragment	`setHeaderView(View)`	See `setHeaderView` code above

Common pitfalls & fixes

Pitfall	Fix
Component does not render	Ensure `CometChatUIKit.init()` is called and awaited before using any UI Kit component. If `init()` has not completed, the component will not load.
Messages not sending to the correct conversation	Ensure you call `.setUser(user)` or `.setGroup(group)` on the `CometChatMessageComposer` instance to associate it with the correct conversation.
`ActivityResultLauncher` not initialized	The `CometChatMessageComposer` manages runtime permissions. Ensure its object is created in the `onCreate` state of an Activity. If using a Fragment, ensure the Fragment is loaded in the `onCreate` state of the Activity.
Custom style not visible	Verify the style parent is `CometChatMessageComposerStyle` and that you call `setStyle(R.style.YourStyle)` on the component instance.
Sticker button disappears after setting auxiliary view	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.
Attachment options not showing custom actions	Ensure you pass the list of `CometChatMessageComposerAction` objects to `setAttachmentOptions(actionList)`. Calling `setAttachmentOptions()` without a list does not add custom actions.
Typing indicators still sent after disabling	Ensure you call `disableTypingEvents(true)` before the component starts loading. If called after the component is already active, it may not take effect immediately.
`setOnSendButtonClick` not firing	If you set a custom send button view with `setSendButtonView()`, the `setOnSendButtonClick` callback may not fire because the custom view replaces the default send button entirely. Attach your click listener directly to the custom view instead.
Mentions not rendering with custom style	Ensure you create a `CometChatMentionsFormatter`, call `setMessageComposerMentionTextStyle()` with your custom style resource, and pass the formatter in a list to `setTextFormatters()`.
Predefined text not appearing	Ensure you call `setInitialComposerText("Your_Text")` after the component is initialized and attached to the view hierarchy.

FAQ

Q: Does the MessageComposer support filters or events? A: No. The MessageComposer component does not have any available filters and does not emit any events of its own. Q: How do I set the target user or group for the composer? A: Call .setUser(user) for a one-on-one conversation or .setGroup(group) for a group conversation on the CometChatMessageComposer instance. Q: How do I keep the default sticker button when adding a custom auxiliary view? A: Retrieve the default auxiliary buttons using CometChatUIKit.getDataSource().getAuxiliaryOption(), add them to a LinearLayout along with your custom view, and pass the combined layout to setAuxiliaryButtonView(). Q: How do I customize the attachment options? A: Create a list of CometChatMessageComposerAction objects, each with a title, icon, and click handler, and pass the list to setAttachmentOptions(actionList). This replaces the default attachment options entirely. Q: How do I customize the mentions appearance in the composer? A: Define a custom style with parent CometChatMessageComposerMentionsStyle in themes.xml, create a CometChatMentionsFormatter, call setMessageComposerMentionTextStyle() with your style, and pass the formatter to setTextFormatters().

​When to use this

​Prerequisites

​Quick start

​Core concepts

​Implementation

​Actions

​setOnSendButtonClick

​setOnError

​setOnTextChangedListener

​Filters

​Events

​Style

​Functionality

​Advanced views

​setTextFormatters

​setAttachmentOptions

​setAuxiliaryButtonView

​setSendButtonView

​setHeaderView

​Customization matrix

​Common pitfalls & fixes

​FAQ

​Next steps

When to use this

Prerequisites

Quick start

Core concepts

Implementation

Actions

`setOnSendButtonClick`

`setOnError`

`setOnTextChangedListener`

Filters

Events

Style

Functionality

Advanced views

`setTextFormatters`

`setAttachmentOptions`

`setAuxiliaryButtonView`

`setSendButtonView`

`setHeaderView`

Customization matrix

Common pitfalls & fixes

FAQ

Next steps