Skip to main content
Version: v4

Group Details

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:

  1. Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
  2. 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.
  3. Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.
Image

The CometChatDetails component is composed of the following BaseComponents:

ComponentsDescription
CometChatListBaseCometChatListBase 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.

<com.cometchat.chatuikit.transferownership.cometchatDetails
    android:id="@+id/transfer_ownership"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

If you're defining the Group members within the XML code, you'll need to extract them and set them on the Group object using the appropriate method.

CometChatDetails cometchatDetails = binding.details;

Group group = new Group();
group.setGuid(""); //Required
group.setName(""); //Required
group.setOwner(""); //Required
group.setGroupType(""); //Required
group.setScope(""); //Required
group.setMembersCount(); //Required
group.setJoinedAt(); //Required
group.setHasJoined(); //Required
group.setCreatedAt(); //Required
group.setUpdatedAt(); //Required

cometchatDetails.setGroup(group);

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 the setOnError and improve error handling.

cometchatDetails.setOnError(new OnError() {
    @Override
    public void onError(Context context, CometChatException e) {
        
    }
});
2. AddOnBackPressListener​

You can customize this behavior by using the provided code snippet to override the addOnBackPressListener and improve error handling.

cometchatDetails.addOnBackPressListener(new CometChatListBase.OnBackPress() {
    @Override
    public void onBack() {

    }

});

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

CometChatDetails component does not have available filters.

Events​

Events are emitted by a 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.

Events emitted by the Group Details component is as follows.

EventsDescription
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
ccOwnershipChangedThis will get triggered when the logged in user transfer the ownership of their group to some other member

Example

CometChatGroupEvents.addGroupListener("LISTENER_ID", new CometChatGroupEvents() {
    @Override
    public void ccGroupDeleted(Group group) {
        super.ccGroupDeleted(group);
    }

    @Override
    public void ccGroupLeft(Action actionMessage, User leftUser, Group leftGroup) {
        super.ccGroupLeft(actionMessage, leftUser, leftGroup);
    }

    @Override
    public void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
        super.ccGroupMemberJoined(joinedUser, joinedGroup);
    }

    @Override
    public void ccGroupMemberAdded(List<Action> actionMessages, List<User> usersAdded, Group userAddedIn, User addedBy) {
        super.ccGroupMemberAdded(actionMessages, usersAdded, userAddedIn, addedBy);
    }

    @Override
    public void ccGroupMemberKicked(Action actionMessage, User kickedUser, User kickedBy, Group kickedFrom) {
        super.ccGroupMemberKicked(actionMessage, kickedUser, kickedBy, kickedFrom);
    }

    @Override
    public void ccGroupMemberBanned(Action actionMessage, User bannedUser, User bannedBy, Group bannedFrom) {
        super.ccGroupMemberBanned(actionMessage, bannedUser, bannedBy, bannedFrom);
    }

    @Override
    public void ccGroupMemberUnBanned(Action actionMessage, User unbannedUser, User unBannedBy, Group unBannedFrom) {
        super.ccGroupMemberUnBanned(actionMessage, unbannedUser, unBannedBy, unBannedFrom);
    }

    @Override
    public void ccGroupMemberScopeChanged(Action actionMessage, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
        super.ccGroupMemberScopeChanged(actionMessage, updatedUser, scopeChangedTo, scopeChangedFrom, group);
    }

    @Override
    public void ccOwnershipChanged(Group group, GroupMember newOwner) {
        super.ccOwnershipChanged(group, newOwner);
    }

});

Remove the added listener

CometChatGroupEvents.removeListener("LISTENER_ID");

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 the DetailsStyle to the CometChatDetails Component to customize the styling.

DetailsStyle detailsStyle = new DetailsStyle();
detailsStyle.setBackground(getResources().getColor(R.color.white_300));
detailsStyle.setTitleColor(getResources().getColor(R.color.red));
cometchatDetails.setStyle(detailsStyle);

List of properties exposed by DetailsStyle

This methods is used to customize the appearance of the CometChatDetails component

PropertyDescriptionCode
BackgroundUsed to set background color.setBackground(@ColorInt int)
BackgroundUsed to set a gradient background.setBackground(Drawable)
Border WidthUsed to set border.setBorderWidth(int)
Border ColorUsed to set border color.setBorderColor(@ColorInt int)
Corner RadiusUsed to set corner radius.setCornerRadius(double)
Title AppearanceUsed to set style of the title in the app bar.setTitleAppearance(@StyleRes int)
Close Icon TintUsed to set the color of the back icon in the app bar.setCloseIconTint(@ColorInt int)
Online Status ColorUsed 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 the Avatar component in the Group Members Component, you can use the following code snippet. For further insights on Avatar Styles refer

AvatarStyle avatarStyle = new AvatarStyle();
avatarStyle.setBorderWidth(10);
avatarStyle.setBorderColor(Color.RED);
cometchatDetails.setAvatarStyle(avatarStyle);
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

StatusIndicatorStyle statusIndicatorStyle = new StatusIndicatorStyle();
statusIndicatorStyle.setCornerRadius(3.5f);
statusIndicatorStyle.setBorderWidth(10);
statusIndicatorStyle.setBorderColor(Color.RED);
cometchatDetails.setStatusIndicatorStyle(statusIndicatorStyle);
4. ListItem Style​

To apply customized styles to the List Item component in the Group Member Component, you can use the following code snippet. For further insights on List Item Styles refer

GroupMembersConfiguration configuration = new GroupMembersConfiguration();

configuration.setHideSeparator(false);
configuration.setShowBackButton(false);

cometchatDetails.setGroupMembersConfiguration(configuration);

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.

cometchatDetails.setTitle("Your Title");
cometchatDetails.hideProfile(true);
cometchatDetails.showCloseButton(true);

List of Functionality exposed by CometChatDetails

PropertyDescriptionCode
UserUsed to validate and fetch a list of available options for users.setUser(User)
GroupUsed to validate and fetch a list of available options for groups.setGroup(Group)
TitleUsed to set the title in the app bar.setTitle(String)
Show Close ButtonUsed to toggle visibility for the back button.showCloseButton(boolean)
Close Button IconUsed to set the back button located in the app bar.setCloseButtonIcon(@DrawableRes int)
Disable User PresenceUsed to control visibility of the status indicator shown if a user is online.disableUserPresence(boolean)
Private Group IconUsed to set icon shown in place of status indicator for private group details.setPrivateGroupIcon(@DrawableRes int)
Protected Group IconUsed to set icon shown in place of status indicator for password protected group details.setProtectedGroupIcon(@DrawableRes int)
Hide ProfileHides 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.

cometchatDetails.setMenu(View v);

Example

You need to create a view_menu.xml as a custom view file. Which we will inflate and pass to .setMenu().

view_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/img_refresh"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/ic_refresh_black" />

</LinearLayout>

You inflate the view and pass it to setMenu. You can get the child view reference and can handle click actions.

YourActivity.java
View view = getLayoutInflater().inflate(R.layout.view_menu, null);
ImageView imgRefresh = view.findViewById(R.id.img_refresh);
imgRefresh.setOnClickListener(v -> {
    Toast.makeText(requireContext(), "Clicked on Refresh", Toast.LENGTH_SHORT).show();
});
cometchatDetails.setMenu(view);

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.

cometchatDetails.setSubtitleView(new Function3<Context, User, Group, View>() {
    @Override
    public View apply(Context context, User user, Group group) {
        return null;
    }
});

Example

Image

You can indeed create a custom layout file named 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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txt_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subtitle" />

    <ImageView
        android:id="@+id/img_conversation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt_subtitle"
        android:layout_margin="2dp"
        android:src="@drawable/ic_message_grey" />

    <ImageView
        android:id="@+id/img_audio_call"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt_subtitle"
        android:layout_margin="2dp"
        android:layout_toEndOf="@+id/img_conversation"
        android:src="@drawable/ic_call" />

    <ImageView
        android:id="@+id/img_video_call"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt_subtitle"
        android:layout_margin="2dp"
        android:layout_toEndOf="@+id/img_audio_call"
        android:src="@drawable/ic_video" />

</RelativeLayout>
YourActivity.java
cometchatDetails.setSubtitleView(new Function3<Context, User, Group, View>() {
    @Override
    public View apply(Context context, User user, Group group) {
        View view = getLayoutInflater().inflate(R.layout.subtitle_layout, null);
        TextView txtSubtitle = view.findViewById(R.id.txt_subtitle);
        ImageView imgConversation = view.findViewById(R.id.img_conversation);
        ImageView imgAudioCall = view.findViewById(R.id.img_audio_call);;
        ImageView imgVideCall = view.findViewById(R.id.img_video_call);;
        txtSubtitle.setText(group.getName());
        imgConversation.setOnClickListener(v -> {
            Toast.makeText(context, "Conversation Clicked", Toast.LENGTH_SHORT).show();
        });
        imgAudioCall.setOnClickListener(v -> {
            Toast.makeText(context, "Audio Call Clicked", Toast.LENGTH_SHORT).show();
        });
        imgVideCall.setOnClickListener(v -> {
            Toast.makeText(context, "Video Call Clicked", Toast.LENGTH_SHORT).show();
        });

        return view;
    }
});

SetCustomProfileView report ​

Tailor the custom profile view for each user item to suit your specific preferences and needs.

cometchatDetails.setCustomProfileView(new Function3<Context, User, Group, View>() {
    @Override
    public View apply(Context context, User user, Group group) {
        // customize the layout here
        // return the inflated view
        return null;
    }
});
Example​
custom_header_view
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="10dp"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.cometchat.chatuikit.shared.views.CometChatAvatar.CometChatAvatar
                android:id="@+id/item_avatar"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_margin="10dp"
                android:padding="10dp" />

            <TextView
                android:id="@+id/txt_item_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/item_avatar"
                android:text="name"
                android:textColor="@color/purple_700"
                android:textSize="17sp" />

        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>
cometchatDetails.setCustomProfileView(new Function3<Context, User, Group, View>() {
    @Override
    public View apply(Context context, User user, Group group) {
        View view = getLayoutInflater().inflate(R.layout.custom_header_view, null);
        CometChatAvatar avatar = view.findViewById(R.id.item_avatar);
        TextView name = view.findViewById(R.id.txt_item_name);
        avatar.setImage(group.getIcon(), group.getName());
        name.setText(group.getName());
        return view;
    }
});

Template and Options​

The CometChatDetailsOption 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.

CometChatDetailsTemplate template = new CometChatDetailsTemplate().setId("TemplateID").setTitle("new template").hideSectionSeparator(true).hideItemSeparator(false);

cometchatDetails.setData((context, user, group) -> {
    return Collections.singletonList(template);
});

Example

Image
//Create custom option
CometChatDetailsOption option = new CometChatDetailsOption(
        UIKitConstants.UserOption.VIEW_PROFILE,
        "view_profile",
        0,
        0,
        Palette.getInstance(getContext()).getPrimary(getContext()),
        null,
        Typography.getInstance().getName(),
        0,
        Palette.getInstance(getContext()).getAccent200(getContext()),
        null
);

//Create custom option with custom view
CometChatDetailsOption customViewOption = new CometChatDetailsOption(((context, user, group) -> {
    TextView textView = new TextView(context);
    textView.setText("custom view for detail option");
    return textView;
}), new OnDetailOptionClick() {
    @Override
    public void onClick(User user, Group group, String templateId, CometChatDetailsOption option, Context context) {
        //perform on click operation
    }
});

CometChatDetailsTemplate template = new CometChatDetailsTemplate()
        .setId("TemplateID")
        .setTitle("new template")
        .hideSectionSeparator(true)
        .hideItemSeparator(false)
        .setOptions((var1, var2) -> {
            return Arrays.asList(option, customViewOption);
        });

cometchatDetails.setData((context, user, group) -> {
    return Collections.singletonList(template);
});

A list of CometChatDetailsOption defines the structure for sections of options available in the CometChatDetails

PropertiesTypeDescription
idStringunique ID for the option
titleStringused to set title for the option
startIcon@DrawableRes intused to set start icon for the option
endIcon@DrawableRes intused to set end icon for the option
titleColor@ColorInt intused to set title color
titleFontStringused to set title text font
titleAppearance@StyleRes intused to set style of the title text
startIconTint@ColorInt intset color of start icon
endIconTint@ColorInt intset color of end icon
onClickOnDetailOptionClickthe action to perform on click of option
viewFunction3<Context, User, Group, View>to set a custom view for particular option

A list of CometChatDetailsTemplate defines the structure for sections of options available in the CometChatDetails

MethodsTypeDescription
setIdStringunique ID for the option
setTitleStringa text to display below the icon
setTitleAppearance@StyleRes intused to set style of the text below the icon
setOptionsFunction2<User, Group, List<CometChatDetailsOption>>options available under each section
setSectionSeparatorColor@ColorInt intthe color of the divider separating the sections of options
hideSectionSeparatorbooleanif true doesn't show the divider separating the sections of options
setItemSeparatorColor@ColorInt intthe color of the divider separating the each option
hideItemSeparator@ColorInt intif 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 has Add 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 the GroupMembersConfiguration. You can accomplish this by employing the GroupMembersConfiguration as demonstrated below:

GroupMembersConfiguration configuration = new GroupMembersConfiguration();

cometchatDetails.setGroupMembersConfiguration(configuration);

All exposed properties of GroupMembersConfiguration can be found under Group Members. Properties marked with the report 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.

Image
GroupMembersConfiguration configuration = new GroupMembersConfiguration();

GroupMembersStyle groupMembersStyle = new GroupMembersStyle();

configuration.setHideSeparator(true);
configuration.setShowBackButton(true);

cometchatDetails.setGroupMembersConfiguration(configuration);

Add Members​

You can customize the properties of the Add Members component by making use of the AddMembersConfiguration. You can accomplish this by employing the AddMembersConfiguration as demonstrated below:

AddMembersConfiguration addMembersConfiguration = new AddMembersConfiguration();

cometchatDetails.setAddMembersConfiguration(addMembersConfiguration);

All exposed properties of AddMembersConfiguration can be found under Add Members. Properties marked with the report 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

Image
AddMembersConfiguration addMembersConfiguration = new AddMembersConfiguration();

AvatarStyle avatarStyle = new AvatarStyle();
avatarStyle.setCornerRadius(1000);
avatarStyle.setBorderWidth(15);
avatarStyle.setBorderColor(Color.YELLOW);
addMembersConfiguration.setAvatarStyle(avatarStyle);

ListItemStyle listItemStyle = new ListItemStyle();
listItemStyle.setTitleColor(Color.RED);
addMembersConfiguration.setListItemStyle(listItemStyle);

cometchatDetails.setAddMembersConfiguration(addMembersConfiguration);

Banned Members​

You can customize the properties of the Banned Members component by making use of the BannedMembersConfiguration. You can accomplish this by employing the BannedMembersConfiguration as demonstrated below:

BannedMembersConfiguration bannedMembersConfiguration = new BannedMembersConfiguration();

cometchatDetails.setBannedMembersConfiguration(bannedMembersConfiguration);

All exposed properties of BannedMembersConfiguration can be found under Banned Members. Properties marked with the report 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

Image
BannedMembersConfiguration bannedMembersConfiguration = new BannedMembersConfiguration();

AvatarStyle avatarStyle = new AvatarStyle();
avatarStyle.setCornerRadius(10);
avatarStyle.setBorderColor(Color.YELLOW);
avatarStyle.setBorderWidth(10);
bannedMembersConfiguration.setAvatarStyle(avatarStyle);

ListItemStyle listItemStyle = new ListItemStyle();
listItemStyle.setTitleColor(Color.RED);
bannedMembersConfiguration.setListItemStyle(listItemStyle);

cometchatDetails.setBannedMembersConfiguration(bannedMembersConfiguration);

Transfer Ownership​

You can customize the properties of the Transfer Ownership component by making use of the TransferOwnershipConfiguration. You can accomplish this by employing the TransferOwnershipConfiguration as demonstrated below:

TransferOwnershipConfiguration transferOwnershipConfiguration = new TransferOwnershipConfiguration();

cometchatDetails.setTransferOwnershipConfiguration(transferOwnershipConfiguration);

All exposed properties of TransferOwnershipConfiguration can be found under Transfer Ownership. Properties marked with the report 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

Image
TransferOwnershipConfiguration transferOwnershipConfiguration = new TransferOwnershipConfiguration();

AvatarStyle avatarStyle = new AvatarStyle();
avatarStyle.setBorderWidth(15);
avatarStyle.setBorderColor(Color.YELLOW);
transferOwnershipConfiguration.setAvatarStyle(avatarStyle);

ListItemStyle listItemStyle = new ListItemStyle();
listItemStyle.setTitleColor(Color.RED);
transferOwnershipConfiguration.setListItemStyle(listItemStyle);

cometchatDetails.setTransferOwnershipConfiguration(transferOwnershipConfiguration);