> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Building A Messaging UI With Tabs, Sidebar, And Message View
This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation.
***
## **User Interface Preview**
This layout consists of:
1. **Sidebar (Conversation List)** – Displays recent conversations with active users and groups.
2. **Message View** – Shows the selected chat with real-time messages.
3. **Message Input Box** – Allows users to send messages seamlessly.
***
## **Step-by-Step Guide**
### **Step 1: Create a Tab Component**
To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
#### **Folder Structure**
Create a `TabbedActivity` inside your `src` directory and add the following files:
```txt theme={null}
src/main/java/your-package-name/
├── TabbedActivity.kt
├── ChatsFragment.kt
├── CallLogsFragment.kt
├── UsersFragment.kt
├── GroupsFragment.kt
src/main/java/your-package-name/
├── res/
│ ├── layout/
│ │ ├── activity_tabbed.xml
│ │ ├── fragment_chats.xml
│ │ ├── fragment_call_logs.xml
│ │ ├── fragment_users.xml
│ │ └── fragment_groups.xml
│ └── menu/
│ └── bottom_nav_menu.xml
```
#### **Download the Icons**
These icons are available in the **CometChat UI Kit res folder**. You can find them at:\
🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java/src/main/res/drawable)
#### **Implementation**
```kotlin TabbedActivity.kt theme={null}
import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
class TabbedActivity : AppCompatActivity() {
private lateinit var bottomNavigationView: BottomNavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_tabbed)
setupWindowInsets()
initViews()
setupNavigation(savedInstanceState)
}
private fun setupWindowInsets() {
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
insets
}
}
private fun initViews() {
bottomNavigationView = findViewById(R.id.bottomNavigationView)
}
private fun setupNavigation(savedInstanceState: Bundle?) {
bottomNavigationView.setOnItemSelectedListener { item ->
val fragment = createFragmentForNavItem(item.itemId)
replaceFragment(fragment)
true
}
// Set default fragment only when activity is first created
if (savedInstanceState == null) {
replaceFragment(ChatsFragment())
bottomNavigationView.selectedItemId = R.id.nav_chats
}
}
private fun createFragmentForNavItem(itemId: Int): Fragment {
return when (itemId) {
R.id.nav_chats -> ChatsFragment()
R.id.nav_call_logs -> CallLogsFragment()
R.id.nav_users -> UsersFragment()
R.id.nav_groups -> GroupsFragment()
else -> ChatsFragment()
}
}
private fun replaceFragment(fragment: Fragment) {
supportFragmentManager.beginTransaction()
.replace(R.id.fragmentContainer, fragment)
.commit()
}
}
```
```java TabbedActivity.java theme={null}
import android.os.Bundle;
import android.view.View;
import android.view.WindowInsets;
import android.view.WindowInsetsController;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.fragment.app.Fragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class TabbedActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
enableEdgeToEdge(); // Optional depending on your implementation
setContentView(R.layout.activity_tabbed);
setupWindowInsets();
initViews();
setupNavigation(savedInstanceState);
}
private void enableEdgeToEdge() {
// This is equivalent to enableEdgeToEdge() in Kotlin
getWindow().setDecorFitsSystemWindows(false);
}
private void setupWindowInsets() {
View main = findViewById(R.id.main);
ViewCompat.setOnApplyWindowInsetsListener(main, (v, insets) -> {
WindowInsetsCompat systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
}
private void initViews() {
bottomNavigationView = findViewById(R.id.bottomNavigationView);
}
private void setupNavigation(Bundle savedInstanceState) {
bottomNavigationView.setOnItemSelectedListener(item -> {
Fragment fragment = createFragmentForNavItem(item.getItemId());
replaceFragment(fragment);
return true;
});
// Set default fragment only when activity is first created
if (savedInstanceState == null) {
replaceFragment(new ChatsFragment());
bottomNavigationView.setSelectedItemId(R.id.nav_chats);
}
}
private Fragment createFragmentForNavItem(int itemId) {
switch (itemId) {
case R.id.nav_chats:
return new ChatsFragment();
case R.id.nav_call_logs:
return new CallLogsFragment();
case R.id.nav_users:
return new UsersFragment();
case R.id.nav_groups:
return new GroupsFragment();
default:
return new ChatsFragment();
}
}
private void replaceFragment(Fragment fragment) {
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragmentContainer, fragment)
.commit();
}
}
```
```xml activity_tabbed.xml theme={null}
```
```xml res/menu/bottom_nav_menu.xml theme={null}
```
```xml res/menu/ic_chats.xml theme={null}
```
```xml res/menu/ic_calls.xml theme={null}
```
```xml res/menu/ic_user.xml theme={null}
```
```xml res/menu/ic_group.xml theme={null}
```
You must use an activity that supports the **lifecycle** API, such as:
* `AppCompatActivity`
* `ComponentActivity`
* `FragmentActivity`
This is necessary to properly manage the **UI Kit's lifecycle events**.
***
### **Step 3: Create Fragments for Chat, Calls, Users and Groups**
#### Chats Fragment
```kotlin ChatsFragment.kt theme={null}
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
class ChatsFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_chats, container, false)
}
}
```
```java ChatsFragment.java theme={null}
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class ChatsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_chats, container, false);
}
}
```
```xml res/layout/fragment_chats.xml theme={null}
```
#### Call Logs Fragment
Make sure you’ve added the Calls SDK dependency to enable voice and video calling features.
```kotlin CallLogsFragment.kt theme={null}
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
class CallLogsFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_call_logs, container, false)
}
}
```
```java CallLogsFragment.java theme={null}
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class CallLogsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_call_logs, container, false);
}
}
```
```xml res/layout/fragment_call_logs.xml theme={null}
```
#### Users Fragment
```kotlin UsersFragment.kt theme={null}
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
class UsersFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_users, container, false)
}
}
```
```java UsersFragment.java theme={null}
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class UsersFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_users, container, false);
}
}
```
```xml res/layout/fragment_users.xml theme={null}
```
#### Groups Fragment
```kotlin GroupsFragment.kt theme={null}
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
class GroupsFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_groups, container, false)
}
}
```
```java GroupsFragment.java theme={null}
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class GroupsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_groups, container, false);
}
}
```
```xml res/layout/fragment_groups.xml theme={null}
```
***
### **Step 3: Update MainActivity**
Update the `MainActivity` to navigate to the `MessageActivity`:
```kotlin MainActivity.kt theme={null}
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.enableEdgeToEdge
import com.cometchat.chat.core.CometChat
import com.cometchat.chat.exceptions.CometChatException
import com.cometchat.chat.models.User
import com.cometchat.chatuikit.shared.cometchatuikit.CometChatUIKit
import com.cometchat.chatuikit.shared.cometchatuikit.UIKitSettings
class MainActivity : ComponentActivity() {
private val TAG = "MainActivity"
private val appID = "APP_ID" // Replace with your App ID
private val region = "REGION" // Replace with your App Region
private val authKey = "AUTH_KEY" // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
private val uiKitSettings = UIKitSettings.UIKitSettingsBuilder()
.setRegion(region)
.setAppId(appID)
.setAuthKey(authKey)
.subscribePresenceForAllUsers()
.build()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
CometChatUIKit.init(this, uiKitSettings, object : CometChat.CallbackListener() {
override fun onSuccess(successString: String?) {
Log.d(TAG, "Initialization completed successfully")
loginUser()
}
override fun onError(e: CometChatException?) {}
})
}
private fun loginUser() {
CometChatUIKit.login("cometchat-uid-1", object : CometChat.CallbackListener() {
override fun onSuccess(user: User) {
// Launch Tab-Based Chat Experience (Chats, Calls, Users, Groups)
startActivity(Intent(this@MainActivity, TabbedActivity::class.java))
}
override fun onError(e: CometChatException) {
// Handle login failure (e.g. show error message or retry)
Log.e("Login", "Login failed: ${e.message}")
}
})
}
}
```
```java MainActivity.java theme={null}
package com.example.uikitsexamples;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import androidx.activity.ComponentActivity;
import com.cometchat.chat.core.CometChat;
import com.cometchat.chat.exceptions.CometChatException;
import com.cometchat.chat.models.User;
import com.cometchat.chatuikit.shared.cometchatuikit.CometChatUIKit;
import com.cometchat.chatuikit.shared.cometchatuikit.UIKitSettings;
public class MainActivity extends ComponentActivity {
private static final String TAG = "MainActivity";
private final String appID = "APP_ID"; // Replace with your App ID
private final String region = "REGION"; // Replace with your App Region
private final String authKey = "AUTH_KEY"; // Replace with your Auth Key
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setDecorFitsSystemWindows(false); // Equivalent to enableEdgeToEdge()
UIKitSettings uiKitSettings = new UIKitSettings.UIKitSettingsBuilder()
.setRegion(region)
.setAppId(appID)
.setAuthKey(authKey)
.subscribePresenceForAllUsers()
.build();
CometChatUIKit.init(this, uiKitSettings, new CometChat.CallbackListener() {
@Override
public void onSuccess(String success) {
Log.d(TAG, "Initialization completed successfully");
loginUser();
}
@Override
public void onError(CometChatException e) {
Log.e(TAG, "Initialization failed: " + (e != null ? e.getMessage() : "Unknown error"));
}
});
}
private void loginUser() {
CometChatUIKit.login("cometchat-uid-1", new CometChat.CallbackListener() {
@Override
public void onSuccess(User user) {
Log.d(TAG, "Login successful for user: " + user.getUid());
// Launch Tab-Based Chat Experience (Chats, Calls, Users, Groups)
startActivity(new Intent(MainActivity.this, TabbedActivity.class));
}
@Override
public void onError(CometChatException e) {
Log.e("Login", "Login failed: " + (e != null ? e.getMessage() : "Unknown error"));
}
});
}
}
```
***
## **Running the Project**
Once the components are configured, build and run the app:
```sh theme={null}
gradle build
```
Ensure you've added the necessary permissions and initialized CometChat in your `Application` class.
***
## **Next Steps**
### **Enhance the User Experience**
* **[Advanced Customizations](/ui-kit/android/theme-introduction)** – Personalize the chat UI to align with your brand.
***