Skip to main content
tip

This feature is supported starting from version 5.12.0.

Group Pages

Group-related pages include contact selection, group creation, group settings, and group member list functionalities.

Enable Services​

Before using this feature, you need to enable the User Profile Hosting service in the Console.

Contact Selection/Addition Page​

The contact selection/addition page displays the current user's friend list from the User Profile Hosting service by default.

The contact selection page allows users to select friends from their friend list. Users can select multiple friends for operations like group creation or sending invitations. Below are detailed descriptions of components related to the FriendSelect page:

  • FriendSelectActivity: The container class for the friend selection page, responsible for loading and displaying FriendSelectFragment.
  • FriendSelectFragment: The core component of the friend selection page, responsible for displaying the friend selection list, search box, and other UI elements, as well as handling user selection actions.
  • FriendSelectViewModel: The class for data and business logic processing, responsible for fetching friend list data, handling selected friends, and passing data to FriendSelectFragment.
  • XML Layout: rc_page_friend_select.xml

Launch the Contact Selection Page and Configure the Maximum Selectable Count​

The default maximum selectable count is 30. The configured value must be greater than 0 and less than or equal to 30.

   int maxCount = 30;
   startActivity(FriendSelectActivity.newIntent(this, maxCount));

For details, see the custom Fragment section in User Profile Hosting Page Design.

Intercept Selection Completion Callback​

// Custom CustomFriendSelectFragment
public class CustomFriendSelectFragment extends FriendListFragment {

    @Override
    protected void onViewReady(@NonNull FriendSelectViewModel viewModel) {
      super.onViewReady(viewModel);
      // Override the confirm click event
      headComponent.setRightClickListener(
                v -> {
                    // Selected contacts
                    List<ContactModel> value = viewModel.getSelectedContactsLiveData().getValue();
                    if (value == null || value.isEmpty()) {
                        return;
                    }
                    List<String> inviteeUserIds = new ArrayList<>();
                    for (int i = 0; i < value.size(); i++) {
                        Object bean = value.get(i).getBean();
                        if (bean instanceof FriendInfo) {
                            inviteeUserIds.add(((FriendInfo) bean).getUserId());
                        }
                    }
                    startActivity(GroupCreateActivity.newIntent(getContext(), inviteeUserIds));
                });
    }
}

Group Creation Page​

The group creation page is used to create new groups, providing functionalities like entering a group name, selecting group members, and creating the group. Below are detailed descriptions of components related to the group creation page:

  • GroupCreateActivity: The container class for the group creation page, responsible for loading and displaying GroupCreateFragment.
  • GroupCreateFragment: The core component of the group creation page, responsible for displaying the group name input field, group avatar, and handling user interactions for group creation.
  • GroupCreateViewModel: The class for data and business logic processing, responsible for group creation operations and passing the results to GroupCreateFragment.
  • XML Layout: rc_page_group_create.xml

Launch the Group Creation Page​

  List<String> inviteeUserIds = new ArrayList<>();
  String groupId = "groupId";
   startActivity(GroupCreateActivity.newIntent(getContext(), groupId, inviteeUserIds));

Customize Avatar Click Event​

// Custom CustomGroupCreateFragment
public class CustomGroupCreateFragment extends GroupCreateFragment {

    @Override
    protected void onViewReady(@NonNull GroupCreateViewModel viewModel) {
      super.onViewReady(viewModel);
      // Customize avatar click event
      ivGroupIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });
    }
}

Group Details Page​

The group details page displays and manages basic group information, providing functionalities like viewing group members, editing group details, adding or removing members, and disbanding or leaving the group:

  • GroupProfileActivity: The container class for the group details page, responsible for loading and displaying GroupProfileFragment.
  • GroupProfileFragment: The core component of the group details page, responsible for displaying group information, member lists, and handling related user interactions.
  • GroupProfileViewModel: The class for data and business logic processing, responsible for fetching group and member data from the server or locally and passing it to GroupProfileFragment.
  • XML Layout: rc_page_group_profile.xml

Configure the Number of Group Members Displayed on the Settings Page​

  // Maximum number of group members to display. Default is 30. The value must be ≥5 and ≤50.
  int displayMaxMemberCount = 30;
  startActivity(GroupProfileActivity.newIntent(this, conversationIdentifier, displayMaxMemberCount));
// Custom CustomGroupProfileFragment
public class CustomGroupProfileFragment extends GroupProfileFragment {

    @Override
    protected void onViewReady(@NonNull GroupProfileViewModel viewModel) {
      super.onViewReady(viewModel);
       // Handle add/remove member click events
        groupMembersAdapter.setOnGroupActionListener(
                new GroupMembersAdapter.OnGroupActionListener() {
                    @Override
                    public void addMemberClick() {
                        // Handle add member logic
                        
                    }

                    @Override
                    public void removeMemberClick() {
                        // Handle remove member logic
                        
                        }
                    }
                    
                    @Override
                    public void onGroupClicked(GroupMemberInfo groupMemberInfo) {
                        // Handle member click logic
                    }
                });
    }
}

Group Member List Page​

The group member list page displays all members in a group, providing search and member detail viewing functionalities. Developers can perform the following operations on this page:

  • View group member lists
  • Search for specific members
  • Click to view member details

Component descriptions:

  • GroupMemberListActivity: The container class for the group member list page, responsible for loading and displaying GroupMemberListFragment.
  • GroupMemberListFragment: The core component of the group member list page, responsible for displaying the member list, search box, and handling related user interactions.
  • GroupMemberListViewModel: The class for data and business logic processing, responsible for fetching member data from the server or locally and passing it to GroupMemberListFragment.
  • XML Layout: rc_page_group_member_list.xml

Launch the Group Member List Page and Configure Members per Page​

  // Members per page. Default is 50. Value must be >0 and ≤100.
  int displayMaxMemberCount = 50;
  startActivity(GroupMemberListActivity.newIntent(
                                        getContext(), conversationIdentifier, displayMaxMemberCount))

Add Group Members Page​

The add group members page is used to invite new members to a group, providing functionalities like viewing contact lists, selecting contacts, and sending invitations. Component descriptions:

  • AddGroupMembersActivity: The container class for the add group members page, responsible for loading and displaying AddGroupMembersFragment, and managing page navigation and parameter passing.
  • AddGroupMembersFragment: The core component of the add group members page, responsible for displaying contact lists, searching contacts, and handling invitation interactions. Uses AddGroupMembersViewModel to fetch data and update the UI.
  • AddGroupMembersViewModel: The class for data and business logic processing, responsible for fetching contact lists and group member data from the server or locally, and passing it to AddGroupMembersFragment. Handles contact selection, filtering, and invitation logic.
  • XML Layout: rc_page_group_add_member.xml

Launch the Add Group Members Page and Configure Maximum Selectable Count​

The default maximum selectable count is 30. The configured value must be >0 and ≤30.

   int maxCount = 30;
   ConversationIdentifier conversationIdentifier = getConversationIdentifier();
   startActivity(AddGroupMembersActivity.newIntent(this, conversationIdentifier, maxCount));

Remove Group Members Page​

The remove group members page is used to remove members from a group, providing functionalities like viewing contact lists, selecting contacts, and executing removal operations. Component descriptions:

  • RemoveGroupMembersActivity: The container class for the remove group members page, responsible for loading and displaying RemoveGroupMembersFragment, and managing page navigation and parameter passing.
  • RemoveGroupMembersFragment: The core component of the remove group members page, responsible for displaying contact lists, searching contacts, and handling removal interactions. Uses RemoveGroupMembersViewModel to fetch data and update the UI.
  • RemoveGroupMembersViewModel: The class for data and business logic processing, responsible for fetching contact lists and group member data from the server or locally, and passing it to RemoveGroupMembersFragment. Handles contact selection, filtering, and removal logic.
  • XML Layout: rc_page_group_remove_member.xml

Launch the Remove Group Members Page​

   ConversationIdentifier conversationIdentifier = getConversationIdentifier();
  GroupMemberRole role = GroupMemberRole;
   startActivity(RemoveGroupMembersActivity.newIntent(this, conversationIdentifier, role));
Last updated on