CometChatGroups
functions as a standalone component designed to create a screen displaying a list of groups, with the added functionality of enabling users to search for specific groups. Acting as a container component, CometChatGroups encapsulates and formats the CometChatListBase
and CometChatGroupList
components without introducing any additional behavior of its own.
Groups
component is composed of the following BaseComponents:
Components | Description |
---|---|
CometChatListBase | CometChatListBase is a container component having a title, search box, customizable background , and a List View |
CometChatListItem | CometChatListItem is a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view |
CometChatGroups
.
OnSelection
event is activated when you select the done icon in the Menubar while in selection mode. This returns a list of all the groups that you have selected.
This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
OnItemClickListener
event is activated when you click on the GroupList item. This action does not come with any predefined behavior.
However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
OnBackPressListener
function is built to respond when you tap the back button in the Toolbar of the activity.
By default, this action has a predefined behavior: it simply closes the current activity. However, the flexibility of CometChat UI Kit allows you to override this standard behavior according to your application’s specific requirements. You can define a custom action that will be performed instead when the back button is pressed.
Property | Description | Code |
---|---|---|
Limit | Configure the maximum number of groups to fetch in a single request, optimizing pagination for smoother navigation. | .setLimit(Int) |
Search Keyword | Employed to retrieve groups that match the provided string, facilitating precise searches. | .setSearchKeyWord(String) |
Joined Only | Exclusively fetches joined groups. | .joinedOnly(boolean) |
Tags | Utilized to fetch groups containing the specified tags. | .setTags(List<String>) |
With Tags | Utilized to retrieve groups with specific tags. | .withTags(boolean) |
Component
. 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.
The list of events emitted by the Groups component is as follows.
Events | Description |
---|---|
ccGroupCreated() | This will get triggered when the logged in user creates a group |
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 |
CometChatGroupEvents
Listener’sCometChatGroupEvents
Listener’sProperty | Description | Code |
---|---|---|
Background | Used to set the background color | setBackground(@ColorInt int) |
BorderWidth | Used to set border width | setBorderWidth(int) |
BorderColor | Used to set border color | setBorderColor(@ColorInt int) |
CornerRadius | Used to set border radius | setCornerRadius(float) |
Background | Used to set background Drawable | setBackground(Drawable) |
TitleAppearance | Used to customise the appearance of the title in the app bar | setTitleAppearance(@StyleRes int) |
BackIconTint | Used to set the color of the back icon in the app bar | setBackIconTint(@ColorInt int) |
SearchBackground | Used to set the background color of the search box | setSearchBackground(@ColorInt int) |
SearchBorderRadius | Used to set the border radius of the search box | setSearchBorderRadius(int) |
SearchIconTint | Used to set the color of the search icon in the search box | setSearchIconTint(@ColorInt int) |
SearchBorderWidth | Used to set the border width of the search box | setSearchBorderWidth(int) |
SearchTextAppearance | Used to set the style of the text in the search box | setSearchTextAppearance(@StyleRes int) |
LoadingIconTint | Used to set the color of the icon shown while the list of group members is being fetched | setLoadingIconTint(@ColorInt int) |
EmptyTextAppearance | Used to set the style of the response text shown when fetchig the list of group members has returned an empty list | setEmptyTextAppearance(@StyleRes int) |
ErrorTextAppearance | Used to set the style of the response text shown in case some error occurs while fetching the list of group members | setErrorTextAppearance(@StyleRes int) |
SeparatorColor | Used to set the color of the divider separating the group member items | setSeparatorColor(@ColorInt int) |
Avatar
component in the Groups Component, you can use the following code snippet. For further insights on Avatar
Styles refer
List Item
component in the Groups
Component, you can use the following code snippet. For further insights on List Item
Styles refer
Property | Description | Code |
---|---|---|
Set Title | Used to set title in the app bar | .setTitle("Your custom title") |
Set SearchPlaceholderText | Used to set search placeholder text | .setSearchPlaceholderText("Your custom Text") |
BackIcon | Used to set back button icon | .backIcon(@DrawableRes int res) |
Show BackButton | Used to toggle visibility for back button | .showBackButton(boolean) |
Set SearchBoxIcon | Used to set search Icon in the search field | .setSearchBoxIcon(@DrawableRes int res) |
Hide Search | Used to toggle visibility for search box | .hideSearch(boolean) |
Hide Error | Used to hide error on fetching groups | .hideError(boolean) |
Hide Separator | Used to hide the divider separating the group items | .hideSeparator(boolean) |
Set SubmitIcon | Used to override the default selection complete icon | .setSubmitIcon(@DrawableRes int res) |
EmptyState Text | Used to set a custom text response when fetching the groups has returned an empty list | .emptyStateText("Your Text") |
ErrorState Text | Used to set a custom text response when some error occurs on fetching the list of groups | .errorStateText("Your Text") |
Private Group Icon | Used to set the private group Icon | .setPrivateGroupIcon(@DrawableRes int res) |
item_list.xml
for more complex or unique list items.
Once this layout file is made, you would inflate it inside the createView()
method of the GroupsViewHolderListener
. 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
for more complex or unique list items.
Once this layout file is made, you would inflate it inside the createView()
method of the GroupsViewHolderListener
. 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:
tail_view_layout.xml
for more complex or unique list items.
Once this layout file is made, you would inflate it inside the createView()
method of the GroupsViewHolderListener
. 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:
view_menu.xml
as a custom view file. Which we will inflate and pass to .setMenu()
.
setMenu
. You can get the child view reference and can handle click actions.
setLoadingStateView
to match the loading view of your app.
ContentLoadingProgressBar
to loading_view_layout.xml
. You can choose any view you prefer. This view should be inflated and passed to the setLoadingStateView()
method.
EmptyStateView
using setEmptyStateView
to match the empty view of your app.
empty_view_layout.xml
. You can choose any view you prefer. This view should be inflated and passed to the setEmptyStateView()
method.
ErrorStateView
using setErrorStateView
to match the error view of your app.
error_state_view_layout.xml
. You can choose any view you prefer. This view should be inflated and passed to the setErrorStateView()
method.