Android
UIKit Getting Started

UIKit for Android

Sendbird UIKit for Android is a development kit that enables fast and easy integration of standard chat features into new or existing applications. From the overall theme to individual styles such as colors and fonts, components can be fully customized to create an in-app chat experience unique to your brand identity.

Note: Currently, UIKit for Android supports group channels only.

ThemeLight


Benefits

  • Easy installation
  • Fully-featured chat with a minimal amount of code
  • Customizable components, events, and views
  • Customizable user list to enable chat among specified users

Requirements

The minimum requirements for UIKit for Android are:

  • Android + (API level as 16 or higher)
  • Java 8
  • Support androidx only
  • Gradle 3.4.0 or higher

Try the sample app

Our sample app has all the core features of Sendbird UIKit for Android. Download the app from our GitHub repository to get an idea of what you can build with the actual UIKit before building your own project.

Download Sample App


Create a project

Go to Android Studio and create a project for UIKit for Android in the Project window as follows:

  1. In the Welcome to Android Studio window, click Start a new Android Studio project.
  2. In the Select a Project Template window, select Empty Activity, and click Next.
  3. Enter your project name in the Name field in the Configure your project window.
  4. Select your language as either Java or Kotlin from the Language drop-down menu.
  5. Enable Use androidx.*artifacts.
  6. Select minimum API level as 16 or higher. Create a project

Install UIKit for Android

UIKit for Android is installed via Gradle. Begin by opening the project's top-level build.gradle file and adding code blocks as below:

Note: Add the code blocks in your root build.gradle file, not your module build.gradle file.

build.gradle
Light Color Skin
Copy
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

Then, open the build.gradle file at the application level. For Java and Kotlin, add code blocks and dependencies as below:

Note: Data binding should be enabled in your build.gradle file.

build.gradle
Light Color Skin
Copy
apply plugin: 'com.android.application'

android {
    ...

    dataBinding {
        enabled = true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    ...
}

dependencies {
    implementation 'com.sendbird.sdk:uikit:1.1.2'
    ...
}

After saving your build.gradle file, click the Sync button to apply all the changes.


Initialize the UIKit SDK

Next, initialize a SendBirdUIKit instance by passing the SendBirdUIKitAdapter instance to the SendBirdUIkit.init() method as a parameter. Refer below for more information:

Note: The SendBirdUIkit.init() must be called once in the onCreate() method of the Application instance of your client app.

Light Color Skin
Copy
package com.example.uikitapplication;

import android.app.Application;

import com.sendbird.uikit.SendBirdUIKit;
import com.sendbird.uikit.adapter.SendBirdUIKitAdapter;
import com.sendbird.uikit.interfaces.UserInfo;

public class BaseApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();

        SendBirdUIKit.init(new SendBirdUIKitAdapter() {
            @Override
            public String getAppId() {
                return "2D7B4CDB-932F-4082-9B09-A1153792DC8D";  // The ID of the Sendbird application which UIKit sample app uses.  
            }

            @Override
            public String getAccessToken() {
                return "";
            }

            @Override
            public UserInfo getUserInfo() {
                return new UserInfo() {
                    @Override
                    public String getUserId() {
                        return USER_ID;
                    }

                    @Override
                    public String getNickname() {
                        return USER_NICKNAME;
                    }

                    @Override
                    public String getProfileUrl() {
                        return "";
                    }
                };
            }
        }, this);
    }
}

Note : In the above, you should specify the APP_ID of your Sendbird application in place of the getAppId()'s return value.

Add the created BaseApplication to the AndroidManifest.xml.

Light Color Skin
Copy
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sendbird.uikitapplication">

    <application
        android:name=".BaseApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                ...
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

A header, which acts as an ActionBar, is provided by our UIKit. Implement it as follows:

Note : Skip this step if you want to use Android's ActionBar instead.

Light Color Skin
Copy
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

The Sendbird UIKit has successfully been initialized. The next sections will provide a more in-depth look into the details of each component as well as how they can be customized.

ChannelListActivity

UIKit provides various components. ChannelListActivity is the starting point of our UIKit. With just a single line of this code, the default UIKit can be implemented in your app.

Light Color Skin
Copy
package com.example.uikitapplication;

import com.sendbird.uikit.activities.ChannelListActivity;

public class MainActivity extends ChannelListActivity {
    // If you are going to inherit the ChannelListActivity, you must not implement the setContentView() in the activity.
}

Note: At this point, chat will be up and running in your app.

CustomUserListQueryHandler

Note : Skip this section if user list customization isn’t required.

In general, users and user relationships are defined in your repository or server. To customize your user list instead of retrieving the entire list from Sendbird server, the UIKit’s CustomUserListQueryHandler should be implemented. Since the CustomUserListQueryHandler handles pagination as well, it should be explicitly implemented as follows. If not, all users registered in the application are listed.

  1. Implement the UserInfo class to a class that contains user information from either the local repository in a client app or your server.
Light Color Skin
Copy
class YOUR_USER implements UserInfo {
    private String YOUR_USER_ID;
    private String YOUR_USER_NICKNAME;
    private String YOUR_USER_PROFILE_URL;

    public SendBirdUser(String YOUR_USER_ID, String YOUR_USER_NICKNAME, String YOUR_USER_PROFILE_URL) {
        this.YOUR_USER_ID = YOUR_USER_ID;
        this.YOUR_USER_NICKNAME = YOUR_USER_NICKNAME;
        this.YOUR_USER_PROFILE_URL = YOUR_USER_PROFILE_URL;
    }

    @Override
    public String getUserId() {
        return this.YOUR_USER_ID;
    }

    @Override
    public String getNickname() {
        return this.YOUR_USER_NICKNAME;
    }

    @Override
    public String getProfileUrl() {
        return this.YOUR_USER_PROFILE_URL;
    }
}
  1. Implement the CustomUserListQueryHandler class.
Light Color Skin
Copy
CustomUserListQueryHandler handler = new CustomUserListQueryHandler() {

    // You can define your own variables. (ex. Limit, count, isError)
    @Override
    public void loadInitial(UserListResultHandler handler) {
        // You have to initialize your variables here.
        // Implement the first query.
        // You can carry the model implemented UserInfo.
        handler.onResult(userInfos, null);
    }

    @Override
    public void loadNext(UserListResultHandler handler) {
        // Implement the query.
        // You can carry the model implemented UserInfo.
        handler.onResult(userInfos, null);
    }

    @Override
    public boolean hasMore() {
        // True if a user list will be loaded, false otherwise.
        return YOUR_COUNT < YOUR_USER_LIST_SIZE;
    }
};
MethodDescription

loadInitial()

Initializes all variables and implements a query instance that retrieves the initial list of user information. This should be implemented in your client app or the query instance will not work as expected. Through the handler parameter, List<UserInfo> is returned. If successful, pass null to the onResult() method as a parameter. If not successful, pass an error object.

loadNext()

Implements the query instance to load user information after the loadInitial() method is called. This doesn’t need to be implemented if all data is queried at once without pagination. Through the handler parameter, List<UserInfo> is returned if the query instance is set to the handler. If successful, pass null to the onResult() method as a parameter. If not successful or the scroll reaches the bottom, call this loadNext() method again.

hasMore()

Checks if there is more user information. Returns true if there is more user information. Returns false if there is no more user information.

  1. Set the handler through the SendBirdUIKit instance as below:
Light Color Skin
Copy
SendBirdUIKit.setCustomUserListQueryHandler(handler);

UIKit at a glance

Methods provided by Sendbird UIKit for Android automatically process data using our chat SDK. Using Activities and Fragments, chat can easily be added to your Android client app using the components below.

SendBirdUIKit instance

This is the most important class in the UIKit. These interfaces can be used to initialize information and call all Activity components.

MethodDescription

init()

Initializes a SendBirdUIKit instance.

setDefaultTheme()

Changes the theme to the default theme.

isDarkMode()

Determines whether the theme mode is ThemeMode.Dark

getAdapter()

Retrieves the current registered SendBirdUIKit adapter.

setCustomUserListQueryHandler()

Imports your custom user list. If this isn’t implemented, the list of all users in the Sendbird server are displayed.

connect()

Connects to Sendbird server and update your profile.

disconnect()

Disconnects from Sendbird server.

updateUserInfo()

Updates user information for profile display.

SendBirdUIKitAdapter

Listed below are the methods of the SendBirdUIKitAdapter class:

MethodDescription

getAppId()

Retrieves the APP_ID of your Sendbird application.

getUserInfo()

Retrieves the information of the current user

getAccessToken()

Retrieves the access token of the current user, which is required to provide in the SendBirdUIKit.init() method. Using the Platform API, you can create a user along with their own access token, or issue an access token to an existing user. If you don’t want to use an access token, you must specify the return value of the UserInfo.getUserID() in the SendBirdUIKitAdapter.getUserInfo() instead. (Default: USER_ID)

UserInfo

Listed below are the methods of the UserInfo class:

MethodDescription

getUserId()

Retrieves the ID of the current user that has been registered to Sendbird server.

getNickName()

Retrieves the current user's nickname. If the nickname hasn’t been set, USER ID is used instead by default.

getProfileUrl()

Retrieves the URL of the current user's profile image.

Other components

UIKit also provides the following components. All components can be called while fragments and activities are running on the Android platform.

ComponentDescription

ChannelList

Shows all channels a user has joined.

Channel

Shows the current channel a user has joined. From this component, users can send or receive messages.

CreateChannel

Shows all the users of your client app so you can create a channel. Users can be selected from this component to begin chatting.

InviteChannel

Shows all the users of your client app from the current channel so you can invite other users to join.

ChannelSettings

Changes the channel information.

MemberList

Shows the list of members who have joined the current channel.