UI Components - CometChat Docs

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.

1. 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.

android {
		defaultConfig {
			...

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

Make sure that the above code snippet is added after onSuccess of CometChat login

2. CometChatConversationList

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

Usage

In your layout file (.xml file) add the following snippet to use the CometChatConversationList. 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 CometChatConversationList

To 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(object : OnItemClickListener<Any(){
    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
        super.OnItemLongClick(t, position)

    }
})

3. 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 file (.xml file) 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 CometChatUserList

To 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(object : OnItemClickListener<Any>() {

    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
    super.OnItemLongClick(t, position)
    }
    })

4. 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 CometChatGroupList

To 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(object : OnItemClickListener<Any>() {

    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
        super.OnItemLongClick(t, position)
    }
})

5. 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. Add a FrameLayout in your layout.xml

<FrameLayout
    android:id="@+id/chatFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

In your activity set the required parameter in the following manner.

val bundle = Bundle()
bundle.putString(UIKitContracts.IntentStrings.AVATAR, "AvatarUrl")
bundle.putString(UIKitContracts.IntentStrings.NAME,"Name")
bundle.putString(UIKitContracts.IntentStrings.TYPE,CometChatConstants.RECEIVER_TYPE_USER)
bundle.putString(UIKitContracts.IntentStrings.UID,"UID")
bundle.putString(UIKitContracts.IntentStrings.STATUS,"STATUS")
fragment.arguments = bundle
supportFragmentManager.beginTransaction().replace(R.id.ChatFragment, fragment).commit()

6 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 file (.xml file)

<fragment
    android:id="@+id/callListScreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.cometchat.pro.uikit
.ui_components.calls.call_list.CometChatCallList"
/>

7. 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 file (.xml file)

<fragment
    android:id="@+id/userInfo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.cometchat.pro.uikit
.ui_components.userprofile.CometChatUserProfile"
/>

8. 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.

8.1. 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.

val avatar: CometChatAvatar = findViewById(R.id.av_user)
userViewHolder.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

CometChat Avatar class provides functionality for an Avatar feature. There are commonly used properties to control the look of the Avatar.

CometChatAvatar field element	Relevant attributes/methods
Avatar Shape	app:avatar_shape
Avatar	app:avatar`# setAvatar(@NonNull User)`# setAvatar(@NonNull Group)`# setAvatar(@NonNull String)`# setAvatar(@NonNull Drawable, @NonNull String)
Avatar Initial	app:avatar_initials“# setInitials(@NonNull String)
Border Color	app:border_color
Border Width	app:border_width

8.2. 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.

val userPresence: CometChatUserPresence = findViewById(R.id.statusIndicator)
userViewHolder.statusIndicator.setUserStatus(user.status)

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 element	Relevant attributes/methods
User Status	app:user_status``# setUserStatus(@NonNull String)

8.3. 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/badgeCount"
        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.

val badgeCount: CometChatBadgeCount = findViewById(R.id.badgecount)
holder.badgeCount.messageCount.setCount(conversation.unreadMessageCount)

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/badgeCount"
    android:layout_width="wrap_content"
    app:count="@{conversation.unreadMessageCount}"
    android:layout_height="wrap_content"/>

CometChatBadgeCount field element	Relevant attributes/methods
Count	app:count``# setCount(int)
Count Size	app:count_size``# setCountSize(float)
Count Background Color	app:count_background_color``# setCountBackground(@ColorRes color)
Count Color	app:count_color``setCountSize(float)

8.4. 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/cometchatUserList"
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

val userList: ObservableArrayList<User> = ObservableArrayList<User>()
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. 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(object : CallbackListener<List<User>>() {
    public override fun onSuccess(list: List<User>) {
        Log.d(TAG, "User list received: " + list.size)
        userList.addAll(list)
        //update the ObservableArrayList here 
    }

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

Note About `CometChatUsers` Without DataBinding

If 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/cometchatUser"
android:layout_width="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
android:layout_height="match_parent" />

In your corresponding activity or fragment.

var cometChatUsers: CometChatUsers = findViewById(R.id.cometchatUsers);
cometChatUser.setUserList(list);
// 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 `setItemClickListener`

For getting the click event of CometChatUsers you can make use of setItemClickListener class.

cometChatUsers.setItemClickListener(object : OnItemClickListener<Any>() {

    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
        super.OnItemLongClick(t, position)
    }
})

Common Usage

The CometChatUser component provides different properties to control the behavior of CometChatUser view.

CometChatUser field elements	Relevant attributes/methods
Update List	`# setUserList(List<User>)`
Update	`# update (User)`
Remove	`# remove(String)`
Add	`# add(User)`

8.5. CometChatGroups

The CometChatGroups is a custom RecyclerView that helps you to display a list of groups.

Note About `CometChatGroups` Using With DataBinding

If 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 .

val groupList: ObservableArrayList<Group> = ObservableArrayList<Group>()
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. 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(object : CallbackListener<List<Group>>() {
    public override fun onSuccess(list: List<Group>) {
        Log.d(TAG, "Groups list fetched successfully: " + list.size);
        groupList.addAll(list)
        // update the ObservableArrayList here
    }

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

Note About `CometChatGroups` Without DataBinding

If 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/cometchatGroupList"
android:layout_width="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
android:layout_height="match_parent" />

In your corresponding activity or fragment

val cometChatGroups: CometChatGroups = findViewById(R.id.cometchatGroupList)
cometChatGroups.setGroupList(list)
// list: fetched using the GroupsRequestBuilder

You can refer to how to Retrieve Groups.

Note About Using `setItemClickListener`

For getting the click event of CometChatGroups you can make use of setItemClickListener class.

cometChatGroups.setItemClickListener(object : OnItemClickListener<Any>() {

    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
        super.OnItemLongClick(t, position)
    }
})

Common Usage

The CometChatGroups component provides different properties to control the behavior of CometChatGroups view. You can perform different operations like an update, remove, add, etc.

CometChatGroups field elements	Relevant attributes/methods
Update List	`# setGroupList(List<Group>)`
Update	`# update (Group)`
Remove	`# remove(String)`
Add	`# add(Group)`

8.6.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 DataBinding

If 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.

val conversationList: ObservableArrayList<Conversation> = 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 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(object : CallbackListener<List<Conversation>>() {
    override fun onSuccess(conversations: List<Conversation>) {
        // Handle list of conversations
        conversationList.addAll(conversations)
        // update ObservableArrayList list here
    }

    override fun onError(e: CometChatException) {
        // Handle failure
        Log.d(TAG, "onError: " + e.message)
    }
})

Note About `CometChatConversations` Without DataBinding

If 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/cometchatConversation"
    android:layout_width="match_parent"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    android:layout_height="match_parent" />

In your corresponding activity or fragment

val 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 `setItemClickListener`

For getting the click event of CometChatConversations you can make use of the ConversationItemClickListener class.

cometChatConversations.setItemClickListener(object : OnItemClickListener<Any>() {

    override fun OnItemClick(t: Any, position: Int) {

    }
    override fun OnItemLongClick(t: Any, position: Int) {
        super.OnItemLongClick(t, 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 elements	Relevant attributes/methods
Update List	`# setConversationList(List<Conversation>)`
Update	`# update (Conversation)`
Remove	`# remove(Conversation)`
Add	`# add(Conversation)`

8.7. 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.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

val cometChatCalls: CometChatCalls = findViewById(R.id.cometchatCalls);

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 = MessagesRequestBuilder().setCategory(CometChatConstants.CATEGORY_CALL).setLimit(30).build()
}
messagesRequest.fetchPrevious(object : CallbackListener<List<BaseMessage>>() {
    override fun onSuccess(baseMessages: List<BaseMessage>) {
        /*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 fun onError(e: CometChatException) {
        //Error Message 
        Log.e("onError: ", e.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(object : OnItemClickListener<Call?>() {
    override fun OnItemClick(t: Any, position: Int) {
        // 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(object : OnItemClickListener<Call>() {
    override fun OnItemClick(t: Any, position: Int) {
        // perform your action here
    }
})

Common Usage:

The CometChatCalls component provides different properties to control the behavior of the CometChatCalls view. You can perform different operations like an update, remove.

CometChatCalls field e	Relevant attributes/methods
Update List	setCallList(List)
Update	update (Call)
Remove	remove(Call)

​1. CometChatUI

​2. CometChatConversationList

​Usage

​Note About setItemClickListener on CometChatConversationList

​3. CometChatUserList

​Usage

​Note About setItemClickListener on CometChatUserList

​4. CometChatGroupList

​Usage

​Note About setItemClickListener on CometChatGroupList

​5. CometChatMessageList

​Usage

​6 CometChatCallList

​Usage

​7. CometChatUserProfile

​Usage

​8. Shared

​8.1. CometChatAvatar

​Usage

​Common Features

​8.2. CometChatUserPresence

​Usage

​Common Features

​8.3. CometChatBadgeCount

​Common Feature

​8.4. CometChatUsers

​Note about CometChatUsers using with DataBinding:

​Note About CometChatUsers Without DataBinding

​Note About Using setItemClickListener

​Common Usage

​8.5. CometChatGroups

​Note About CometChatGroups Using With DataBinding

​Note About CometChatGroups Without DataBinding

​Note About Using setItemClickListener

​Common Usage

​8.6.CometChatConversations

​Note about CometChatConversations using with DataBinding

​Note About CometChatConversations Without DataBinding

​Note About Using setItemClickListener

​Common Usage

​8.7. CometChatCalls

​Note About Using CallItemClickListener:

​Common Usage:

1. CometChatUI

2. CometChatConversationList

Usage

Note About `setItemClickListener` on CometChatConversationList

3. CometChatUserList

Usage

Note About `setItemClickListener` on CometChatUserList

4. CometChatGroupList

Usage

Note About `setItemClickListener` on CometChatGroupList

5. CometChatMessageList

Usage

6 CometChatCallList

Usage

7. CometChatUserProfile

Usage

8. Shared

8.1. CometChatAvatar

Usage

Common Features

8.2. CometChatUserPresence

Usage

Common Features

8.3. CometChatBadgeCount

Common Feature

8.4. CometChatUsers

Note about `CometChatUsers` using with DataBinding:

Note About `CometChatUsers` Without DataBinding

Note About Using `setItemClickListener`

Common Usage

8.5. CometChatGroups

Note About `CometChatGroups` Using With DataBinding

Note About `CometChatGroups` Without DataBinding

Note About Using `setItemClickListener`

Common Usage

8.6.CometChatConversations

Note about `CometChatConversations` using with DataBinding

Note About `CometChatConversations` Without DataBinding

Note About Using `setItemClickListener`

Common Usage

8.7. CometChatCalls

Note About Using `CallItemClickListener`:

Common Usage: