Custom Text Formatter - CometChat Docs

AI Integration Quick Reference

Field	Value
Packages	`com.cometchat:chatuikit-kotlin` · `com.cometchat:chatuikit-jetpack`
Key class	`CometChatTextFormatter` (abstract base class for custom formatters)
Required setup	`CometChatUIKit.init()` then `CometChatUIKit.login("UID")`
Purpose	Extend to create custom inline text patterns with tracking characters, suggestion lists, and span formatting
Features	Tracking character activation, suggestion list, span formatting per context (composer, bubbles, conversations), pre-send hooks
Sample app	GitHub
Related	Mentions Formatter \| ShortCut Formatter \| All Guides

CometChatTextFormatter is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, shortcuts, or any pattern triggered by a tracking character.

Capability	Description
Tracking character	Activates the formatter when the user types a specific character (e.g., `#`, `!`)
Suggestion list	Populates a dropdown of `SuggestionItem` objects as the user types
Span formatting	Applies `SpannableStringBuilder` spans per context: composer, left/right bubbles, conversations
Pre-send hook	`handlePreMessageSend` lets you modify the message before it’s sent
Component integration	Plugs into any component via `setTextFormatters()`

Steps

1. Create a class extending CometChatTextFormatter

Pass your tracking character to the superclass constructor.

Kotlin (XML Views)
Jetpack Compose

class HashTagFormatter : CometChatTextFormatter('#') {
    private val suggestions: MutableList<SuggestionItem> = ArrayList()
}

// Same class — formatters are shared between both modules
class HashTagFormatter : CometChatTextFormatter('#') {
    private val suggestions: MutableList<SuggestionItem> = ArrayList()
}

2. Override the search method

Called when the user types after the tracking character. Match input against your data and update the suggestion list.

override fun search(context: Context, queryString: String?) {
    suggestions.clear()
    val query = "#${queryString ?: ""}"
    // Match against your hashtag data source
    val matchingTags = getMatchingTags(query)
    for (tag in matchingTags) {
        val item = SuggestionItem("", tag, null, null, tag, null, null)
        item.isHideLeadingIcon = true
        suggestions.add(item)
    }
    setSuggestionItemList(suggestions)
}

3. Override onScrollToBottom

Required by the base class. Implement pagination logic or leave empty.

override fun onScrollToBottom() {
    // Load more suggestions if needed
}

4. Override span formatting methods (optional)

Customize how matched text renders in different contexts using SpannableStringBuilder.

override fun prepareLeftMessageBubbleSpan(
    context: Context, baseMessage: BaseMessage, spannable: SpannableStringBuilder
): SpannableStringBuilder? {
    // Apply custom spans for incoming message bubbles
    return applyHashTagSpans(spannable, Color.parseColor("#5dff05"))
}

override fun prepareRightMessageBubbleSpan(
    context: Context, baseMessage: BaseMessage, spannable: SpannableStringBuilder
): SpannableStringBuilder? {
    // Apply custom spans for outgoing message bubbles
    return applyHashTagSpans(spannable, Color.parseColor("#30b3ff"))
}

5. Integrate with a component

Kotlin (XML Views)
Jetpack Compose

import com.cometchat.uikit.core.CometChatUIKit

val textFormatters = CometChatUIKit.getDataSource().getTextFormatters(this, messageComposer.additionParameter)
textFormatters.add(HashTagFormatter())
messageComposer.setTextFormatters(textFormatters)

import com.cometchat.uikit.core.CometChatUIKit

// In your composable or ViewModel setup
val textFormatters = CometChatUIKit.getDataSource().getTextFormatters(context, additionParameter)
textFormatters.add(HashTagFormatter())

CometChatMessageComposer(
    user = user,
    textFormatters = textFormatters
)

Pass the same list to CometChatMessageList and CometChatConversations via their setTextFormatters() methods to apply formatting across all contexts.

Methods Reference

Method	Description
`search(Context, String)`	Abstract — called when user types after the tracking character. Update the suggestion list here.
`onScrollToBottom()`	Abstract — called when the suggestion list scrolls to the bottom. Implement pagination or leave empty.
`onItemClick(Context, SuggestionItem, User, Group)`	Called when a suggestion item is selected. Override to customize insertion behavior.
`handlePreMessageSend(Context, BaseMessage)`	Called before a message is sent. Override to modify the message (e.g., add metadata).
`prepareLeftMessageBubbleSpan(Context, BaseMessage, SpannableStringBuilder)`	Override to format text in incoming message bubbles.
`prepareRightMessageBubbleSpan(Context, BaseMessage, SpannableStringBuilder)`	Override to format text in outgoing message bubbles.
`prepareComposerSpan(Context, BaseMessage, SpannableStringBuilder)`	Override to format text in the message composer.
`prepareConversationSpan(Context, BaseMessage, SpannableStringBuilder)`	Override to format text in the conversations list preview.
`setSuggestionItemList(List<SuggestionItem>)`	Updates the suggestion dropdown with new items.
`setDisableSuggestions(boolean)`	Disables the suggestion dropdown entirely. (`protected` — accessible from subclasses only.)
`setInfoText(String)`	Sets informational text displayed above the suggestion list.
`setInfoVisibility(boolean)`	Toggles visibility of the info text.
`setShowLoadingIndicator(boolean)`	Shows/hides a loading spinner in the suggestion dropdown.
`getTrackingCharacter()`	Returns the tracking character passed to the constructor.

Next Steps

Mentions Formatter

Built-in @mention formatting with styled tokens

ShortCut Formatter

Shortcut text expansion via the message-shortcuts extension

All Guides

Browse all feature and formatter guides

Sample App

Full working sample application on GitHub

​Steps

​1. Create a class extending CometChatTextFormatter

​2. Override the search method

​3. Override onScrollToBottom

​4. Override span formatting methods (optional)

​5. Integrate with a component

​Methods Reference

​Next Steps