Integrating UIKit to an existing App

This tutorial walks you through the process of integrating UIKit into your existing application.

Prerequisites

Sendbird UIKit library. If you don't have it yet, follow the steps in Installation to install the library.
Sendbird account and Sendbird application to use the UIKit library. If you don't have an account, you can create one here.
At least two users should be created in the Sendbird dashboard to test the chat functionality. You can create users on Sendbird Dashboard.

How to customize

Step 1 Clone the starter code

In most cases, you will already have an existing application that you want to add chat functionality to. In this tutorial, we will build a simple delivery app first to demonstrate how to integrate UIKit into an existing app. This app requires a chat feature so that users can communicate with their delivery person.

To get started, clone the starter code from the GitHub repository. You can find the code in the integrate-with-existing-app/before folder.

The app basically has two screens as follows:

Login Screen: A simple form to enter the user ID.
Order Status Screen: A screen to show the order details and the status.

Step 2-1 Initialize SendbirdUIKit

First, initialize SendbirdUIKit in the Application class.

in getAppId(), specify your Sendbird application ID.
You can specify user using getUserInfo() function. The user id will be determined by the user's input in the login screen.
getUserInfo() is not called immediately after the app starts. It is called when it's required to connect to Sendbird server.

BaseApplication.kt

package com.sendbird.uikit.tutorial

import android.app.Application

import com.sendbird.android.exception.SendbirdException
import com.sendbird.android.handler.InitResultHandler
import com.sendbird.uikit.SendbirdUIKit
import com.sendbird.uikit.adapter.SendbirdUIKitAdapter
import com.sendbird.uikit.interfaces.UserInfo

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

        SendbirdUIKit.init(object : SendbirdUIKitAdapter {
            override fun getAppId(): String {
                return TODO("Specify your Sendbird application ID.") // YOUR_APP_ID
            }

            override fun getAccessToken(): String {
                return ""
            }

            override fun getUserInfo(): UserInfo {
                return object : UserInfo {
                    override fun getUserId(): String {
                        return getSharedPreferences("sendbird", MODE_PRIVATE).getString("user_id", "")!!
                        // Use the ID of a user you've created on the dashboard.
                        // If there isn't one, specify a unique ID so that a new user can be created with the value.
                    }

                    override fun getNickname(): String {
                        return "" // Specify your user nickname. Optional.
                    }

                    override fun getProfileUrl(): String {
                        return ""
                    }
                }
            }

            override fun getInitResultHandler(): InitResultHandler {
                return object : InitResultHandler {
                    override fun onMigrationStarted() {
                        // DB migration has started.
                    }

                    override fun onInitFailed(e: SendbirdException) {
                        // If DB migration fails, this method is called.
                    }

                    override fun onInitSucceed() {
                        // If DB migration is successful, this method is called and you can proceed to the next step.
                        // In the sample app, the `LiveData` class notifies you on the initialization progress
                        // And observes the `MutableLiveData<InitState> initState` value in `SplashActivity()`.
                        // If successful, the `LoginActivity` screen
                        // Or the `HomeActivity` screen will show.
                    }
                }
            }
        }, this)
    }
}

And register the BaseApplication class in the AndroidManifest.xml file. Put this code inside the <application> tag.

AndroidManifest.xml

android:name=".BaseApplication"

LoginActivity.kt

package com.sendbird.uikit.tutorial

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity

class LoginActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        findViewById<Button>(R.id.loginButton).setOnClickListener {
            val userId = findViewById<EditText>(R.id.userIdEditText).text.toString()
            getSharedPreferences("sendbird", MODE_PRIVATE).edit().putString("user_id", userId).apply()
            startActivity(Intent(this@LoginActivity, OrderStatusActivity::class.java))
        }
    }
}

Step 2-3 Add a chat button

Let's create a chat button which creates a channel and opens the chat screen when clicked.

Be sure to replace:

YOUR_APP_ID with your actual Sendbird application ID.
DELIVERY_PERSON_ID with the actual user ID.

OrderStatusActivity.kt

package com.sendbird.uikit.tutorial

import android.os.Bundle
import android.view.View
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.sendbird.android.channel.GroupChannel
import com.sendbird.android.exception.SendbirdException
import com.sendbird.android.params.GroupChannelCreateParams
import com.sendbird.android.user.User
import com.sendbird.uikit.SendbirdUIKit
import com.sendbird.uikit.activities.ChannelActivity

class OrderStatusActivity : AppCompatActivity() {
    val orderDetails = OrderDetails(
        "12345",
        "In transit 🚛",
        listOf("Pizza", "Coke"),
        "" // TODO: Replace with the actual delivery person ID, DELIVERY_PERSON_ID
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_order_status)
        findViewById<TextView>(R.id.orderTitle).text = "Order #${orderDetails.orderNumber}"
        findViewById<TextView>(R.id.orderDetails).text = "Details:\n${orderDetails.orderItems.joinToString("\n- ")}"
        findViewById<TextView>(R.id.orderStatus).text = "Status: ${orderDetails.orderStatus}"
        findViewById<View>(R.id.chat_button).setOnClickListener {
            SendbirdUIKit.connect { user: User?, e: SendbirdException? ->
                if (user == null) {
                    // Handle error using e
                    return@connect
                }

                val params = GroupChannelCreateParams()
                params.apply {
                    userIds = listOf(user.userId, orderDetails.deliveryPersonId)
                    isDistinct = true // If true, the channel will be created only if it doesn't exist
                }

                GroupChannel.createChannel(params) { channel, e ->
                    if (channel != null) {
                        val intent = ChannelActivity.newIntent(this@OrderStatusActivity, channel.url)
                        startActivity(intent)
                    }
                    e?.printStackTrace()
                }
            }
        }

    }
}

Step 3 Click the button!

Now, you can run the app and test the chat functionality.

Full code

You can refer the full code from the GitHub repository.

Other samples

We have more samples available in our GitHub repository.

On this page

Prerequisites How to customize

Step 1 Clone the starter code Step 2-1 Initialize SendbirdUIKit Step 2-2 Save the userId in the Login screen Step 2-3 Add a chat button Step 3 Click the button!Full code

Other samples

Sample app