Overview
CometChatDetails is a Composite Component that provides additional information and settings related to a specific group.
The details screen includes the following elements and functionalities:
- Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
- Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
- Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.

CometChatDetails component is composed of the following BaseComponents:
| Components | Description |
|---|---|
| CometChatListBase | CometChatListBase serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
Usage
Integration
CometChatDetails, as a component, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With banned members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.
The following code snippet exemplifies how you can seamlessly integrate the CometChatDetails component into your application.
Since CometChatDetails is a custom view, It can be launched by adding the following code snippet into the XML layout file.
- XML
- Java
- Kotlin
Actions
Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.1. SetOnError
You can customize this behavior by using the provided code snippet to override thesetOnError and improve error handling.
- Java
- Kotlin
2. AddOnBackPressListener
You can customize this behavior by using the provided code snippet to override theaddOnBackPressListener and improve error handling.
- Java
- Kotlin
Filters
Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.CometChatDetails component does not have available filters.
Events
Events are emitted by aComponent. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
Events emitted by the Group Details component is as follows.
| Events | Description |
|---|---|
ccGroupDeleted() | This will get triggered when the logged in user deletes a group |
ccGroupLeft() | This will get triggered when the logged in user leaves a group |
ccGroupMemberScopeChanged() | This will get triggered when the logged in user changes the scope of another group member |
ccGroupMemberBanned() | This will get triggered when the logged in user bans a group member from the group |
ccGroupMemberKicked() | This will get triggered when the logged in user kicks another group member from the group |
ccGroupMemberUnbanned() | This will get triggered when the logged in user unbans a user banned from the group |
ccGroupMemberJoined() | This will get triggered when the logged in user joins a group |
ccGroupMemberAdded() | This will get triggered when the logged in user add new members to the group |
ccOwnershipChanged | This will get triggered when the logged in user transfer the ownership of their group to some other member |
- Java
- Kotlin
- Java
- Kotlin
Customization
To fit your app’s design requirements, you can customize the appearance of the Details component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.Style
Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.1. Details Style
You can set theDetailsStyle to the CometChatDetails Component to customize the styling.
- Java
- Kotlin
CometChatDetails component
| Property | Description | Code |
|---|---|---|
| Background | Used to set background color | .setBackground(@ColorInt int) |
| Background | Used to set a gradient background | .setBackground(Drawable) |
| Border Width | Used to set border | .setBorderWidth(int) |
| Border Color | Used to set border color | .setBorderColor(@ColorInt int) |
| Corner Radius | Used to set corner radius | .setCornerRadius(double) |
| Title Appearance | Used to set style of the title in the app bar | .setTitleAppearance(@StyleRes int) |
| Close Icon Tint | Used to set the color of the back icon in the app bar | .setCloseIconTint(@ColorInt int) |
| Online Status Color | Used to set the color of the status indicator shown if a user is online | .setOnlineStatusColor(@ColorInt int) |
2. Avatar Style
To apply customized styles to theAvatar component in the Group Members Component, you can use the following code snippet. For further insights on Avatar Styles refer
- Java
- Kotlin
3. StatusIndicator Style
To apply customized styles to the Status Indicator component in the Group Member Component, You can use the following code snippet. For further insights on Status Indicator Styles refer- Java
- Kotlin
4. ListItem Style
To apply customized styles to theList Item component in the Group Member Component, you can use the following code snippet. For further insights on List Item Styles refer
- Java
- Kotlin
Functionality
These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.- Java
- Kotlin
CometChatDetails
| Property | Description | Code |
|---|---|---|
| User | Used to validate and fetch a list of available options for users | .setUser(User) |
| Group | Used to validate and fetch a list of available options for groups | .setGroup(Group) |
| Title | Used to set the title in the app bar | .setTitle(String) |
| Show Close Button | Used to toggle visibility for the back button | .showCloseButton(boolean) |
| Close Button Icon | Used to set the back button located in the app bar | .setCloseButtonIcon(@DrawableRes int) |
| Disable User Presence | Used to control visibility of the status indicator shown if a user is online | .disableUserPresence(boolean) |
| Private Group Icon | Used to set icon shown in place of status indicator for private group details | .setPrivateGroupIcon(@DrawableRes int) |
| Protected Group Icon | Used to set icon shown in place of status indicator for password protected group details | .setProtectedGroupIcon(@DrawableRes int) |
| Hide Profile | Hides view profile option for users | .hideProfile(boolean) |
Advanced
For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.SetMenu
You can set the Custom Menu view to add more options to the Groups component.- Java
- Kotlin
view_menu.xml as a custom view file. Which we will inflate and pass to .setMenu().
view_menu.xml
setMenu. You can get the child view reference and can handle click actions.
- Java
- Kotlin
YourActivity.java
SubtitleView
You can set your custom Subtitle view using the.setSubtitleView() method. But keep in mind, by using this you will override the default Subtitle view functionality.
- Java
- Kotlin

subtitle_layout.xml for more complex or unique list items.
Once this layout file is made, you would inflate it inside the createView() method. The inflation process prepares the layout for use in your application:
Following this, you would use the bindView() method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
subtitle_layout.xml
- Java
- Kotlin
YourActivity.java
SetCustomProfileView report
Tailor the custom profile view for each user item to suit your specific preferences and needs.- Java
- Kotlin
Example
- XML
custom_header_view
- Java
- Kotlin
Template and Options
TheCometChatDetailsOption is the class providing structure for options to be shown for users and group members
The CometChatDetailsTemplate offers a structure for organizing information in the CometChatDetails component. It serves as a blueprint, defining how group-related details are presented. This structure allows for customization and organization within the CometChat interface.
- Java
- Kotlin

- Java
- Kotlin
CometChatDetailsOption defines the structure for sections of options available in the CometChatDetails
| Properties | Type | Description |
|---|---|---|
| id | String | unique ID for the option |
| title | String | used to set title for the option |
| startIcon | @DrawableRes int | used to set start icon for the option |
| endIcon | @DrawableRes int | used to set end icon for the option |
| titleColor | @ColorInt int | used to set title color |
| titleFont | String | used to set title text font |
| titleAppearance | @StyleRes int | used to set style of the title text |
| startIconTint | @ColorInt int | set color of start icon |
| endIconTint | @ColorInt int | set color of end icon |
| onClick | OnDetailOptionClick | the action to perform on click of option |
| view | Function3<Context, User, Group, View> | to set a custom view for particular option |
CometChatDetailsTemplate defines the structure for sections of options available in the CometChatDetails
| Methods | Type | Description |
|---|---|---|
| setId | String | unique ID for the option |
| setTitle | String | a text to display below the icon |
| setTitleAppearance | @StyleRes int | used to set style of the text below the icon |
| setOptions | Function2<User, Group, List<CometChatDetailsOption>> | options available under each section |
| setSectionSeparatorColor | @ColorInt int | the color of the divider separating the sections of options |
| hideSectionSeparator | boolean | if true doesn’t show the divider separating the sections of options |
| setItemSeparatorColor | @ColorInt int | the color of the divider separating the each option |
| hideItemSeparator | @ColorInt int | if true doesn’t show the divider separating the each option |
Configurations
Configurations offer the ability to customize the properties of each component within a Composite Component. CometChatDetails hasAdd Members, Banned Members, Transfer Ownership and Group Members component. Hence, each of these components will have its individual Configuration.
Group Members
You can customize the properties of the Group Members component by making use of theGroupMembersConfiguration. You can accomplish this by employing the GroupMembersConfiguration as demonstrated below:
- Java
- Kotlin
GroupMembersConfiguration can be found under Group Members. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Group Member subcomponent and, in addition, you only want to hide separator and show back button.
You can modify the style using the groupMembersStyle property, hide the separator using setHideSeparator() property and show back button using setShowBackButton() property.

- Java
- Kotlin
Add Members
You can customize the properties of the Add Members component by making use of theAddMembersConfiguration. You can accomplish this by employing the AddMembersConfiguration as demonstrated below:
- Java
- Kotlin
AddMembersConfiguration can be found under Add Members. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Add Members subcomponent and, in addition, you only want to show the back button.
You can modify the style using the ListItemStyle property and AvatarStyle property

- Java
- Kotlin
Banned Members
You can customize the properties of the Banned Members component by making use of theBannedMembersConfiguration. You can accomplish this by employing the BannedMembersConfiguration as demonstrated below:
- Java
- Kotlin
BannedMembersConfiguration can be found under Banned Members. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Banned Members subcomponent and, in addition, you only want to show the back button.
You can modify the style using the ListItemStyle property and AvatarStyle property

- Java
- Kotlin
Transfer Ownership
You can customize the properties of the Transfer Ownership component by making use of theTransferOwnershipConfiguration. You can accomplish this by employing the TransferOwnershipConfiguration as demonstrated below:
- Java
- Kotlin
TransferOwnershipConfiguration can be found under Transfer Ownership. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example Let’s say you want to change the style of the Transfer Ownership subcomponent and, in addition, you only want to show the back button.
You can modify the style using the ListItemStyle property and AvatarStyle property

- Java
- Kotlin