Message Composer

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

AI Agent Component Spec

{
  "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": []
}

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.

Kotlin

ChatActivity.kt

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

Java

ChatActivity.java

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

Quick Start

Add the component to your layout XML:

layout_activity.xml

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

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

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.

To add programmatically in an Activity:

Kotlin

YourActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val composer = CometChatMessageComposer(this)
    composer.setUser(user)
    setContentView(composer)
}

Java

YourActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    CometChatMessageComposer composer = new CometChatMessageComposer(this);
    composer.setUser(user);
    setContentView(composer);
}

Or in a Fragment:

Kotlin

YourFragment.kt

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    val composer = CometChatMessageComposer(requireContext())
    composer.setUser(user)
    return composer
}

Java

YourFragment.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    CometChatMessageComposer composer = new CometChatMessageComposer(getContext());
    composer.setUser(user);
    return composer;
}

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.

Kotlin

YourActivity.kt

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

Java

YourActivity.java

messageComposer.setOnSendButtonClick(new CometChatMessageComposer.SendButtonClick() {
    @Override
    public void 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

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

Kotlin

YourActivity.kt

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

Java

YourActivity.java

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

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.

Kotlin

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

Java

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

    }
});

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.

Kotlin

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

Java

View view = getLayoutInflater().inflate(R.layout.custom_header_layout, null);
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.

Example with a “Notes” card header:

Create a custom_header_layout.xml layout:

custom_header_layout.xml

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

Kotlin

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

Java

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

setFooterView

Sets a custom view below the text input area.

Kotlin

cometChatMessageComposer.setFooterView(view)

Java

cometChatMessageComposer.setFooterView(view);

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.

Kotlin

cometChatMessageComposer.setSendButtonView(view)

Java

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.

Custom send button example:

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>

Kotlin

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)

Java

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

setAuxiliaryButtonView

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

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.

Kotlin

cometChatMessageComposer.setAuxiliaryButtonView(view)

Java

cometChatMessageComposer.setAuxiliaryButtonView(view);

Custom SOS button example:

Kotlin

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)

Java

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

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.

Kotlin

cometChatMessageComposer.setAttachmentOptions(actionList)

Java

cometChatMessageComposer.setAttachmentOptions(actionList);

Custom attachment options example:

Kotlin

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)

Java

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

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.

Kotlin

cometChatMessageComposer.setAIOptions { context, user, group, idMap ->
    val actionList = ArrayList<CometChatMessageComposerAction>()
    // Build custom AI actions
    actionList
}

Java

cometChatMessageComposer.setAIOptions((context, user, group, idMap) -> {
    List<CometChatMessageComposerAction> actionList = new ArrayList<>();
    // Build custom AI actions
    return actionList;
});

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.

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>

Kotlin

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

Java

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

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.

Kotlin

messageComposer.setSuggestionListItemView(suggestionListViewHolderListener)

Java

messageComposer.setSuggestionListItemView(suggestionListViewHolderListener);

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

Kotlin

cometChatMessageComposer.setAttachmentButtonVisibility(View.GONE)
cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE)
cometChatMessageComposer.setAuxiliaryButtonVisibility(View.GONE)

Java

cometChatMessageComposer.setAttachmentButtonVisibility(View.GONE);
cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE);
cometChatMessageComposer.setAuxiliaryButtonVisibility(View.GONE);

Custom attachment options only

Kotlin

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

Java

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

Disable voice recording

Kotlin

cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE)

Java

cometChatMessageComposer.setVoiceNoteButtonVisibility(View.GONE);

Prefilled composer with disabled typing events

Kotlin

cometChatMessageComposer.setInitialComposerText("Hello!")
cometChatMessageComposer.disableTypingEvents(true)
cometChatMessageComposer.disableSoundForMessages(true)

Java

cometChatMessageComposer.setInitialComposerText("Hello!");
cometChatMessageComposer.disableTypingEvents(true);
cometChatMessageComposer.disableSoundForMessages(true);

Advanced Methods

setUser / setGroup

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

Kotlin

// One-on-one conversation
cometChatMessageComposer.setUser(user)

// Group conversation
cometChatMessageComposer.setGroup(group)

Java

// One-on-one conversation
cometChatMessageComposer.setUser(user);

// Group conversation
cometChatMessageComposer.setGroup(group);

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.

Kotlin

cometChatMessageComposer.setParentMessageId(parentMessage.id)

Java

cometChatMessageComposer.setParentMessageId(parentMessage.getId());

setInitialComposerText

Sets predefined text in the composer input field.

Kotlin

cometChatMessageComposer.setInitialComposerText("Your_Text")

Java

cometChatMessageComposer.setInitialComposerText("Your_Text");

getText / getProcessedText

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

Kotlin

val rawText = cometChatMessageComposer.text
val processedText = cometChatMessageComposer.processedText

Java

String rawText = cometChatMessageComposer.getText();
String processedText = cometChatMessageComposer.getProcessedText();

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().

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>

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>

Kotlin

cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle)

Java

cometChatMessageComposer.setStyle(R.style.CustomMessageComposerStyle);

To know more such attributes, visit the attributes file.

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

Accessibility

The component renders a message input area with interactive buttons for send, attachment, voice note, stickers, and AI. The text input field supports standard Android accessibility — TalkBack announces the placeholder text and current input content.

For custom views provided via setHeaderView, setFooterView, setSendButtonView, or setAuxiliaryButtonView, ensure you set android:contentDescription on visual-only elements so TalkBack can announce them. The default views handle this automatically.

Voice recording and attachment buttons include built-in content descriptions. If you replace them with custom views, provide appropriate contentDescription attributes.

Next Steps

Message Header

Display user/group info in the toolbar

Message List

Display messages in a conversation

Conversations

Browse recent conversations

Theming

Customize colors, fonts, and styles