> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Members

## Overview

`CometChatGroupMembers` is a versatile [Component](/ui-kit/android/components-overview#components) designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. Group members have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/195oxTVcmj5zqz-a/images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png?fit=max&auto=format&n=195oxTVcmj5zqz-a&q=85&s=08069e687497c40456fba48a06d2ba46" width="1280" height="800" data-path="images/c316bb0a-group_members-9849dc973b6addaffc0990af38520294.png" />
</Frame>

***

## Usage

### Integration

`CometChatGroupMembers`, as a Composite 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 group 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 GroupMembers component into your application.

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.groupmembers.CometChatGroupMembers
        android:id="@+id/group_member"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatGroupMembers cometchatGroupMembers = binding.groupMember;

    Group group = new Group();
    group.setGuid("GROUP_ID");
    group.setName("GROUP_NAME");

    cometchatGroupMembers.setGroup(group);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val cometchatGroupMembers: CometChatGroupMembers = binding.groupMember

    val group: Group = Group()
    group.setGuid("GROUP_ID")
    group.setName("GROUP_NAME")

    cometchatGroupMembers.setGroup(group)
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/android/components-overview#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.

##### setOnItemClick

Function invoked when a user item is clicked, typically used to open a user profile or chat screen.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnItemClick((view1, position, user) -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.onItemClick = OnItemClick { view, position, user ->
                
        }
    ```
  </Tab>
</Tabs>

***

##### setOnItemLongClick

Function executed when a user item is long-pressed, allowing additional actions like delete or block.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnItemLongClick((view1, position, user) -> {

        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.onItemLongClick = OnItemLongClick({ view, position, user ->
                
        })
    ```
  </Tab>
</Tabs>

***

##### setOnBackPressListener

`OnBackPressListener` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnBackPressListener(() -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.onBackPressListener = OnBackPress {

        }
    ```
  </Tab>
</Tabs>

***

##### setOnSelect

Called when a item from the fetched list is selected, useful for multi-selection features.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnSelect(t -> {

        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.setOnSelect(object : OnSelection<User?> {
            override fun onSelection(t: MutableList<User?>?) {
                    
            }
        })
    ```
  </Tab>
</Tabs>

***

##### setOnError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the Users component.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnError(cometchatException -> {

        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.setOnError {

        }
    ```
  </Tab>
</Tabs>

***

##### setOnLoad

Invoked when the list is successfully fetched and loaded, helping track component readiness.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnLoad(list -> {

    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.setOnLoad(object : OnLoad<User?> {
        override fun onLoad(list: MutableList<User?>?) {

        }
    })
    ```
  </Tab>
</Tabs>

***

##### setOnEmpty

Called when the list is empty, enabling custom handling such as showing a placeholder message.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatUsers.setOnEmpty(() -> {
                
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatUsers.setOnEmpty{
                
        }
    ```
  </Tab>
</Tabs>

***

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

##### 1. GroupsRequestBuilder

The [GroupsRequestBuilder](/sdk/android/retrieve-groups) enables you to filter and customize the group list based on available parameters in GroupsRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/android/retrieve-groups)

| Property           | Description                                                                                                      | Code                        |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------- |
| **Limit**          | Sets the number of group members that can be fetched in a single request, suitable for pagination.               | `.setLimit(int)`            |
| **Search Keyword** | Used for fetching group members matching the passed string.                                                      | `.setSearchKeyword(String)` |
| **Scopes**         | Used for fetching group members having matching scopes which may be of participant, moderator, admin, and owner. | `.setScopes(List<String>)`  |

**Example**

In the example below, we are applying a filter to the Group List based on limit and scope.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    GroupMembersRequest.GroupMembersRequestBuilder groupMembersRequestBuilder= new GroupMembersRequest.GroupMembersRequestBuilder(GUID).setLimit(limit);

    cometchatGroupMembers.setGroupMembersRequestBuilder(groupMembersRequestBuilder);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val groupMembersRequestBuilder = GroupMembersRequestBuilder(GUID).setLimit(limit)

    cometchatGroupMembers.setGroupMembersRequestBuilder(groupMembersRequestBuilder)
    ```
  </Tab>
</Tabs>

***

##### 2. SearchRequestBuilder

The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/android/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder.

This feature allows you to keep uniformity between the displayed Groups List and searched Group List.

**Example**

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    GroupMembersRequest.GroupMembersRequestBuilder groupMembersRequestBuilder= new GroupMembersRequest.GroupMembersRequestBuilder(GUID).setLimit(LIMIT).setSearchKeyword(SEARCH_KEYWORD);

    cometchatGroupMembers.setSearchRequestBuilder(groupMembersRequestBuilder);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val groupMembersRequestBuilder = GroupMembersRequestBuilder(GUID).setLimit(LIMIT).setSearchKeyword(SEARCH_KEYWORD)

    cometchatGroupMembers.setSearchRequestBuilder(groupMembersRequestBuilder)
    ```
  </Tab>
</Tabs>

***

### Events

[Events](/ui-kit/android/components-overview#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 Join Group component is as follows.

| Event                         | Description                                                       |
| ----------------------------- | ----------------------------------------------------------------- |
| **ccGroupMemberBanned**       | Triggers when the group member banned from the group successfully |
| **ccGroupMemberKicked**       | Triggers when the group member kicked from the group successfully |
| **ccGroupMemberScopeChanged** | Triggers when the group member scope is changed in the group      |

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatGroupEvents.addGroupListener("LISTENER_ID", new CometChatGroupEvents() {
        @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 ccGroupMemberScopeChanged(Action actionMessage, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
            super.ccGroupMemberScopeChanged(actionMessage, updatedUser, scopeChangedTo, scopeChangedFrom, group);
        }

    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    CometChatGroupEvents.addGroupListener("LISTENER_ID", object : CometChatGroupEvents() {
        override fun ccGroupMemberKicked(
            actionMessage: Action,
            kickedUser: User,
            kickedBy: User,
            kickedFrom: Group
        ) {
            super.ccGroupMemberKicked(actionMessage, kickedUser, kickedBy, kickedFrom)
        }

        override fun ccGroupMemberBanned(
            actionMessage: Action,
            bannedUser: User,
            bannedBy: User,
            bannedFrom: Group
        ) {
            super.ccGroupMemberBanned(actionMessage, bannedUser, bannedBy, bannedFrom)
        }

        override fun ccGroupMemberScopeChanged(
            actionMessage: Action,
            updatedUser: User,
            scopeChangedTo: String,
            scopeChangedFrom: String,
            group: Group
        ) {
            super.ccGroupMemberScopeChanged(
                actionMessage,
                updatedUser,
                scopeChangedTo,
                scopeChangedFrom,
                group
            )
        }
    })
    ```
  </Tab>
</Tabs>

***

Remove the added listener

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatGroupEvents.removeListener("LISTENER_ID");
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    CometChatGroupEvents.removeListener("LISTENER_ID")
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the Groups 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/j9rC5KDHdwR7G4nu/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=j9rC5KDHdwR7G4nu&q=85&s=a3f45e06d367bb58dd3b78ee78c81817" width="1280" height="800" data-path="images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png" />
</Frame>

```xml themes.xml theme={null}
     <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
        <item name="cometchatAvatarStrokeRadius">8dp</item>
        <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
    </style>

    <style name="CustomGroupMembersStyle" parent="CometChatGroupMembersStyle">
        <item name="cometchatGroupMembersAvatarStyle">@style/CustomAvatarStyle</item>
        <item name="cometchatGroupMembersSeparatorColor">#F76808</item>
        <item name="cometchatGroupMembersTitleTextColor">#F76808</item>
        <item name="cometchatGroupMembersBackIconTint">#F76808</item>
    </style>
```

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupMembers.setStyle(R.style.CustomGroupMembersStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupMembers.setStyle(R.style.CustomGroupMembersStyle)
    ```
  </Tab>
</Tabs>

***

To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_group_members.xml).

### 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 toggle the visibility of UI elements.

Below is a list of customizations along with corresponding code snippets

| Methods                   | Description                                                                                                                  | Code                                                        |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| setGroup                  | Sets the group whose members need to be fetched. This is a required property for the component to function properly.         | `.setGroup(group);`                                         |
| setBackIconVisibility     | Used to toggle visibility for back button in the app bar                                                                     | `.setBackIconVisibility(View.VISIBLE);`                     |
| setToolbarVisibility      | Used to toggle visibility for back button in the app bar                                                                     | `.setToolbarVisibility(View.GONE);`                         |
| setErrorStateVisibility   | Used to hide error state on fetching Users                                                                                   | `.setErrorStateVisibility(View.GONE);`                      |
| setEmptyStateVisibility   | Used to hide empty state on fetching Users                                                                                   | `.setEmptyStateVisibility(View.GONE);`                      |
| setLoadingStateVisibility | Used to hide loading state while fetching Users                                                                              | `.setLoadingStateVisibility(View.GONE);`                    |
| setSeparatorVisibility    | Used to control visibility of Separators in the list view                                                                    | `.setSeparatorVisibility(View.GONE);`                       |
| setUsersStatusVisibility  | Used to control visibility of status indicator shown if user is online                                                       | `.setUsersStatusVisibility(View.GONE);`                     |
| setSelectionMode          | This method determines the selection mode for members, enabling users to select either a single or multiple members at once. | `.setSelectionMode(UIKitConstants.SelectionMode.MULTIPLE);` |
| setSearchkeyword          | Used for fetching members matching the passed keywords                                                                       | `.setSearchkeyword("anything");`                            |
| setSearchBoxVisibility    | Used to hide search box shown in the tool bar                                                                                | `.setSearchBoxVisibility(View.GONE);`                       |

***

### 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 own views, layouts, and UI elements and then incorporate those into the component.

The `Group Memebers` component does not provide additional functionalities beyond this level of customization.

***

#### setOptions

Defines a set of available actions that users can perform when they interact with a group member item.

Use Cases:

* Provide actions like "View Profile", "Send Message", "Remove from Group".
* Restrict certain actions to admins (e.g., "Promote to Admin", "Ban User").

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setOptions((context, user) -> Collections.emptyList());
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.options = Function2<Context?, User?, List<CometChatPopupMenu.MenuItem?>?> { context, user -> emptyList<CometChatPopupMenu.MenuItem?>() }
    ```
  </Tab>
</Tabs>

***

#### addOptions

Adds custom actions to the existing options available when interacting with a group member.

Use Cases:

* Extend functionality by adding "Block User", "Report User", or "View Activity".
* Customize actions based on member roles.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.addOptions((context, user) -> Collections.emptyList());
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.addOptions { context, user -> emptyList<CometChatPopupMenu.MenuItem?>() }
    ```
  </Tab>
</Tabs>

***

#### setLoadingView

Displays a custom loading view while group members are being fetched.

Use Cases:

* Show a loading spinner with "Fetching group members...".
* Implement a skeleton loader for a smoother UI experience.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setLoadingView(R.layout.your_loading_view);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.loadingView = R.layout.your_loading_view
    ```
  </Tab>
</Tabs>

***

#### setEmptyView

Configures a view to be displayed when no group members are found.

Use Cases:

* Display a message like "No members in this group yet.".
* Show a button to Invite Members.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setEmptyView(R.layout.your_empty_view);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.emptyView = R.layout.your_empty_view
    ```
  </Tab>
</Tabs>

***

#### setErrorView

Defines a custom error state view when there is an issue loading group members.

Use Cases:

* Display a retry button with "Failed to load members. Tap to retry.".
* Show an illustration for a better user experience.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setErrorView(R.layout.your_empty_view);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.errorView = R.layout.your_error_view
    ```
  </Tab>
</Tabs>

***

#### setLeadingView

Sets a custom leading view for each group member item, usually used for profile images or avatars.

Use Cases:

* Show a circular avatar with an online/offline indicator.
* Add a role-based badge (Admin, Moderator, Member).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setLeadingView(new UsersViewHolderListener() {
                @Override
                public View createView(Context context, CometchatListBaseItemsBinding listItem) {
                    return null;
                }

                @Override
                public void bindView(Context context, View createdView, User user, RecyclerView.ViewHolder holder, List<User> userList, int position) {

                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.setLeadingView(object: UsersViewHolderListener {
        override fun createView(context: Context, cometChatListItem: CometChatListItem): View? {
            return null
        }

        override fun bindView(context: Context, view: View, user: User, viewHolder: RecyclerView.ViewHolder, list: List<User>, i: Int) {
        }
    })
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-VkygUOl1ts-0wu1/images/b013490a-group_members_leading_view-87dce6741e65f09e848ea6698c75e978.png?fit=max&auto=format&n=-VkygUOl1ts-0wu1&q=85&s=d7ba37afeefd4d4dba38b1b7ee827ae6" width="2560" height="1600" data-path="images/b013490a-group_members_leading_view-87dce6741e65f09e848ea6698c75e978.png" />
</Frame>

You can indeed create a custom layout file named `custom_title_view.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:

```xml custom_title_view.xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/cometchat_45dp"
    android:layout_height="@dimen/cometchat_45dp"
    android:orientation="vertical">

    <com.cometchat.chatuikit.shared.views.avatar.CometChatAvatar
        android:id="@+id/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View
        android:id="@+id/batch_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/cometchat_12dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/admin_batch"
        android:visibility="gone" />

</RelativeLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatGroupMembers.setTitleView(new GroupMembersViewHolderListeners() {
                @Override
                public View createView(Context context, CometchatGroupMemberListItemBinding listItem) {
                return LayoutInflater.from(context).inflate(R.layout.header_leading_view, null, false);


                }

                @Override
                public void bindView(Context context, View createdView, GroupMember groupMember, Group group, RecyclerView.ViewHolder holder, List<GroupMember> groupMemberList, int position) {
                    CometChatAvatar avatar = createdView.findViewById(R.id.avatar);
                    avatar.setAvatar(groupMember.getName(), groupMember.getAvatar());
                    View role = createdView.findViewById(R.id.batch_view);
                    if (UIKitConstants.GroupMemberScope.ADMIN.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.marketing_head, null));
                    } else if (UIKitConstants.GroupMemberScope.MODERATOR.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.sr_manager, null));
                    } else if (UIKitConstants.GroupMemberScope.PARTICIPANTS.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.content_manager, null));
                    } else {
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.team_member, null));
                    }
                    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(Utils.convertDpToPx(context, 40),
                                                                                           Utils.convertDpToPx(context, 40));
                    createdView.setLayoutParams(layoutParams);
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatGroupMembers.setLeadingView(object : GroupMembersViewHolderListeners() {
                override fun createView(context: Context?, listItem: CometchatGroupMemberListItemBinding?): View {
                    return LayoutInflater.from(context).inflate(R.layout.header_leading_view, null, false)
                }

                override fun bindView(
                    context: Context,
                    createdView: View,
                    groupMember: GroupMember,
                    group: Group,
                    holder: RecyclerView.ViewHolder,
                    groupMemberList: List<GroupMember>,
                    position: Int
                ) {
                    val avatar = createdView.findViewById<CometChatAvatar>(R.id.avatar)
                    avatar.setAvatar(groupMember.name, groupMember.avatar)
                    val role = createdView.findViewById<View>(R.id.batch_view)
                    if (UIKitConstants.GroupMemberScope.ADMIN == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.marketing_head, null)
                    } else if (UIKitConstants.GroupMemberScope.MODERATOR == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.sr_manager, null)
                    } else if (UIKitConstants.GroupMemberScope.PARTICIPANTS == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.content_manager, null)
                    } else {
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.team_member, null)
                    }
                    val layoutParams = LinearLayout.LayoutParams(
                        Utils.convertDpToPx(context, 40),
                        Utils.convertDpToPx(context, 40)
                    )
                    createdView.layoutParams = layoutParams
                }
            })
    ```
  </Tab>
</Tabs>

***

#### setTitleView

Customizes the title view, typically displaying the member's name.

Use Cases:

* Customize fonts, colors, or styles for usernames.
* Add role-specific indicators like "(Group Admin)".

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatUsers.setTitleView(new UsersViewHolderListener() {
                @Override
                public View createView(Context context, CometchatListBaseItemsBinding listItem) {
                    return null;
                }

                @Override
                public void bindView(Context context, View createdView, User user, RecyclerView.ViewHolder holder, List<User> userList, int position) {

                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatUsers.setTitleView(object: UsersViewHolderListener {
        override fun createView(context: Context, cometChatListItem: CometChatListItem): View? {
            return null
        }

        override fun bindView(context: Context, view: View, user: User, viewHolder: RecyclerView.ViewHolder, list: List<User>, i: Int) {
        }
    })
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/skyYyiTRS367pk0g/images/8cc2ed79-group_members_title_view-a20a9c5f8ef829a4a5d35794d94ec352.png?fit=max&auto=format&n=skyYyiTRS367pk0g&q=85&s=9d39fa5f467dbabe970380fe2e782d56" width="2560" height="1600" data-path="images/8cc2ed79-group_members_title_view-a20a9c5f8ef829a4a5d35794d94ec352.png" />
</Frame>

You can indeed create a custom layout file named `custom_title_view.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:

```xml custom_title_view.xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/user_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="teacher"
        android:textAppearance="?attr/cometchatTextAppearanceHeading4Medium"
        android:textColor="?attr/cometchatTextColorPrimary" />

    <View
        android:id="@+id/role"
        android:layout_width="50dp"
        android:layout_height="15dp"
        android:layout_marginStart="@dimen/cometchat_16dp"
        android:background="@drawable/team_member" />
</LinearLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatGroupMembers.setTitleView(new GroupMembersViewHolderListeners() {
                @Override
                public View createView(Context context, CometchatGroupMemberListItemBinding listItem) {
                return LayoutInflater.from(context).inflate(R.layout.custom_title_view, null, false);

                }

                @Override
                public void bindView(Context context, View createdView, GroupMember groupMember, Group group, RecyclerView.ViewHolder holder, List<GroupMember> groupMemberList, int position) {
                                LinearLayout layout = createdView.findViewById(R.id.user_layout);
                    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                                                                                           ViewGroup.LayoutParams.WRAP_CONTENT);
                    layout.setLayoutParams(layoutParams);
                    TextView name = createdView.findViewById(R.id.title);
                    name.setText(groupMember.getName());
                    View role = createdView.findViewById(R.id.role);
                    if (UIKitConstants.GroupMemberScope.ADMIN.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.marketing_head, null));
                    } else if (UIKitConstants.GroupMemberScope.MODERATOR.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.sr_manager, null));
                    } else if (UIKitConstants.GroupMemberScope.PARTICIPANTS.equals(groupMember.getScope())) {
                        role.setVisibility(View.VISIBLE);
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.content_manager, null));
                    } else {
                        role.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.team_member, null));

                    }
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatGroupMembers.setTitleView(object : GroupMembersViewHolderListeners() {
                override fun createView(context: Context?, listItem: CometchatGroupMemberListItemBinding?): View {
                    return LayoutInflater.from(context).inflate(R.layout.custom_title_view, null, false)
                }

                override fun bindView(
                    context: Context,
                    createdView: View,
                    groupMember: GroupMember,
                    group: Group,
                    holder: RecyclerView.ViewHolder,
                    groupMemberList: List<GroupMember>,
                    position: Int
                ) {
                    val layout = createdView.findViewById<LinearLayout>(R.id.user_layout)
                    val layoutParams = LinearLayout.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                    )
                    layout.layoutParams = layoutParams
                    val name = createdView.findViewById<TextView>(R.id.title)
                    name.text = groupMember.name
                    val role = createdView.findViewById<View>(R.id.role)
                    if (UIKitConstants.GroupMemberScope.ADMIN == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.marketing_head, null)
                    } else if (UIKitConstants.GroupMemberScope.MODERATOR == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.sr_manager, null)
                    } else if (UIKitConstants.GroupMemberScope.PARTICIPANTS == groupMember.scope) {
                        role.visibility = View.VISIBLE
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.content_manager, null)
                    } else {
                        role.background = ResourcesCompat.getDrawable(resources, R.drawable.team_member, null)
                    }
                }
            })
    ```
  </Tab>
</Tabs>

***

#### setItemView

Assigns a fully custom ListItem layout to the Group Members Component, replacing the default structure.

Use Cases:

* Include additional member details like joined date, bio, or status.
* Modify layout based on user roles.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupMembers.setItemView(new GroupMembersViewHolderListeners() {
        @Override
        public View createView(Context context, CometchatGroupMemberListItemBinding cometChatListItem) {
            return null;
        }

        @Override
        public void bindView(Context context, View view, GroupMember groupMember, Group group, RecyclerView.ViewHolder viewHolder, List<GroupMember> list, int i) {

        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupMembers.setItemView(object : GroupMembersViewHolderListeners() {
        override fun createView(context: Context, cometChatListItem: CometchatGroupMemberListItemBinding): View? {
            return null
        }

        override fun bindView(
            context: Context,
            view: View,
            groupMember: GroupMember,
            group: Group,
            viewHolder: RecyclerView.ViewHolder,
            list: List<GroupMember>,
            i: Int
        ) {
        }
    })
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-G4WbAhFV_nFm5lW/images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png?fit=max&auto=format&n=-G4WbAhFV_nFm5lW&q=85&s=b05b5e28520ef0bd73c0a8f3a534614a" width="1280" height="800" data-path="images/506c713b-group_members_list_item_view-7db7e3429ec8898cb29e584a459ec43f.png" />
</Frame>

You can indeed create a custom layout file named `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:

```xml item_list.xml theme={null}
<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <TextView
        android:id="@+id/tvName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:textAppearance="?attr/cometchatTextAppearanceHeading4Bold"
        android:textColor="?attr/cometchatTextColorPrimary" />

    <TextView
        android:id="@+id/tvSubtitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/cometchat_margin_1"
        android:textAppearance="?attr/cometchatTextAppearanceBodyRegular"
        android:textColor="?attr/cometchatTextColorSecondary" />
</LinearLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatGroupMembers.setItemView(new GroupMembersViewHolderListeners() {
                @Override
                public View createView(Context context, CometchatGroupMemberListItemBinding listItem) {
                    return View.inflate(context, R.layout.custom_group_list_item, null);
                }

                @Override
                public void bindView(Context context, View createdView, GroupMember groupMember, Group group, RecyclerView.ViewHolder holder, List<GroupMember> groupMemberList, int position) {
                    TextView tvName = createdView.findViewById(R.id.tvName);
                    TextView tvScope = createdView.findViewById(R.id.tvSubtitle);
                    tvName.setText(groupMember.getName());
                    tvScope.setText(groupMember.getScope());
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatGroupMembers.setItemView(object :
                GroupMembersViewHolderListeners() {
                override fun createView(
                    context: Context?,
                    listItem: CometchatGroupMemberListItemBinding?
                ): View {
                    return View.inflate(context, R.layout.custom_group_list_item, null)
                }

                override fun bindView(
                    context: Context,
                    createdView: View,
                    groupMember: GroupMember,
                    group: Group,
                    holder: RecyclerView.ViewHolder,
                    groupMemberList: List<GroupMember>,
                    position: Int
                ) {
                    val tvName = createdView.findViewById<TextView>(R.id.tvName)
                    val tvScope = createdView.findViewById<TextView>(R.id.tvSubtitle)
                    tvName.text = groupMember.name
                    tvScope.text = groupMember.scope
                }
            })
    ```
  </Tab>
</Tabs>

***

#### setSubTitleView

Customizes the subtitle view for each group member, typically used for extra details.

Use Cases:

* Show "Last Active" time.
* Display a custom status message.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupMembers.setSubtitleView(new GroupMembersViewHolderListeners() {
        @Override
        public View createView(Context context, CometchatGroupMemberListItemBinding cometChatListItem) {
            return null;
        }

        @Override
        public void bindView(Context context, View view, GroupMember groupMember, Group group, RecyclerView.ViewHolder viewHolder, List<GroupMember> list, int i) {

        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupMembers.setSubtitleView(object : GroupMembersViewHolderListeners() {
        override fun createView(context: Context, cometChatListItem: CometchatGroupMemberListItemBinding?): View? {
            return null
        }

        override fun bindView(
            context: Context,
            view: View,
            groupMember: GroupMember,
            group: Group,
            viewHolder: RecyclerView.ViewHolder,
            list: List<GroupMember>,
            i: Int
        ) {
        }
    })
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=20343ae01ad99f7b5dc34a86f1f145b7" width="1280" height="800" data-path="images/2b73a513-group_members_subtitle_view-b0b1463389d35067432eaf60d8418ffe.png" />
</Frame>

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 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:

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatGroupMembers.setSubtitleView(new GroupMembersViewHolderListeners() {
                @Override
                public View createView(Context context, CometchatGroupMemberListItemBinding listItem) {
                    return new TextView(context);
                }

                @Override
                public void bindView(Context context, View createdView, GroupMember groupMember, Group group, RecyclerView.ViewHolder holder, List<GroupMember> groupMemberList, int position) {
                    ((TextView) createdView).setText("Joined at: "+new SimpleDateFormat("dd/mm/yyyy").format(groupMember.getJoinedAt()*1000));
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatGroupMembers.setSubtitleView(object :
                GroupMembersViewHolderListeners() {
                override fun createView(
                    context: Context?,
                    listItem: CometchatGroupMemberListItemBinding?
                ): View {
                    return TextView(context)
                }

                override fun bindView(
                    context: Context,
                    createdView: View,
                    groupMember: GroupMember,
                    group: Group,
                    holder: RecyclerView.ViewHolder,
                    groupMemberList: List<GroupMember>,
                    position: Int
                ) {
                    (createdView as TextView).text =
                        "Joined at: " + SimpleDateFormat("dd/mm/yyyy").format(groupMember.joinedAt * 1000)
                }
            })
    ```
  </Tab>
</Tabs>

***

#### setTrailingView

Customizes the trailing (right-end) section of each member item, typically used for action buttons.

Use Cases:

* Show quick actions like Mute, Remove, or Promote.
* Display a "Last Active" timestamp.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupMembers.setTrailingView(new GroupMembersViewHolderListeners() {
        @Override
        public View createView(Context context, CometchatGroupMemberListItemBinding cometChatListItem) {
            return null;
        }

        @Override
        public void bindView(Context context, View view, GroupMember groupMember, Group group, RecyclerView.ViewHolder viewHolder, List<GroupMember> list, int i) {

        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupMembers.setTrailingView(object : GroupMembersViewHolderListeners() {
        override fun createView(context: Context, cometChatListItem: CometchatGroupMemberListItemBinding?): View? {
            return null
        }

        override fun bindView(
            context: Context,
            view: View,
            groupMember: GroupMember,
            group: Group,
            viewHolder: RecyclerView.ViewHolder,
            list: List<GroupMember>,
            i: Int
        ) {

        }
    })
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOTukDN54hvEwBMP/images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png?fit=max&auto=format&n=FOTukDN54hvEwBMP&q=85&s=75afe8d45a78a7b937ebd14dd7d7892b" width="1280" height="800" data-path="images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png" />
</Frame>

You can indeed create a custom layout file named `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:

```xml custom_tail_view.xml theme={null}
<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/scope_card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:cardBackgroundColor="?attr/cometchatPrimaryColor"
        app:cardCornerRadius="@dimen/cometchat_radius_max"
        app:cardElevation="@dimen/cometchat_0dp"
     >

        <TextView
            android:id="@+id/tv_scope"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:paddingStart="@dimen/cometchat_padding_3"
            android:paddingTop="@dimen/cometchat_padding_1"
            android:paddingEnd="@dimen/cometchat_padding_3"
            android:paddingBottom="@dimen/cometchat_padding_1"
            android:text="@string/cometchat_owner"
            android:textAppearance="?attr/cometchatTextAppearanceCaption1Regular"
            android:textColor="?attr/cometchatPrimaryColor" />

    </com.google.android.material.card.MaterialCardView>

</LinearLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometchatGroupMembers.setTrailingView(new GroupMembersViewHolderListeners() {
                @Override
                public View createView(Context context, CometchatGroupMemberListItemBinding listItem) {
                    return View.inflate(context, R.layout.custom_tail_view, null);
                }

                @Override
                public void bindView(Context context, View createdView, GroupMember groupMember, Group group, RecyclerView.ViewHolder holder, List<GroupMember> groupMemberList, int position) {
                    MaterialCardView cardView = createdView.findViewById(R.id.scope_card);
                    TextView tvName = createdView.findViewById(R.id.tv_scope);
                    cardView.setCardBackgroundColor(CometChatTheme.getExtendedPrimaryColor100(context));
                    tvName.setText(groupMember.getScope());
                    createdView.setVisibility(groupMember.getScope().equals(UIKitConstants.GroupMemberScope.PARTICIPANTS) ? View.VISIBLE : View.GONE);
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometchatGroupMembers.setTrailingView(object :
                GroupMembersViewHolderListeners() {
                override fun createView(
                    context: Context?,
                    listItem: CometchatGroupMemberListItemBinding?
                ): View {
                    return View.inflate(context, R.layout.custom_tail_view, null)
                }

                override fun bindView(
                    context: Context,
                    createdView: View,
                    groupMember: GroupMember,
                    group: Group,
                    holder: RecyclerView.ViewHolder,
                    groupMemberList: List<GroupMember>,
                    position: Int
                ) {
                    val cardView = createdView.findViewById<MaterialCardView>(R.id.scope_card)
                    val tvName = createdView.findViewById<TextView>(R.id.tv_scope)
                    cardView.setCardBackgroundColor(CometChatTheme.getExtendedPrimaryColor100(context))
                    tvName.text = groupMember.scope
                    createdView.visibility =
                        if (groupMember.scope == UIKitConstants.GroupMemberScope.PARTICIPANTS) View.VISIBLE else View.GONE
                }
            })
    ```
  </Tab>
</Tabs>

#### setOverflowMenu

Allows customization of the overflow menu (three-dot ⋮ icon) with additional options.

Use Cases:

* Add extra actions like "Report Member", "Restrict from Posting".
* Provide group admins with moderation options.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupMembers.setOverflowMenu(v);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupMembers.setOverflowMenu(v)
    ```
  </Tab>
</Tabs>

Example:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOTukDN54hvEwBMP/images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png?fit=max&auto=format&n=FOTukDN54hvEwBMP&q=85&s=75afe8d45a78a7b937ebd14dd7d7892b" width="1280" height="800" data-path="images/fb7e32ac-group_members_tail_view-19ea33e3931012467d4df750210007fe.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    ImageView addMemberIv = new ImageView(this);
    addMemberIv.setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_add, null));
    cometchatGroupMembers.setOverflowMenu(addMemberIv);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val addMemberIv = ImageView(this)
    addMemberIv.setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_add, null))
    cometchatGroupMembers.setOverflowMenu(addMemberIv)
    ```
  </Tab>
</Tabs>