How to Add Chat with the QuickBlox UI Kit

If you want to add chat to an Android application without building every screen from scratch, the QuickBlox Android UI Kit provides pre-built messaging components that integrate with the QuickBlox Android SDK. In this tutorial, you’ll learn how to install the UI Kit, initialize the SDK, authenticate a user, and launch the default chat interface.

Prerequisites

Before you begin, make sure you have:

• A QuickBlox account.  If you don’t already have one, sign up to create one
• A QuickBlox application.
• Your QuickBlox application credentials (Application ID, Authorization Key, Authorization Secret, and Account Key).

What Is the QuickBlox Android UI Kit?

The QuickBlox Android UI Kit  is one of several QuickBlox UI Kits that provides pre-built user interface components that let you add chat functionality to Android applications quickly. Instead of creating messaging screens from scratch, you can launch a production-ready chat interface and customize it to match your application’s design.

The Android UI Kit includes support for:

• Private and group conversations
• Text, image, video, audio and file messaging
• Dialog management
• User and member management
• AI-powered messaging features including translation, message rephrasing, summarization, and smart reply assistance
• Fully customizable UI components

If you’re new to real-time messaging development, see our guide on What Is a Chat API? to understand how chat APIs power modern messaging applications before you start building.

Install the QuickBlox Android UI Kit

Install from the QuickBlox repository (recommended)

For most projects, installing the UI Kit from the QuickBlox repository is the simplest approach.

1. Import the QuickBlox Android UI Kit and Android SDK dependencies.

2. Add the QuickBlox repository to your project-level build.gradle or settings.gradle file.

3. Specify the QuickBlox repository URL so Gradle can locate and download the required SDK artifacts.

repositories {
    maven {
        url "https://github.com/QuickBlox/android-ui-kit-releases/raw/master/"
    }
}

4. Add the QuickBlox Android UI Kit and Android SDK dependencies to your module-level (app) build.gradle file.

dependencies {
    implementation "com.quickblox:android-ui-kit:0.10.1"
    implementation 'com.quickblox:quickblox-android-sdk-messages:4.4.1'
    implementation 'com.quickblox:quickblox-android-sdk-chat:4.4.1'
    implementation 'com.quickblox:quickblox-android-sdk-content:4.4.1'
}

5. Sync your project to download and install the required dependencies.

Install from a local source

Use this approach if you want to customize, modify, or contribute to the Android UI Kit source code.

1. Import the QuickBlox Android SDK dependencies.

2. Add the QuickBlox SDK repository to your project-level build.gradle or settings.gradle file.

3. Specify the QuickBlox repository URL so Gradle can locate and download the required SDK artifacts.

repositories {
    google()
    mavenCentral()
    maven {
        url "https://github.com/QuickBlox/quickblox-android-sdk-releases/raw/master/"
    }
}

4. Download the QuickBlox Android UI Kit from the GitHub repository.

5. Add the UI Kit project path to your settings.gradle file.

include ':ui-kit'
project(':ui-kit').projectDir = new File('YourPath/android-ui-kit/ui-kit')

6. Add the local UI Kit project as a dependency in your module-level (app) build.gradle file.

dependencies {
    implementation project(':ui-kit')
}

7. Sync your project to apply the changes.

Initialize the QuickBlox Android SDK

Before you can use the Android UI Kit, you need to initialize the QuickBlox Android SDK. This configures the SDK with your application credentials and prepares it for use in your application.

To initialize the SDK, pass your Application ID, Authorization Key, Authorization Secret, and Account Key to the QBSDK.init() method.

private const val APPLICATION_ID = "67534"

private const val AUTH_KEY = "lkjdueksu7392kj3d"

private const val AUTH_SECRET = "BTFsj7Rtt27DAmTD"

private const val ACCOUNT_KEY = "9yvTe17TbjNPqDoYtfqpA"
 

QBSDK.init(

    applicationContext,

    APPLICATION_ID,

    AUTH_KEY,

    AUTH_SECRET,

    ACCOUNT_KEY

)
 

These credentials are available from your QuickBlox Dashboard after creating an application.

Authenticate a User

Before users can send and receive messages, they must authenticate with the QuickBlox platform.

QuickBlox supports multiple authentication methods. In this tutorial, we’ll authenticate a user using a login and password. To learn more about the available authentication options, refer to the QuickBlox Authentication documentation.

After the user signs in successfully, initialize the QuickBlox Android UI Kit by calling QuickBloxUiKit.init(applicationContext), then launch the Dialogs screen by calling DialogsActivity.show(context).

After successful authentication, the UI Kit automatically handles the chat connection. For most applications, no additional XMPP configuration is required.

val user = QBUser()
user.login = "userlogin"
user.password = "userpassword"

QBUsers.signIn(user).performAsync(object : QBEntityCallback {
    override fun onSuccess(user: QBUser?, bundle: Bundle?) {

        QuickBloxUiKit.init(applicationContext)

        DialogsActivity.show(context)

    }

    override fun onError(exception: QBResponseException?) {
        // Handle authentication errors
    }
})

Launch the Chat Interface

The Dialogs screen is the main entry point to the Android UI Kit. It displays the user’s conversations and provides access to the default chat experience.

Once launched, users can immediately begin creating conversations and exchanging messages using the built-in chat interface.

To see the Android UI Kit in a complete working application, explore the Android UI Kit Sample. It demonstrates the implementation covered in this tutorial and includes additional examples that you can use as a reference when building or customizing your own chat application.

You now have the QuickBlox Android UI Kit installed, connected to your application, and displaying the default chat interface.

Next Steps

Next, learn how to customize the UI Kit by changing colors, typography, and interface components to match your application’s branding.

Useful resources you may want to explore include:

• QuickBlox Android UI Kit source code — https://github.com/QuickBlox/android-ui-kit
• QuickBlox Android UI Kit documentation – https://docs.quickblox.com/ui-kits/android-uikit-overview
• QuickBlox Android UI Kit sample application – https://github.com/QuickBlox/quickblox-android-sdk/tree/master/android-ui-kit-sample
• QuickBlox Android SDK documentation — https://docs.quickblox.com/sdks/android-quick-start
• QuickBlox Android SDK  and code samples on GitHub — https://github.com/QuickBlox/quickblox-android-sdk
• QuickBlox Developer Discord Community — https://discord.com/invite/3cKRunq8ZZ
• QuickBlox Support — https://help.quickblox.com/