Send your first message

Sendbird UIKit for Jetpack Compose is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.

Sendbird UIKit for Jetpack Compose supports group channels. Follow the guide below to start sending a message from scratch in Jetpack Compose.

To view the image in full screen, click on the

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a group channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

• Sendbird application on Sendbird Dashboard
• A user in the Sendbird application

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from Sendbird Dashboard when initializing the Chat SDK.

1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

2. Create a new application by clicking Create + at the bottom right of your screen.

3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

4. Click the application you just created under Applications. You will see the application's Application ID which you will need when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities.

3. Copy and store the user ID. You will use it to connect to the Sendbird server.

You can start building a messaging experience in your app by installing Sendbird UIKit for Jetpack Compose. This developer kit is an add-on feature to Sendbird Chat SDK so installing the UIKit will also require the core Chat SDK installation.

To get started, open Android Studio and create a new project for UIKit in the Project window as follows:

1. Click Start a new Android Studio project in the Welcome to Android Studio window.
2. Select Empty Activity with Jetpack Compose in the Select a Project Template window and click Next.
3. Enter your project name in the Name field in the Configure your project window.
4. Select minimum API level as 24 or higher.

To view the image in full screen, click on the

You can install UIKit for Jetpack Compose through Gradle. The dependency settings differ depending on your gradle version and language as follows:

If you are using Gradle 6.8 or higher, add the following to your settings.gradle (Project Settings) file:

dependencyResolutionManagement {
    repositories {
        maven { setUrl("https://repo.sendbird.com/public/maven") }
    }
}

If you are using Gradle 6.7 or lower, add the following code to your root build.gradle file:

allprojects {
    repositories {
        maven { setUrl("https://repo.sendbird.com/public/maven") }
    }
}

Note: Make sure the above code block isn't added to your module build.gradle file.

Add the dependency to your module build.gradle file.

dependencies {
    implementation("com.sendbird.sdk:uikit-compose:1.0.0-beta.1")
}

Then, click the Sync button to apply all changes.

To integrate and run Sendbird UIKit for Jetpack Compose in your app, you need to initialize it first in the BaseApplication class.

First, create a BaseApplication.kt file. Then, initialize SendbirdUIKitCompose instance. The SendbirdUIKitCompose.init() must be called once in the onCreate() method of your app’s Application instance.

Here, you will need to define YOUR_APP_ID and USER_ID for proper functioning of the kit.

• YOUR_APP_ID: you can find this on the Overview page on Sendbird dashboard.

• USER_ID: the unique ID set to the user you've created on the dashboard. If you haven't created a user in advance, specifying a unique USER_ID in the code snippet provided will automatically generate a new user in the specified Sendbird application and connect it to the Sendbird server.

Note: Sendbird supports user authentication via access tokens, but defaults to allowing access without a token for ease of initial use. For enhanced security, we recommend adjusting the access settings of new users under Settings > Application > Security > Access token permission on the dashboard.

package com.example.myapplication

import android.app.Application
import com.sendbird.uikit.compose.SendbirdUikitCompose
import com.sendbird.uikit.core.data.model.UikitCurrentUserInfo
import com.sendbird.uikit.core.data.model.UikitInitParams
import kotlinx.coroutines.MainScope
import kotlinx.coroutines.flow.launchIn

const val AppId = "YOUR_APP_ID"
const val UserId = "YOUR_USER_ID"
const val Nickname = "YOUR_NICKNAME"

class BaseApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // Initialize Sendbird UIKit Compose.
        SendbirdUikitCompose.init(
            UikitInitParams(
                appId = AppId,
                context = this,
                isForeground = true
            )
        ).launchIn(MainScope())

        // Prepare user information.
        SendbirdUikitCompose.prepare(
            UikitCurrentUserInfo(
                userId = UserId,
                nickname = Nickname
            )
        )
    }
}

Go to MainActivity.kt and add the created BaseApplication to AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <!--  sets android:name  -->
    <application
        android:name=".BaseApplication"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.MyApplication">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

UIKit for Jetpack Compose navigates between screens using Android Navigation. To use the UIKit's group channel screens, you need to create a nested graph in the navigation host. To learn more about its navigation, see our guide on Navigation.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.rememberNavController
import com.example.myapplication.ui.theme.MyApplicationTheme
import com.sendbird.uikit.compose.navigation.SendbirdNavigation
import com.sendbird.uikit.compose.navigation.sendbirdGroupChannelNavGraph

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                SendbirdUikitApp()
            }
        }
    }
}

@Composable
fun SendbirdUikitApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(navController = navController)
    }
}

You can apply a theme to the UIKit screens by parameter theme in sendbirdGroupChannelNavGraph. The theme is a lambda function that wraps the content of the screen.

@Composable
fun SendbirdUikitApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            // Apply the theme
            theme = { content ->
                MyApplicationTheme {
                    content()
                }
            },
            navController = navController
        )
    }
}

If you want to apply a custom theme, color, or typography, you can refer to the Theme guide.

You can now run the application on an emulator or a plugged-in device. To send a message, you must first create a group channel by clicking on the icon in the top-right corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, type your first message and press send.

You've successfully sent your first message with Sendbird.