Overview

Browse all prebuilt UI components in the CometChat Android UI Kit.

AI Integration Quick Reference

Field	Value
Packages	com.cometchat:chat-uikit-kotlin (Kotlin XML Views), com.cometchat:chat-uikit-compose (Jetpack Compose)
Required setup	CometChatUIKit.init() + CometChatUIKit.login() before rendering any component
Shared core	chatuikit-core — ViewModels, repositories, use cases, events (shared by both modules)
Calling	Requires separate com.cometchat:calls-sdk-android package

Architecture

The UI Kit is a set of independent components that compose into chat layouts. A typical chat layout uses four core components:

• CometChatConversations — list of recent conversations
• CometChatMessageHeader — toolbar with avatar, name, status, typing indicator
• CometChatMessageList — scrollable message feed with reactions, receipts, threads
• CometChatMessageComposer — rich input with attachments, mentions, voice notes

Selecting a conversation yields a User or Group object. Pass it to the message components to load the chat.

Components communicate via CometChatEvents — a SharedFlow-based event bus. See Events.

---

Component Catalog

Conversations and Lists

Component	Purpose	Page
CometChatConversations	Scrollable list of recent conversations	Conversations
CometChatUsers	Scrollable list of users	Users
CometChatGroups	Scrollable list of groups	Groups
CometChatGroupMembers	Scrollable list of group members	Group Members

Messages

Component	Purpose	Page
CometChatMessageHeader	Toolbar with avatar, name, status, typing	Message Header
CometChatMessageList	Message feed with reactions, receipts, threads	Message List
CometChatMessageComposer	Rich input with attachments, mentions, voice	Message Composer
CometChatThreadHeader	Parent message bubble and reply count	Thread Header

Calling

Component	Purpose	Page
CometChatCallButtons	Voice and video call buttons	Call Buttons
CometChatIncomingCall	Incoming call notification	Incoming Call
CometChatOutgoingCall	Outgoing call screen	Outgoing Call
CometChatCallLogs	Call history list	Call Logs

---

Component API Pattern

All components share a consistent API surface across both modules.

Setting User or Group

Kotlin (XML Views)

messageHeader.setUser(user)
messageList.setUser(user)
messageComposer.setUser(user)

// Or for group chat
messageHeader.setGroup(group)
messageList.setGroup(group)
messageComposer.setGroup(group)

Jetpack Compose

CometChatMessageHeader(user = user)
CometChatMessageList(user = user)
CometChatMessageComposer(user = user)

// Or for group chat
CometChatMessageHeader(group = group)
CometChatMessageList(group = group)
CometChatMessageComposer(group = group)

Callbacks

Kotlin (XML Views)

conversations.setOnItemClick { conversation -> /* navigate */ }
conversations.setOnError { exception -> /* handle error */ }
conversations.setOnLoad { list -> /* data loaded */ }

Jetpack Compose

CometChatConversations(
    onItemClick = { conversation -> /* navigate */ },
    onError = { exception -> /* handle error */ },
    onLoad = { list -> /* data loaded */ }
)

Data Filtering

Kotlin (XML Views)

conversations.setConversationsRequestBuilder(
    ConversationsRequest.ConversationsRequestBuilder().setLimit(20)
)

Jetpack Compose

CometChatConversations(
    conversationsRequestBuilder = ConversationsRequest.ConversationsRequestBuilder().setLimit(20)
)

View Slots

Replace specific regions of a component’s UI. See View Slots.

Kotlin (XML Views)

conversations.setSubtitleView(object : ConversationsViewHolderListener() {
    override fun createView(context: Context, binding: CometchatConversationsListItemsBinding): View {
        return CustomSubtitleView(context)
    }
    override fun bindView(context: Context, createdView: View, conversation: Conversation, ...) {
        (createdView as CustomSubtitleView).bind(conversation)
    }
})

Jetpack Compose

CometChatConversations(
    subtitleView = { conversation, typingIndicator ->
        Text(conversation.lastMessage?.text ?: "")
    }
)

Styles

See Component Styling.

Kotlin (XML Views)

XML theme attributes in themes.xml:

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
</style>

Jetpack Compose

Style data classes via parameters:

CometChatConversations(
    style = CometChatConversationsStyle.default().copy(
        backgroundColor = Color(0xFFF5F5F5)
    )
)

Events

Global inter-component communication via CometChatEvents:

// Subscribe to message events
viewModelScope.launch {
    CometChatEvents.messageEvents.collect { event ->
        when (event) {
            is CometChatMessageEvent.MessageSent -> { /* handle */ }
            is CometChatMessageEvent.MessageDeleted -> { /* handle */ }
            else -> {}
        }
    }
}

See Events for the full reference.

---

Next Steps

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles

Customization

Deep customization via ViewModels, styles, and view slots

Guides

Task-oriented tutorials for common patterns