Skip to main content
FieldValue
Packagecom.cometchat:chatuikit-compose-android
UI LayerJetpack Compose (Material 3)
InitCometChatUIKit.init(context, UIKitSettings, callback) — must resolve before login()
LoginCometChatUIKit.login("UID", callback) — must resolve before rendering components
Orderinit()login() → render. Breaking this order = blank screen
Auth KeyDev/testing only. Use Auth Token in production
CallingOptional. Add com.cometchat:calls-sdk-android to enable voice/video
Min SDKAndroid 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:
CredentialWhere to find it
App IDDashboard → Your App → Credentials
Auth KeyDashboard → Your App → Credentials
RegionDashboard → 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.

Step 1 — Create an Android Project

  1. Open Android Studio and start a new project.
  2. Choose Empty Activity (Compose) as the project template.
  3. 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

Add Dependencies

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

Step 3 — Initialize and Login

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