> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Overview of Overview in CometChat.

Version: v2

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/TF_xZkrXqcO6WU3a/images/123a45a3-1623199936-38ff7714668d4876c04906702164dc7d.png?fit=max&auto=format&n=TF_xZkrXqcO6WU3a&q=85&s=1d546767784067f925687df73c144c75" width="652" height="268" data-path="images/123a45a3-1623199936-38ff7714668d4876c04906702164dc7d.png" />
</Frame>

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.

<CardGroup>
  <Card title="I want to checkout Kotlin Chat UI Kit">
    Follow the steps mentioned in the `README.md` file.

    Kindly, click on below button to download our Kotlin Chat UI Kit.

    [Kotlin Chat UI Kit](https://github.com/cometchat-pro/ui-kit/kotlin/archive/v2.zip)[View on Github](https://github.com/cometchat-pro/ui-kit/kotlin/tree/v2)
  </Card>

  <Card title="I want to explore the sample app">
    Import the app into Android Studio and follow the steps mentioned in the `README.md` file.

    Kindly, click on below button to download our Kotlin Sample App.

    [Kotlin Sample App](https://github.com/cometchat-pro/android-kotlin-chat-app/archive/v2.zip)

    [View on Github](https://github.com/cometchat-pro/android-kotlin-chat-app/tree/v2)
  </Card>
</CardGroup>

## **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 [Key Concepts](/ui-kit/kotlin/2.0/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.](https://app.cometchat.com/login)

#### **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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/jFxtGVgb6H4XYgC5/images/db42f485-1631635630-06b4f0f4b8570ca81cc5a0de591c1892.jpg?fit=max&auto=format&n=jFxtGVgb6H4XYgC5&q=85&s=b3fba33e6e5113080814614384acd247" width="973" height="375" data-path="images/db42f485-1631635630-06b4f0f4b8570ca81cc5a0de591c1892.jpg" />
</Frame>

#### **Add the CometChat Dependency**

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

```gradle theme={null}
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 two line in the `dependencies` section.

```gradle theme={null}
dependencies {
  implementation 'com.cometchat:pro-android-chat-sdk:2.4.1'
  implementation 'com.cometchat:pro-android-calls-sdk:2.1.0'
}
```

2. Add the below lines `android` section

```gradle theme={null}
android {
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}
```

### **Configure CometChat inside your app**

#### **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.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    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)
        }
    })
    ```
  </Tab>
</Tabs>

<Warning>
  Make sure you replace the APP\_ID with your CometChat `APP ID` and REGION with your app's `REGION` in the above code.
</Warning>

#### **Login User** 👤

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    private val UID = "cometchat-uid-1" // 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);
         }
    })
    ```
  </Tab>
</Tabs>

<Warning>
  * 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: `cometchat-uid-1`, `cometchat-uid-2`, `cometchat-uid-3`, `cometchat-uid-4` and `cometchat-uid-5`.
</Warning>

### **Add the UI Kit Library**

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

* Clone the UI Kit-Kotlin Library from the [android-kotlin-chat-ui-kit](https://github.com/cometchat-pro/ui-kit/kotlin) repository

[\*\*Download Kotlin UI Kit Library](https://github.com/cometchat-pro/ui-kit/kotlin/archive/v2.zip)

* Import `uikit-kotlin` Module from Module Settings.
* If the Library is added successfully, it will look like mentioned in the below image.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/H2Jrd_-HLEdrybSX/images/ef584b9f-1623199940-3ce2cb166efbbde43d01b53f7efe55ad.png?fit=max&auto=format&n=H2Jrd_-HLEdrybSX&q=85&s=1bbc09ebdeb10895fced6fb4f44d1401" width="462" height="511" data-path="images/ef584b9f-1623199940-3ce2cb166efbbde43d01b53f7efe55ad.png" />
</Frame>

### **Configure UI Kit Library**

<Warning>
  Enable dataBinding

  As the UI Kit uses dataBinding you must enable dataBinding
</Warning>

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:

```gradle theme={null}
android {
    ...
    dataBinding {
        enabled = true
    }
}
```

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

```gradle theme={null}
android {
    defaultConfig {
        manifestPlaceholders = [file_provider: "YOUR_PACKAGE_NAME"] 
        __add your application package.
    }
}
```

<Warning>
  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.
</Warning>

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

```gradle theme={null}
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.NoActionBar'`

`'Theme.MaterialComponents.Light.NoActionBar'`

`Theme.MaterialComponents.DayNight.NoActionBar`

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

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
        
        <!-- Customize your theme here. -->

    </style>
    ```
  </Tab>
</Tabs>

### **Launch CometChatUI** 🚀

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/p231kj41ev7n6i2F/images/6b355922-1631635742-5a4884008f5bcc93b68e2115adcd20b9.png?fit=max&auto=format&n=p231kj41ev7n6i2F&q=85&s=904cdd10c69cdcb8136e1ba052214731" width="4260" height="2800" data-path="images/6b355922-1631635742-5a4884008f5bcc93b68e2115adcd20b9.png" />
</Frame>

**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`.

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    startActivity(Intent(this@YourActivity, CometChatUI::class.java))
    ```
  </Tab>
</Tabs>

## **Checkout our sample app**

Visit our [Kotlin sample app](https://github.com/cometchat-pro/android-kotlin-chat-app/tree/v2) repository to run the Kotlin sample app