The CometChat Android Kotlin UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

The UI Kit’s customizable UI components simplify the process of integrating text chat and voice/video calling features to your website or mobile application in a few minutes.

Installation steps

Prerequisites

Before you begin, ensure you have met the following requirements:
✅ You have Android Studio installed on your machine.
✅ You have an Android Device or Emulator with Android Version 6.0 or above.
✅ You have read CometChat Key Concepts.

Installing Android Kotlin Chat UI Kit

Setup

To install Android Kotlin UI Kit, you need to first register on CometChat Dashboard. Click here to sign up.

i. Get your Application Keys

• Create a new app
• Head over to the Quick Start or API & Auth Keys section and note the App ID, Auth Key, and Region.

ii. Add the CometChat Dependency

First, add the repository URL to the project level build.gradle file in the repositories block under the allprojects section.

allprojects {
  repositories {
    maven {
      url "https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"
    }
  }
}

Open the app level build.gradle file and

1. Add the below line in the dependencies section.

dependencies {
  implementation 'com.cometchat:pro-android-chat-sdk:2.3.5'
}

2. Add the below lines android section

android {
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

Configure CometChat inside your app

i. Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the onCreate() method of the Application class.

private val appID = "APP_ID"
private val region = "REGION"
val appSettings = AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build()
            
CometChat.init(this, appID, appSettings, object : CallbackListener<String>() {
    override fun onSuccess(successMessage: String) {
        Log.d(TAG, "Initialization completed successfully")
    }

    override fun onError(e: CometChatException) {
         Log.d(TAG, "Initialization failed with exception: "+e.message)
    }
})

🚧

Note

Make sure you replace the APP_ID with your CometChat APP ID and REGION with your app's REGION in the above code.

ii. Login User 👤

The login() method returns the User object containing all the information of the logged-in user.

private val UID = "SUPERHERO1" // Replace with the UID of the user to login
private val AUTH_KEY = "Enter AUTH_KEY" // Replace with your App Auth Key
CometChat.login(UID, AUTH_KEY, object : CallbackListener<User?>() {
    override fun onSuccess(user: User?) {
        Log.d(TAG, "Login Successful : "+user.toString())
}

    override fun onError(e: CometChatException) {
        Log.d(TAG, "Login failed with exception: " + e.message);
     }
})

🚧

Note

• Make sure you replace the AUTH_KEY with your CometChat AUTH Key in the above code.
• We have setup 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4 and SUPERHERO5.

Add the UI Kit Library

To integrate the UI Kit, please follow the steps below:

1. Clone the UI Kit-Kotlin Library from the android-kotlin-chat-ui-kit repository

2. Import uikit-kotlin Module from Module Settings. ( To know how to import uikit-kotlin as Module visit this link )

3. If the Library is added successfully, it will look like mentioned in the below image.

Configure UI Kit Library

🚧

Enable dataBinding

As the UI Kit uses dataBinding you must enable dataBinding

To configure your app to use data binding, add the dataBinding element to your build.gradle file in the app module, as shown in the following example:

android {
    ...
    dataBinding {
        enabled = true
    }
}

We are using File Provider for storage & file access. So you need to add your application package name in manifestPlaceholders

android {
    defaultConfig {
        manifestPlaceholders = [file_provider: "YOUR_PACKAGE_NAME"] 
        //add your application package.
    }
}

🚧

Add Theme.MaterialComponents

As UI Kit is using material components your app's theme should extend Theme.MaterialComponents. Follow the guide at Getting started with Material Components.

Make sure you add the below dependency to your app-level build.gradle file

dependencies {
  implementation 'com.google.android.material:material:1.2.0-alpha04'
}

The following is the list of Material Components themes you can use to get the latest component styles and theme-level attributes.

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

Update your app theme to inherit from one of these themes, e.g.:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
    
    <!-- Customize your theme here. -->

</style>

Launch CometChatUI

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In UI Kit all the UI Components are interlinked and work together to launch a fully functional chat on your mobile/application.

To use CometChatUI user has to launch CometChatUI Activity. Add the following code snippet to launch CometChatUI.

startActivity(Intent([email protected], CometChatUI::class.java))