Group Members

CometChatGroupMembers renders a scrollable list of all members in a specific group with real-time updates for membership changes, search, avatars, scope badges, and online/offline status indicators. Requires a Group object to load data.

Where It Fits

CometChatGroupMembers is a list component. It renders all members of a given group and emits the selected GroupMember via onItemClick. Use it inside a group detail screen or as a standalone member browser.

Kotlin (XML Views)
Jetpack Compose

activity_group_members.xml

<com.cometchat.uikit.kotlin.presentation.groupmembers.ui.CometChatGroupMembers
    android:id="@+id/group_members"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

val groupMembers = findViewById<CometChatGroupMembers>(R.id.group_members)
groupMembers.setGroup(group)

groupMembers.setOnItemClick { groupMember ->
    // Navigate to member profile or start DM
}

CometChatGroupMembers(
    group = group,
    modifier = Modifier.fillMaxSize(),
    onItemClick = { groupMember ->
        // Navigate to member profile or start DM
    }
)

Quick Start

Kotlin (XML Views)
Jetpack Compose

Add to your layout XML:

<com.cometchat.uikit.kotlin.presentation.groupmembers.ui.CometChatGroupMembers
    android:id="@+id/group_members"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Then set the group in your Activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_group_members)

    val groupMembers = findViewById<CometChatGroupMembers>(R.id.group_members)
    groupMembers.setGroup(group) // Required — must be called before data loads
}

@Composable
fun GroupMembersScreen(group: Group) {
    CometChatGroupMembers(
        group = group,
        modifier = Modifier.fillMaxSize()
    )
}

Prerequisites: CometChat SDK initialized with CometChatUIKit.init(), a user logged in, and the UI Kit dependency added. Or in a Fragment:

Kotlin (XML Views)
Jetpack Compose

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    val view = CometChatGroupMembers(requireContext())
    view.setGroup(group)
    return view
}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    return ComposeView(requireContext()).apply {
        setContent { CometChatGroupMembers(group = group) }
    }
}

Filtering Group Members

Kotlin (XML Views)
Jetpack Compose

Pass a GroupMembersRequest.GroupMembersRequestBuilder to control what loads:

groupMembers.setGroupMembersRequestBuilder(
    GroupMembersRequest.GroupMembersRequestBuilder(group.guid)
        .setLimit(20)
        .setScopes(listOf("admin", "moderator"))
)

CometChatGroupMembers(
    group = group,
    groupMembersRequestBuilder = GroupMembersRequest.GroupMembersRequestBuilder(group.guid)
        .setLimit(20)
        .setScopes(listOf("admin", "moderator"))
)

Filter Recipes

Recipe	Builder method
Limit per page	`.setLimit(10)`
Search by keyword	`.setSearchKeyword("john")`
Filter by scopes	`.setScopes(listOf("admin", "moderator"))`

Pass the builder object, not the result of .build(). The component calls .build() internally. Default page size is 30 with infinite scroll.

Actions and Events

Callback Methods

`onItemClick`

Fires when a member row is tapped. Primary navigation hook.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnItemClick { groupMember ->
    // Navigate to member profile
}

CometChatGroupMembers(
    group = group,
    onItemClick = { groupMember ->
        // Navigate to member profile
    }
)

Replaces the default item-click behavior. Your custom lambda executes instead of the built-in navigation.

`onItemLongClick`

Fires when a member row is long-pressed. Use for additional actions like kick or ban.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnItemLongClick { groupMember ->
    // Show context menu
}

CometChatGroupMembers(
    group = group,
    onItemLongClick = { groupMember ->
        // Show context menu
    }
)

`onBackPress`

Fires when the user presses the back button in the toolbar.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnBackPress {
    finish()
}

CometChatGroupMembers(
    group = group,
    onBackPress = { /* navigate back */ }
)

`onSearchClick`

Fires when the user taps the search icon in the toolbar.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnSearchClick {
    // Open search screen
}

CometChatGroupMembers(
    group = group,
    onSearchClick = { /* open search */ }
)

`onSelection`

Fires when members are selected/deselected in multi-select mode.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setSelectionMode(UIKitConstants.SelectionMode.MULTIPLE)
groupMembers.setOnSelection { selectedMembers ->
    updateToolbar(selectedMembers.size)
}

CometChatGroupMembers(
    group = group,
    selectionMode = UIKitConstants.SelectionMode.MULTIPLE,
    onSelection = { selectedMembers ->
        updateToolbar(selectedMembers.size)
    }
)

`onError`

Fires on internal errors (network failure, auth issue, SDK exception).

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnError { exception ->
    Log.e("GroupMembers", "Error: ${exception.message}")
}

CometChatGroupMembers(
    group = group,
    onError = { exception ->
        Log.e("GroupMembers", "Error: ${exception.message}")
    }
)

`onLoad`

Fires when the list is successfully fetched and loaded.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnLoad { memberList ->
    Log.d("GroupMembers", "Loaded ${memberList.size}")
}

CometChatGroupMembers(
    group = group,
    onLoad = { memberList ->
        Log.d("GroupMembers", "Loaded ${memberList.size}")
    }
)

`onEmpty`

Fires when the list is empty after loading.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOnEmpty {
    Log.d("GroupMembers", "No members found")
}

CometChatGroupMembers(
    group = group,
    onEmpty = { /* no members */ }
)

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual setup needed.

SDK Listener	Internal behavior
`onGroupMemberJoined`	Adds the new member to the list
`onGroupMemberLeft`	Removes the member from the list
`onGroupMemberKicked`	Removes the kicked member
`onGroupMemberBanned`	Removes the banned member
`onGroupMemberUnbanned`	Updates the member list
`onGroupMemberScopeChanged`	Updates the member’s scope badge
`onMemberAddedToGroup`	Adds new members to the list

Functionality

Method (Kotlin XML)	Compose Parameter	Description
`setGroup(group)`	`group = group`	Set the group to load members for (required)
`setBackIconVisibility(View.VISIBLE)`	`hideBackIcon = false`	Toggle back button
`setToolbarVisibility(View.GONE)`	`hideToolbar = true`	Toggle toolbar
`setSearchBoxVisibility(View.GONE)`	`hideSearchBox = true`	Toggle search box
`setSeparatorVisibility(View.GONE)`	`hideSeparator = true`	Toggle list separators
`setSelectionMode(MULTIPLE)`	`selectionMode = MULTIPLE`	Enable selection mode
`setTitle("Members")`	`title = "Members"`	Custom toolbar title
`setSearchPlaceholderText("Find...")`	`searchPlaceholderText = "Find..."`	Search placeholder

Custom View Slots

Leading View

Replace the avatar / left section.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setLeadingView(object : GroupMembersViewHolderListener() {
    override fun createView(context: Context, binding: CometchatListBaseItemsBinding): View {
        return ImageView(context).apply {
            layoutParams = ViewGroup.LayoutParams(48.dp, 48.dp)
        }
    }

    override fun bindView(
        context: Context, createdView: View, groupMember: GroupMember,
        holder: RecyclerView.ViewHolder, memberList: List<GroupMember>, position: Int
    ) {
        val imageView = createdView as ImageView
        // Load member avatar
    }
})

CometChatGroupMembers(
    group = group,
    leadingView = { groupMember ->
        CometChatAvatar(
            imageUrl = groupMember.avatar,
            name = groupMember.name
        )
    }
)

Title View

Replace the name / title text.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setTitleView(object : GroupMembersViewHolderListener() {
    override fun createView(context: Context, binding: CometchatListBaseItemsBinding): View {
        return TextView(context)
    }

    override fun bindView(
        context: Context, createdView: View, groupMember: GroupMember,
        holder: RecyclerView.ViewHolder, memberList: List<GroupMember>, position: Int
    ) {
        (createdView as TextView).text = groupMember.name ?: ""
    }
})

CometChatGroupMembers(
    group = group,
    titleView = { groupMember ->
        Text(
            text = groupMember.name ?: "",
            style = CometChatTheme.typography.heading4Medium
        )
    }
)

Subtitle View

Replace the subtitle text below the member’s name.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setSubtitleView(object : GroupMembersViewHolderListener() {
    override fun createView(context: Context, binding: CometchatListBaseItemsBinding): View {
        return TextView(context).apply { maxLines = 1; ellipsize = TextUtils.TruncateAt.END }
    }

    override fun bindView(
        context: Context, createdView: View, groupMember: GroupMember,
        holder: RecyclerView.ViewHolder, memberList: List<GroupMember>, position: Int
    ) {
        (createdView as TextView).text = "Scope: ${groupMember.scope}"
    }
})

CometChatGroupMembers(
    group = group,
    subtitleView = { groupMember ->
        Text(
            text = "Scope: ${groupMember.scope}",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
)

Trailing View

Replace the right section of each member item.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setTrailingView(object : GroupMembersViewHolderListener() {
    override fun createView(context: Context, binding: CometchatListBaseItemsBinding): View {
        return TextView(context)
    }

    override fun bindView(
        context: Context, createdView: View, groupMember: GroupMember,
        holder: RecyclerView.ViewHolder, memberList: List<GroupMember>, position: Int
    ) {
        (createdView as TextView).text = groupMember.scope ?: ""
    }
})

CometChatGroupMembers(
    group = group,
    trailingView = { groupMember ->
        Text(text = groupMember.scope ?: "")
    }
)

Item View

Replace the entire list item row.

Kotlin (XML Views)
Jetpack Compose

groupMembers.setItemView(object : GroupMembersViewHolderListener() {
    override fun createView(context: Context, binding: CometchatListBaseItemsBinding): View {
        return LayoutInflater.from(context).inflate(R.layout.custom_member_item, null)
    }

    override fun bindView(
        context: Context, createdView: View, groupMember: GroupMember,
        holder: RecyclerView.ViewHolder, memberList: List<GroupMember>, position: Int
    ) {
        val avatar = createdView.findViewById<CometChatAvatar>(R.id.custom_avatar)
        val title = createdView.findViewById<TextView>(R.id.tvName)
        title.text = groupMember.name
        avatar.setAvatar(groupMember.name, groupMember.avatar)
    }
})

CometChatGroupMembers(
    group = group,
    itemView = { groupMember ->
        Row(
            modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            CometChatAvatar(imageUrl = groupMember.avatar, name = groupMember.name)
            Spacer(Modifier.width(12.dp))
            Column {
                Text(groupMember.name ?: "", style = CometChatTheme.typography.heading4Medium)
                Text(groupMember.scope ?: "", style = CometChatTheme.typography.body3Regular)
            }
        }
    }
)

State Views

Kotlin (XML Views)
Jetpack Compose

groupMembers.setEmptyView(R.layout.custom_empty_view)
groupMembers.setErrorView(R.layout.custom_error_view)
groupMembers.setLoadingView(R.layout.custom_loading_view)

CometChatGroupMembers(
    group = group,
    emptyView = { Text("No members found") },
    errorView = { onRetry -> Button(onClick = onRetry) { Text("Retry") } },
    loadingView = { CircularProgressIndicator() }
)

Kotlin (XML Views)
Jetpack Compose

groupMembers.setOverflowMenu(ImageButton(context).apply {
    setImageResource(R.drawable.ic_add_member)
    setOnClickListener { /* add member */ }
})

CometChatGroupMembers(
    group = group,
    overflowMenu = {
        IconButton(onClick = { /* add member */ }) {
            Icon(painterResource(R.drawable.ic_add_member), "Add Member")
        }
    }
)

Kotlin (XML Views)
Jetpack Compose

// Replace all options
groupMembers.setOptions { context, groupMember ->
    listOf(
        CometChatPopupMenu.MenuItem(id = "kick", name = "Kick", onClick = { /* ... */ }),
        CometChatPopupMenu.MenuItem(id = "ban", name = "Ban", onClick = { /* ... */ })
    )
}

// Append to defaults
groupMembers.setAddOptions { context, groupMember ->
    listOf(
        CometChatPopupMenu.MenuItem(id = "promote", name = "Promote", onClick = { /* ... */ })
    )
}

CometChatGroupMembers(
    group = group,
    options = { context, groupMember ->
        listOf(
            MenuItem(id = "kick", name = "Kick", onClick = { /* ... */ }),
            MenuItem(id = "ban", name = "Ban", onClick = { /* ... */ })
        )
    },
    addOptions = { context, groupMember ->
        listOf(MenuItem(id = "promote", name = "Promote", onClick = { /* ... */ }))
    }
)

Common Patterns

Minimal list — hide all chrome

Kotlin (XML Views)
Jetpack Compose

groupMembers.setToolbarVisibility(View.GONE)
groupMembers.setSearchBoxVisibility(View.GONE)
groupMembers.setSeparatorVisibility(View.GONE)

CometChatGroupMembers(
    group = group,
    hideToolbar = true,
    hideSearchBox = true,
    hideSeparator = true
)

Admins and moderators only

Kotlin (XML Views)
Jetpack Compose

groupMembers.setGroupMembersRequestBuilder(
    GroupMembersRequest.GroupMembersRequestBuilder(group.guid)
        .setScopes(listOf("admin", "moderator"))
)

CometChatGroupMembers(
    group = group,
    groupMembersRequestBuilder = GroupMembersRequest.GroupMembersRequestBuilder(group.guid)
        .setScopes(listOf("admin", "moderator"))
)

Advanced Methods

Programmatic Selection

Kotlin (XML Views)
Jetpack Compose

// Enable selection
groupMembers.setSelectionMode(UIKitConstants.SelectionMode.MULTIPLE)

// Select a member
groupMembers.selectGroupMember(member, UIKitConstants.SelectionMode.MULTIPLE)

// Get selected
val selected = groupMembers.getSelectedGroupMembers()

// Clear
groupMembers.clearSelection()

Selection is managed via the selectionMode and onSelection parameters. The component handles selection state internally.

ViewModel Access

val factory = CometChatGroupMembersViewModelFactory()
val viewModel = ViewModelProvider(this, factory)
    .get(CometChatGroupMembersViewModel::class.java)

Kotlin (XML Views)
Jetpack Compose

groupMembers.setViewModel(viewModel)

CometChatGroupMembers(
    group = group,
    groupMembersViewModel = viewModel
)

See ViewModel & Data for ListOperations, state observation, and custom repositories.

Style

Kotlin (XML Views)
Jetpack Compose

Define a custom style in themes.xml:

themes.xml

<style name="CustomGroupMembersAvatarStyle" parent="CometChatAvatarStyle">
    <item name="cometchatAvatarStrokeRadius">8dp</item>
    <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
</style>

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

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatGroupMembersStyle">@style/CustomGroupMembersStyle</item>
</style>

CometChatGroupMembers(
    group = group,
    style = CometChatGroupMembersStyle.default().copy(
        backgroundColor = Color(0xFFF5F5F5),
        titleTextColor = Color(0xFF141414),
        itemStyle = CometChatGroupMembersItemStyle.default().copy(
            backgroundColor = Color.White,
            titleTextColor = Color(0xFF141414),
            subtitleTextColor = Color(0xFF727272),
            avatarStyle = CometChatAvatarStyle.default().copy(cornerRadius = 12.dp),
            statusIndicatorStyle = CometChatStatusIndicatorStyle.default().copy()
        )
    )
)

Style Properties

Property	Description
`backgroundColor`	List background color
`titleTextColor`	Toolbar title color
`searchBoxStyle`	Search box appearance
`itemStyle.backgroundColor`	Row background
`itemStyle.selectedBackgroundColor`	Selected row background
`itemStyle.titleTextColor`	Member name color
`itemStyle.subtitleTextColor`	Subtitle text color
`itemStyle.separatorColor`	Row separator color
`itemStyle.avatarStyle`	Avatar appearance
`itemStyle.statusIndicatorStyle`	Online/offline indicator

See Component Styling for the full reference.

Next Steps

Groups

Browse and search available groups

Conversations

Browse recent conversations

Component Styling

Detailed styling reference with screenshots

ViewModel & Data

Custom ViewModels, repositories, and ListOperations

Where It Fits

Quick Start

Filtering Group Members

Filter Recipes

Actions and Events

Callback Methods

`onItemClick`

`onItemLongClick`

`onBackPress`

`onSearchClick`

`onSelection`

`onError`

`onLoad`

`onEmpty`

SDK Events (Real-Time, Automatic)

Functionality

Custom View Slots

Leading View

Title View

Subtitle View

Trailing View

Item View

State Views

Overflow Menu

Menu Options

Common Patterns

Minimal list — hide all chrome

Admins and moderators only

Advanced Methods

Programmatic Selection

ViewModel Access

Style

Style Properties

Next Steps

Groups

Conversations

Component Styling

ViewModel & Data

​Where It Fits

​Quick Start

​Filtering Group Members

​Filter Recipes

​Actions and Events

​Callback Methods

​onItemClick

​onItemLongClick

​onBackPress

​onSearchClick

​onSelection

​onError

​onLoad

​onEmpty

​SDK Events (Real-Time, Automatic)

​Functionality

​Custom View Slots

​Leading View

​Title View

​Subtitle View

​Trailing View

​Item View

​State Views

​Overflow Menu

​Menu Options

​Common Patterns

​Minimal list — hide all chrome

​Admins and moderators only

​Advanced Methods

​Programmatic Selection

​ViewModel Access

​Style

​Style Properties

​Next Steps

Groups

Conversations

Component Styling

ViewModel & Data

Where It Fits

Quick Start

Filtering Group Members

Filter Recipes

Actions and Events

Callback Methods

`onItemClick`

`onItemLongClick`

`onBackPress`

`onSearchClick`

`onSelection`

`onError`

`onLoad`

`onEmpty`

SDK Events (Real-Time, Automatic)

Functionality

Custom View Slots

Leading View

Title View

Subtitle View

Trailing View

Item View

State Views

Overflow Menu

Menu Options

Common Patterns

Minimal list — hide all chrome

Admins and moderators only

Advanced Methods

Programmatic Selection

ViewModel Access

Style

Style Properties

Next Steps