Getting Started With Jetpack Compose UI Kit

AI Integration Quick Reference

Field	Value
Package	`com.cometchat:chatuikit-compose-android`
UI Layer	Jetpack Compose (Material 3)
Init	`CometChatUIKit.init(context, UIKitSettings, callback)` — must resolve before `login()`
Login	`CometChatUIKit.login("UID", callback)` — must resolve before rendering components
Order	`init()` → `login()` → render. Breaking this order = blank screen
Auth Key	Dev/testing only. Use Auth Token in production
Calling	Optional. Add `com.cometchat:calls-sdk-android` to enable voice/video
Min SDK	Android 9.0 (API 28)

This guide walks you through integrating the CometChat Jetpack Compose UI Kit into an Android app. All UI components are native Compose composables built with Material 3. By the end you’ll have a working chat UI.

Prerequisites

You need three things from the CometChat Dashboard:

Credential	Where to find it
App ID	Dashboard → Your App → Credentials
Auth Key	Dashboard → Your App → Credentials
Region	Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`)

You also need:

Android Studio (Hedgehog or later recommended)
An Android emulator or physical device running Android 9.0 (API 28) or higher
Kotlin configured with Compose compiler plugin
Gradle plugin 8.0+ with Kotlin DSL

Auth Key is for development only. In production, generate Auth Tokens server-side via the REST API and use loginWithAuthToken(). Never ship Auth Keys in client code.

enableCalling: true makes the Calls SDK dependency mandatory — otherwise the app crashes at launch. With the flag set, CometChatUIKit.initFromSettings() calls initCometChatCalls(), which throws if com.cometchat:calls-sdk-android is absent:

java.lang.NoClassDefFoundError: Failed resolution of:
  Lcom/cometchat/calls/core/CometChatCalls$SessionSettingsBuilder;
    at com.cometchat.uikit.core.CometChatUIKit.initCometChatCalls(CometChatUIKit.kt:229)

The crash happens in onCreate, before any UI renders — the flag name gives no hint that a dependency is implied. Change the flag and the dependency together, or leave enableCalling as false in an app that does not use calling.

Step 1 — Create an Android Project

Open Android Studio and start a new project.
Choose Empty Activity (Compose) as the project template.
Set minimum API level to 28 or higher.

Step 2 — Install Dependencies

Add the CometChat Repository

Add the CometChat Maven repository to your settings.gradle.kts:

settings.gradle.kts

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
    }
}

Add Dependencies

Open your app-level build.gradle.kts and enable Compose, then add the dependencies:

build.gradle.kts

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    alias(libs.plugins.kotlin.compose)
}

android {
    // ...
    buildFeatures {
        compose = true
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
    kotlinOptions {
        jvmTarget = "11"
    }
}

dependencies {
    // CometChat Jetpack Compose UI Kit
    implementation("com.cometchat:chatuikit-compose-android:6.0.3")

    // (Optional) Voice/video calling
    implementation("com.cometchat:calls-sdk-android:5.0.1")
}

Required dependency exclude. The UI Kit pulls io.noties:prism4j, which brings org.jetbrains:annotations-java5:17.0.0. That duplicates org.jetbrains:annotations:23.0.0 from AndroidX/Kotlin and the build fails at dexing with ~40 Duplicate class org.jetbrains.annotations.* errors. Add this to your app module:

configurations.all {
    exclude(group = "org.jetbrains", module = "annotations-java5")
}

Create your MainActivity.kt with the CometChat initialization and login flow. Since Compose uses a declarative approach, we track the auth state and render UI conditionally:

MainActivity.kt

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.cometchat.chat.core.CometChat
import com.cometchat.chat.exceptions.CometChatException
import com.cometchat.chat.models.User
import com.cometchat.uikit.core.CometChatUIKit
import com.cometchat.uikit.core.UIKitSettings

class MainActivity : ComponentActivity() {

    private val TAG = "MainActivity"

    private val appID = "APP_ID"       // Replace with your App ID
    private val region = "REGION"      // Replace with your App Region
    private val authKey = "AUTH_KEY"   // Replace with your Auth Key

    private var isReady by mutableStateOf(false)
    private var error by mutableStateOf<String?>(null)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        val uiKitSettings = UIKitSettings.UIKitSettingsBuilder()
            .setRegion(region)
            .setAppId(appID)
            .setAuthKey(authKey)
            .subscribePresenceForAllUsers()
            .build()

        CometChatUIKit.init(this, uiKitSettings, object : CometChat.CallbackListener<String?>() {
            override fun onSuccess(s: String?) {
                Log.d(TAG, "Initialization completed successfully")
                loginUser()
            }

            override fun onError(e: CometChatException?) {
                error = "Init failed: ${e?.message}"
            }
        })

        setContent {
            when {
                error != null -> {
                    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                        Text(error ?: "Unknown error")
                    }
                }
                !isReady -> {
                    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                        CircularProgressIndicator()
                    }
                }
                else -> {
                    ChatApp()
                }
            }
        }
    }

    private fun loginUser() {
        CometChatUIKit.login("cometchat-uid-1", object : CometChat.CallbackListener<User>() {
            override fun onSuccess(user: User) {
                Log.d(TAG, "Login successful: ${user.uid}")
                isReady = true
            }

            override fun onError(e: CometChatException) {
                error = "Login failed: ${e.message}"
            }
        })
    }
}

init() must resolve before you call login(). Calling login() before init completes will fail silently.

Step 4 — Choose a Chat Experience

Integrate a conversation view that suits your app’s UX. Each option below includes a step-by-step guide.

Conversation List + Message View

Sequential navigation — conversation list as the entry point, tap a conversation to open a full-screen message view.

Build Conversation List + Message View

Step-by-step guide to build this layout with Jetpack Compose

One-to-One / Group Chat

Single chat window — no sidebar. Loads a specific user or group chat directly. Ideal for support chat, direct messages, or notification-driven flows.

Build One-to-One / Group Chat

Step-by-step guide to build this layout

Tab-Based Chat

Bottom navigation with tabs for Chats, Calls, Users, and Settings.

Build Tab-Based Chat

Step-by-step guide to build this layout

Next Steps

Components Overview

Browse all available UI Kit components

Theming

Customize colors, fonts, and styles

Core Features

Chat features included out of the box

Troubleshooting

Common issues and fixes

​Prerequisites

​Step 1 — Create an Android Project

​Step 2 — Install Dependencies

​Add the CometChat Repository

​Add Dependencies

​Step 3 — Initialize and Login

​Step 4 — Choose a Chat Experience

​Conversation List + Message View

Build Conversation List + Message View

​One-to-One / Group Chat

Build One-to-One / Group Chat

​Tab-Based Chat

Build Tab-Based Chat

​Next Steps

Components Overview

Theming

Core Features

Troubleshooting

Prerequisites

Step 1 — Create an Android Project

Step 2 — Install Dependencies

Add the CometChat Repository

Add Dependencies

Step 3 — Initialize and Login

Step 4 — Choose a Chat Experience

Conversation List + Message View

One-to-One / Group Chat

Tab-Based Chat

Next Steps