What is UI Kit

The UI Kit library is collection of custom UI Component and UI Screens design to build chat application within few minutes. UI kit is designed to avoid boilerplate code for building UI,it has three different ways to build a chat application with fully customizable UI.It will help developers to build a chat application within using various UI Components.

Setup

Follow the below metioned steps for easy setup and seamless integration with UI Kit

Get your Application Keys

Signup for CometChat and then:

• Create a new app
• Head over to the API Keys section and note the API_Key and App_ID (for Auth Only key)

---

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.bintray.com/cometchat/pro"
    }
  }
}

Then, add CometChat to the app level build.gradle file in the dependencies section.

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

Finally, add the below lines android section of the app level gradle file

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

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 String appID = "APP_ID";
private String region = "REGION";

AppSettings appSettings=new AppSettings.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();

CometChat.init(this, appID,appSettings, new CometChat.CallbackListener<String>() {
  @Override
  public void onSuccess(String successMessage) {
    Log.d(TAG, "Initialization completed successfully");
  }
  @Override
  public void onError(CometChatException e) {
    Log.d(TAG, "Initialization failed with exception: " + e.getMessage());
  }
});

Note : Make sure you replace the APP_ID with your CometChat App_ID and REGION with your app region in the above code.

Log in your User

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

private String UID = "SUPERHERO1";
private String API_KEY = "API_KEY";

CometChat.login(UID, API_KEY , new CometChat.CallbackListener<User>() {
  @Override
  public void onSuccess(User user) {
    Log.d(TAG, "Login Successful : " + user.toString());
  }
  @Override
  public void onError(CometChatException e) {
    Log.d(TAG, "Login failed with exception: " + e.getMessage());
  }
});

Note :

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

Add UI Kit to your project

After adding necessary dependancies inside you app to integrate UI Kit inside your app.Kindly follow the below steps:

1. Simply clone the UI Kit Library from android-chat-uikit repository.
2. Import uikit Module from Module Settings.
3. If the Library is added sucessfully, it will look like mentioned in the below image.

Launch UI Unified

Add the following code snippet in onSuccess of CometChat login.

startActivity(new Intent(YourActivity.this,CometChatUnified.class))

UI Unified is a way to launch a fully working chat application using the UI Kit .In UI Unified all the UI Screens and UI Components working together to give the full experience of a chat application with minimal coding effort.

Next Step

To read the full dcoumentation on UI Kit integration visit our Documentation

Troubleshooting

Facing any issues while integrating or installing the UI Kit please visit our forum.