UI Components are building a block of the UI Kit. UI Components are a set of custom classes specially designed to build a feature-rich chat app. To achieve high customizability while building an app one can use the UI Components. There are different UI Components available in the UI Kit library.

​
CometChatUI

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your mobile application.
CometChatUI is an Activity class, so you can launch CometChatUI using the below code snippet Make sure to add the following code snippet after onSuccess of CometChat login. 
startActivity(new Intent(this, CometChatUI.java))   
//Replace "this" with Activity Ex: MainActivity.this
Make sure that the above code snippet is added after onSuccess of CometChat login.

​
CometChatConversationList

The CometChatConversationList is Fragment which will help you to display list of recent conversations. The Fragment has all the necessary listeners and methods required to display the list of conversations.

​
Usage

In your layout.xml add the following snippet to use the CometChatConversationListScreen.Adding the following code snippet will give you a fully working list of conversations. 
<fragment
android:id="@+id/conversationList"
android:layout_width="match_parent"
android:layout_height="match_parent"
class=" com.cometchat.pro.uikit.
ui_components.chats.CometChatConversationList "
/>
Note About setItemClickListener on CometChatConversationListTo get the click event of the list you must use setItemClickListener. The setItemClickListener has OnItemClick() to handle single click and OnItemLongClick() to handle long click events.
CometChatConversationList.setItemClickListener(new OnItemClickListener<Conversation>()
        {
            @Override
            public void OnItemClick(Conversation conversation, int position) {
            	//Perform Your Action
            }

            @Override
            public void OnItemLongClick(Conversation var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
CometChatUserList

The CometChatUserList is a fragment with a List of users. The Fragment has all the necessary listeners and methods required to display the user’s list.

​
Usage

In your layout.xml add the following snippet to use the CometChatUserList. Adding the following code snippet will give you a fully working list of users. 
<fragment
android:id="@+id/userList"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.cometchat.pro.uikit
.ui_components.users.user_list.CometChatUserList"
/>
Note About setItemClickListener on CometChatUserListTo get the click event of the list you must use setItemClickListener. The setItemClickListener has OnItemClick() to handle single click and OnItemLongClick() to handle long click events.
CometChatUserList.setItemClickListener(new OnItemClickListener<User>()
        {
            @Override
            public void OnItemClick(User user, int position) {
            		//Perform Your Action
            }

            @Override
            public void OnItemLongClick(User var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
CometChatGroupList

The CometChatGroupList is a fragment with a List of groups Fragment has all the necessary listeners and methods required to display the list of groups

​
Usage

In your layout.xml add the following snippet to use the CometChatGroupList.Adding the following code snippet will give you a full working list of groups. 
<fragment
android:id="@+id/groupList"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.cometchat.pro.uikit
.ui_components.groups.group_list.CometChatGroupList"
/>
Note About setItemClickListener on CometChatGroupListTo get the click event of the list you must use setItemClickListener. The setItemClickListener has OnItemClick() to handle single click and OnItemLongClick() to handle long click events.
CometChatGroupList.setItemClickListener(new OnItemClickListener<Group>()
        {
            @Override
            public void OnItemClick(Group group, int position) {
            			//Perform your action
            }

            @Override
            public void OnItemLongClick(Group var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
CometChatMessageList

CometChatMessageList is a fragment that consists of send and received messages. It is capable of sending and receiving different types of messages such as text, image, and documents.

​
Usage

To use CometChatMessageList follow the below code snippets. CometChatMessageList is a dynamic so it will require some arguments. Launch CometChatChatMessageListActivity using below code and pass the required parameters in intent. 
Intent intent = new Intent(YOURACTIVITY.this, CometChatMessageListActivity.class);
intent.putExtra(UIKitConstants.IntentStrings.UID, user.getUid());
intent.putExtra(UIKitConstants.IntentStrings.AVATAR, user.getAvatar());
intent.putExtra(UIKitConstants.IntentStrings.STATUS, user.getStatus());
intent.putExtra(UIKitConstants.IntentStrings.NAME, user.getName());
intent.putExtra(UIKitConstants.IntentStrings.LINK,user.getLink());
intent.putExtra(UIKitConstants.IntentStrings.TYPE, CometChatConstants.RECEIVER_TYPE_USER);
startActivity(intent);

​
CometChatCallList

You can use the CometChatCallList to get a list of all the calls made by the logged-in user to other users and groups.

​
Usage

Add the following code in your layout.xml 
<fragment
android:id="@+id/groupList"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.cometchat.pro.uikit
.ui_components.groups.group_list.CometChatGroupList"
/>

​
CometChatUserProfile

CometChatUserProfile is a fragment which provides detail about the currently logged-in user in the CometChat.

​
Usage

Add the following code in your layout.xml 
<fragment
android:id="@+id/userInfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.cometchat.pro.uikit
.ui_components.userprofile.CometChatUserProfile"
/>

​
Shared

There are certain core components that are being used everywhere in uiKit library. You will find those components in shared folder under ui_components. Below are core components that are being used in uiKit library.

​
CometChatAvatar

This is an image view customize only to display Avatar. This view can be used with image URLs as well as with CometChat objects like User and Group

​
Usage

In your layout.xml add the following code snippet. 
<com.cometchat.pro.uikit.ui_components.shared.cometchatAvatar.CometChatAvatar
            android:id="@+id/av_user"
            android:layout_width="60dp"
            app:avatar_shape="@string/circle"
            android:layout_height="60dp" />
Here avatar_shape is a static property. It should be either circle or rectangle. whereas the avatar URL needs to be set dynamically following is the sample code for the same. 
CometChatAvatar avatar = findViewById(R.id.av_user);
avatar.setAvatarUrl("https://randomuser.me/api/portraits/women/44.jpg");
The CometChatAvatar Component works well with CometChat User and Group object. The setAvatar() method accepts User or Group object if Avatar of User or Group is not available it automatically show the initials of the user or group name as a placeholder Avatar.

​
Common Features

CometChatAvatar class provides functionality for an Avatar feature. There are commonly used properties to control the look of the Avatar.
CometChatAvatar field elementRelevant attributes/methods
Avatar Shapeapp:avatar_shape
Avatarapp:avatar Method
- setAvatar(@NonNull User)
- setAvatar(@NonNull Group)
- setAvatar(@NonNull String)
- setAvatar(@NonNull Drawable, @NonNull String)
Avatar Initialapp:avatar_initials
Method
- setInitials(@NonNull String)
Border Colorapp:border_color
Border Widthapp:border_width

​
CometChatUserPresence

This view will be used to show the user status if the user is online or offline. This view will take user status and display the color accordingly.

​
Usage

In your layout.xml add the following code 
<com.cometchat.pro.uikit.ui_components.shared.cometchatUserPresence.CometChatUserPresence
            android:id="@+id/statusIndicator"
            android:layout_width="15dp"
            android:layout_height="15dp"
            app:user_status="@string/offline"
            />
User status can be set dynamically using the following code. 
CometChatUserPresence userPresence = findViewById(R.id.statusIndicator);
userPresence.setUserStatus(user.getStatus());

​
Common Features

CometChatUserPresence provides app:user_status attribute and method setUserStatus to set Status of the user. The app:user_status attribute can also be used with DataBinding in the following manner e.g app:user_status="@{user.status}" you can also use different objects according to their use case. The attribute will continue to work as long as receives a string parameter
CometChatUserPresence field elementRelevant attributes/methods
User Statusapp:user_status <br /><br />**Method** - setUserStatus(@NonNull String)

​
CometChatBadgeCount

The CometChatBadgeCount component can be used to show an unread count. You can use it in different scenarios according to their use case.
Add the following code to your layout.xml 
<com.cometchat.pro.uikit.ui_components.shared.cometchatBadgeCount.CometChatBadgeCount
                android:id="@+id/messageCount"
                android:layout_width="wrap_content"
                app:count="2"
                android:layout_height="wrap_content"/>
The count can be set dynamically using the setCount method. The setCount method takes an int as a parameter. 
CometChatBadgeCount badgeCount = findViewById(R.id.badgecount);
badgeCount.messageCount.setCount(conversation.getUnreadMessageCount());

​
Common Feature

The CometChatBadgeCount component provides different attributes and methods to control the behavior and appearance of the BadgeCount view. The attribute app: count can also be used with DataBinding 
/// example with conversation object
    
    <com.cometchat.pro.uikit.ui_components.shared.cometchatBadgeCount.CometChatBadgeCount
                android:id="@+id/messageCount"
                android:layout_width="wrap_content"
                app:count="@{conversation.unreadMessageCount}"
                android:layout_height="wrap_content"/>
CometChatBadgeCount field elementRelevant attributes/methods
Countapp:count
Method
- setCount(int)
Count Sizeapp:count_size
Method
- setCountSize(float)
Count Background Colorapp:count_background_color
Method
- setCountBackground(@ColorRes color)
Count Colorapp:count_color
Method
- setCountSize(float)

​
CometChatUsers

The CometChatUsers is custom RecyclerView which helps to display a list of users present in your CometChat app.
Note about CometChatUsers using with DataBinding:Your project should have DataBinding enabled. You can use CometChatUsers using DataBinding in the following manner
In your layout.xml add the following code : 
<data>
            <import type="androidx.recyclerview.widget.LinearLayoutManager"/>
            <import type="androidx.databinding.ObservableList"/>
            <import type="com.cometchat.pro.models.User"/>
    
            <variable
                name="userList"
                type="ObservableList<User>" />
    
        </data>
    
        <com.cometchat.pro.uikit.ui_components.shared.cometchatUsers.CometChatUsers
            android:id="@+id/cometchatUsers"
            android:layout_width="match_parent"
            app:userlist="@{userList}"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" 
            android:layout_height="match_parent" />
In your corresponding activity or fragment add the following code 
ObservableArrayList<User> userList=new ObservableArrayList<>();
binding.setUserList(userList);
For getting the list of users you can use UsersRequestBuilder(). Visit the below link for more details on how to retrieve a list of users. Documentation Retrive Users -Learn how to fetch various types of users. In onSuccess of the fetchNext method you can set the data the ObservableArrayList you have created. The advantage of using the ObservableArrayList is one doesn’t have to manually set the data on binding.setUserList(userList); every time you get a new set of data. 
usersRequest.fetchNext(new CometChat.CallbackListener<List<User>>() {
      @Override
    public void onSuccess(List <User> list) {
      Log.d(TAG, "User list received: " + list.size());
          userList.addAll(list);
        //update the ObservableArrayList here 
      }
    @Override
    public void onError(CometChatException e) {
     Log.d(TAG, "User list fetching failed with exception: " + e.getMessage());
      }
    });
Note About CometChatUsers Without DataBindingIf you are not using DataBinding in your project you can use the CometChatUser in the following manner.
In your layout.xml add the following code 
<com.cometchat.pro.uikit.ui_components.shared.cometchatUsers.CometChatUsers
      android:id="@+id/cometchatUsers"
      android:layout_width="match_parent"    
      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" 
      android:layout_height="match_parent" />
In your corresponding activity or fragment. 
CometChatUsers cometChatUsers=findViewById(R.id.cometchatUsers);
cometChatUsers.setUserList(list);
    // list: fetched using the UsersRequestBuilder
// list: fetched using the UsersRequestBuilder
To get the list of users you can use UsersRequestBuilder(). Visit the link below for more details on Retrieve Users
Note About Using setItemClickListenerFor getting the click event of CometChatUsers you can make use of setItemClickListener class.
cometChatUsers.setItemClickListener(new OnItemClickListener<User>() {

            @Override
            public void OnItemClick(User var, int position) {
                
            }

            @Override
            public void OnItemLongClick(User var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
Common Usage

The CometChatUsers component provides different properties to control the behavior of CometChatUsers view.
CometChatUsers field elementsRelevant attributes/methods
Update List- setUserList(List<User>)
Update- update (User)
Remove- remove(String)
Add- add(User)

​
CometChatGroups

The CometChatGroups is a custom RecyclerView that helps you to display a list of groups.
Note About CometChatGroups Using With DataBindingIf you are using DataBinding in your project you can use the CometChatGroups in the following manner.
In your layout.xml add the following code snippet 
<data>
    
            <import type="androidx.recyclerview.widget.LinearLayoutManager"/>
            <import type="androidx.databinding.ObservableList"/>
            <import type="com.cometchat.pro.models.Group"/>
    
            <variable
                name="groupList"
                type="ObservableList<Group>" />
    
        </data>
    
        <com.cometchat.pro.uikit.ui_components.shared.cometchatGroups.CometChatGroups
            android:id="@+id/cometchatGroupList"
            android:layout_width="match_parent"
            app:grouplist="@{groupList}"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_height="match_parent" />
In your corresponding activity or fragment . 
ObservableArrayList<Group> groupList=new ObservableArrayList<>();
binding.setGroupList(groupList);
For getting the list of groups you can use GroupsRequestBuilder().Visit the below link for more details on how to retrieve a list of group. DocumentationRetrive Groups -Learn how to fetch various types of groups. In onSuccess of the fetchNext method you can set the data the ObservableArrayList you have created. The advantage of using the ObservableArrayList is one doesn’t have to manually set the data on binding.setGroupList(groupList); every time you get a new set of data. 
groupsRequest.fetchNext(new CometChat.CallbackListener<List<Group>>() {
      @Override
      public void onSuccess(List <Group> list) {
        Log.d(TAG, "Groups list fetched successfully: " + list.size());
            groupList.addAll(list);
         // update the ObservableArrayList here
    
      }
      @Override
      public void onError(CometChatException e) {
        Log.d(TAG, "Groups list fetching failed with exception: " + e.getMessage());
      }
    });
Note About CometChatGroups Without DataBindingIf you are not using DataBinding in your project you can use the CometChatGroups in the following manner.
In your layout.xml add the following code 
<com.cometchat.pro.uikit.ui_components.shared.cometchatGroups.CometChatGroups
            android:id="@+id/cometchatGroups"
            android:layout_width="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_height="match_parent" />
In your corresponding activity or fragment 
CometChatGroups cometChatGroups = findViewById(R.id.cometchatGroups);
cometChatGroups.setGroupList(list);
    // list: fetched using the GroupsRequestBuilder
You can refer to how to Retrieve Groups.
Note About Using setItemClickListenerFor getting the click event of CometChatGroups you can make use of setItemClickListener class.
cometChatGroups.setItemClickListener(new OnItemClickListener<Group>() {
            @Override
            public void OnItemClick(Group var, int position) {

            }

            @Override
            public void OnItemLongClick(Group var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
Common Usage

The CometChatGroupList component provides different properties to control the behavior of CometChatGroupList view. You can perform different operations like an update, remove, add, etc.
CometChatGroups field elementsRelevant attributes/methods
Update List- setGroupList(List<Group>)
Update- update (Group)
Remove- remove(String)
Add- add(Group)

​
CometChatConversations

CometChatConversations is a custom RecyclerView which will help you to display a list of all the users and groups in which the logged-in user has made any conversation.
Note about CometChatConversations using with DataBindingIf you are using DataBinding in your project you can use the CometChatConversations in the following manner.
In your layout.xml add the following code. 
<data>
    
            <import type="androidx.recyclerview.widget.LinearLayoutManager"/>
            <import type="androidx.databinding.ObservableList"/>
            <import type="com.cometchat.pro.models.Conversation"/>
    
            <variable
                name="conversationList"
                type="ObservableList<Conversation>" />
    
        </data>
    
        <com.cometchat.pro.uikit.ui_components.shared.cometchatConversations.CometChatConversations
            android:id="@+id/cometchatConversationList"
            android:layout_width="match_parent"
            app:conversationlist="@{conversationList}"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_height="match_parent" />
In your corresponding activity or fragment. 
ObservableArrayList<Conversation> conversationList=new ObservableArrayList<>();
binding.setConversationList(conversationList);
For getting the list of conversation you can use ConversationsRequestBuilder() .visit the below link for more details on how to retrieve a list of conversation Documentation Retrive Conversations -Learn how to build a recent chats list using conversations. In onSuccess of the fetchNext method you can set the data the ObservableArrayList you have created. The advantage of using the ObservableArrayList is one doesn’t have to manually set the data on binding.setConversationList(conversationList); every time you get a new set of data. 
conversationsRequest.fetchNext(new CometChat.CallbackListener<List<Conversation>>() {
  @Override
    public void onSuccess(List<Conversation> conversations) {
       // Handle list of conversations
        conversationList.addAll(conversations); 
    // update ObservableArrayList list here
  }

  @Override
    public void onError(CometChatException e) {
    // Handle failure
  }
});
Note About CometChatConversations Without DataBindingIf you are not using DataBinding in your project you can use the CometChatConversations in the following manner.
In your layout.xml add the following code 
<com.cometchat.pro.uikit.ui_components.shared.cometchatConversations.CometChatConversations
            android:id="@+id/cometchatConversations"
            android:layout_width="match_parent"     
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_height="match_parent" />
In your corresponding activity or fragment 
CometChatConversations cometChatConversations = findViewById(R.id.cometchatConversations);
cometChatConversationList.setConversationList(conversations);
    // list: fetched using the ConversationsRequestBuilder
In onSuccess of the fetchNext method of ConversationsRequestBuilder, you can set the data. You can refer how to Retrieve Conversations
Note About Using setItemClickListenerFor getting the click event of CometChatConversations you can make use of the ConversationItemClickListener class.
cometChatConversations.setItemClickListener(new OnItemClickListener<Conversation>() {
            @Override
            public void OnItemClick(Conversation var, int position) {

            }

            @Override
            public void OnItemLongClick(Conversation var, int position) {
                super.OnItemLongClick(var, position);
            }
        });

​
Common Usage

The CometChatConversations component provides different properties to control the behavior of the CometChatConversations view. You can perform different operations like an update, remove, add, etc
CometChatConversations field elementsRelevant attributes/methods
Update List- setConversationList(List<Conversation>)
Update- update (Conversation)
Remove- remove(Conversation)
Add# add(Conversation)

​
CometChatCalls

CometChatCalls is custom RecyclerView which will help you to display list of calls.
You can use the CometChatCalls in the following manner. In your layout.xml add the following code : 
<com.cometchat.pro.uikit.ui_components.shared.cometchatCalls.CometChatCalls
        android:id="@+id/cometchatCalls"
        android:layout_width="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:layout_height="match_parent" />
In your corresponding activity or fragment 
CometChatCalls cometChatCalls = findViewById(R.id.cometchatCallList);
In onSuccess of the fetchNext method of MessagesRequestBuilder you can set the data. You need to add setCategory(CometChatConstants.CATEGORY_CALL) in your MessagesRequestBuilder to fetch only call messages You can refer an example here. 
if (messagesRequest == null)
{
    messagesRequest = new MessagesRequest.MessagesRequestBuilder().setCategory(CometChatConstants.CATEGORY_CALL).setLimit(30).build();
}
messagesRequest.fetchPrevious(new CometChat.CallbackListener<List<BaseMessage>>() {
  @Override
  public void onSuccess(List<BaseMessage> baseMessages) {
    /*Since the call list received like messages i.e top with older and 
    bottom with the latest message. We will reverse the list */
    Collections.reverse(baseMessages);
    cometCallList.setCallList(baseMessages);
  }
  @Override
    public void onError(CometChatException e) {
    //Error Message 
  });
Note About Using CallItemClickListener:For getting the click event of CometChatCalls you can make use of ItemClickListener class.
There are two events given by CometChatCalls. This event is performed when clicking on the User or Group item displayed in the call list. 
cometChatCalls.setItemClickListener(new OnItemClickListener<Call>() {
        @Override
        public void OnItemClick(Call var, int position) {
          // perform your action here
      	}
});
This event is performed when click on call icon visible after each Group or User item in call list. 
cometChatCalls.setItemCallClickListener(new OnItemClickListener<Call>() {
       @Override
       public void OnItemClick(Call var, int position) {
                        // perform your action here
       }
});

​
Common Usage:

The CometChatCallList component provides different properties to control the behavior of the CometChatCallList view. You can perform different operations like an update, remove.
CometChatCalls field eRelevant attributes/methods
Update ListsetCallList(List<Call>)
Updateupdate(Call)
Removeremove(Call)