> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Groups With Messages

> Groups With Messages — CometChat documentation.

## Overview

`CometChatGroupsWithMessages` is a [Composite Component](/ui-kit/android/v4/components-overview#composite-components) encapsulating functionalities from the [Groups](/ui-kit/android/v4/groups) and [Messages](/ui-kit/android/v4/messages) components. Serving as a versatile wrapper, it seamlessly integrates with CometChatMessages, enabling users to open the module by clicking on any group within the list. This component inherits the behavior of Groups, fostering consistency and familiarity in user interactions.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/gHkTur1I2BmQKdRR/images/07089436-groups_with_messages_overview_cometchat_screens-3a5e80854ecee1ffd4c9ce2a99ff6ea4.png?fit=max&auto=format&n=gHkTur1I2BmQKdRR&q=85&s=a41a40f1e5af98f445c96b3fc251552e" width="4498" height="3120" data-path="images/07089436-groups_with_messages_overview_cometchat_screens-3a5e80854ecee1ffd4c9ce2a99ff6ea4.png" />
</Frame>

| Components                              | Description                                                                                                                    |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [Groups](/ui-kit/android/v4/groups)     | The `Groups` component is designed to display a list of `Groups`. This essentially represents the recent conversation history. |
| [Messages](/ui-kit/android/v4/messages) | The `Messages` component is designed to manage the messaging interaction for `Group's` conversations.                          |

***

## Usage

### Integration

As `CometChatGroupsWithMessages` is a [Composite Component](/ui-kit/android/v4/components-overview#components), it can be effortlessly added directly in response to a button click or any event. Leveraging all the customizable properties and methods inherited from Groups, this component offers seamless integration and extensive customization capabilities. This makes it a versatile solution for enhancing user interaction within your application.

`CometChatGroupsWithMessages` can be launched by adding the following code snippet into XML layout file.

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

***

##### Activity and Fragment

You can integrate `CometChatGroupsWithMessages` into your Activity and Fragment by adding the following code snippets into the respective classes.

<Tabs>
  <Tab title="Java (Activity)">
    ```java YourActivity.java theme={null}
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new CometChatGroupsWithMessages(this));
    }
    ```
  </Tab>

  <Tab title="Kotlin (Activity)">
    ```kotlin YourActivity.kt theme={null}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(CometChatGroupsWithMessages(this))
    }
    ```
  </Tab>

  <Tab title="Java (Fragment)">
    ```java YourFragment.java theme={null}
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return new CometChatGroupsWithMessages(requireContext());
    }
    ```
  </Tab>

  <Tab title="Kotlin (Fragment)">
    ```kotlin YourFragment.kt theme={null}
    fun onCreateView(
        inflater: LayoutInflater?, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return CometChatGroupsWithMessages(requireContext())
    }
    ```
  </Tab>
</Tabs>

In all the above examples, `CometChatGroupsWithMessages` is the custom view class that you want to set as the content of your activity or the view for your fragment. This will display the CometChat groups with messages in your activity or fragment.

***

### Actions

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

##### 1. onError

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

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupsWithMessages.setOnError(new OnError() {
        @Override
        public void onError(Context context, CometChatException e) {
            //Your Exception Handling code.
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupsWithMessages.setOnError(object : OnError() {
        fun onError(context: Context?, e: CometChatException?) {
            //Your Exception Handling code.
        }
    })
    ```
  </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.

While the GroupWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Group Filters](/ui-kit/android/v4/groups#filters)

***

### Events

[Events](/ui-kit/android/v4/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.

The `CometChatGroupsWithMessages` does not produce any events but its component does.

***

## Customization

To fit your app's design requirements, you have the ability to customize the appearance of the `CometChatGroupsWithMessages` 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.

You can also customize its component styles. For more details on individual component styles, you can refer [Groups Styles](/ui-kit/android/v4/groups#style) and [Messages Styles](/ui-kit/android/v4/messages#style).

Styles can be applied to SubComponents using their respective configurations.

**Example**

Here we are changing the style of [Groups](/ui-kit/android/v4/groups) and [Messages](/ui-kit/android/v4/messages) component using [GroupsConfiguration](/ui-kit/android/v4/groups-with-messages#groups) and [MessageConfiguration](/ui-kit/android/v4/groups-with-messages#messages)

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    // Configure and apply group and message styling in a CometChatGroupsWithMessages

    // Step 1: Create a GroupsStyle object to define group visual styling
    GroupsStyle groupsStyle = new GroupsStyle();

    // Step 2: Set the background color of the group to gray
    groupsStyle.setBackground(Color.GRAY);

    // Step 3: Set the border width of the group to 30 units
    groupsStyle.setBorderWidth(30);

    // Step 4: Create a GroupsConfiguration object to hold the group styling configuration
    GroupsConfiguration groupsConfiguration = new GroupsConfiguration();

    // Step 5: Apply the defined group style to the GroupsConfiguration object
    groupsConfiguration.setStyle(groupsStyle);

    // Step 6: Apply the GroupsConfiguration to the CometChat groups and messages component
    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration);

    // Step 7: Create a MessagesStyle object to define message visual styling
    MessagesStyle messagesStyle = new MessagesStyle();

    // Step 8: Set the background color of the messages to black
    messagesStyle.setBackground(Color.BLACK);

    // Step 9: Create a MessagesConfiguration object to hold the message styling configuration
    MessagesConfiguration messagesConfiguration = new MessagesConfiguration();

    // Step 10: Apply the defined message style to the MessagesConfiguration object
    messagesConfiguration.setStyle(messagesStyle);

    // Step 11: Apply the MessagesConfiguration to the CometChat groups and messages component
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    // Configure and apply group and message styling in a CometChatGroupsWithMessages

    // Step 1: Create a GroupsStyle object to define group visual styling
    val groupsStyle = GroupsStyle()

    // Step 2: Set the background color of the group to gray
    groupsStyle.setBackground(Color.GRAY)

    // Step 3: Set the border width of the group to 30 units
    groupsStyle.setBorderWidth(30)

    // Step 4: Create a GroupsConfiguration object to hold the group styling configuration
    val groupsConfiguration = GroupsConfiguration()

    // Step 5: Apply the defined group style to the GroupsConfiguration object
    groupsConfiguration.setStyle(groupsStyle)

    // Step 6: Apply the GroupsConfiguration to the CometChat groups and messages component
    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration)

    // Step 7: Create a MessagesStyle object to define message visual styling
    val messagesStyle = MessagesStyle()

    // Step 8: Set the background color of the messages to black
    messagesStyle.setBackground(Color.BLACK)

    // Step 9: Create a MessagesConfiguration object to hold the message styling configuration
    val messagesConfiguration = MessagesConfiguration()

    // Step 10: Apply the defined message style to the MessagesConfiguration object
    messagesConfiguration.setStyle(messagesStyle)

    // Step 11: Apply the MessagesConfiguration to the CometChat groups and messages component
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration)
    ```
  </Tab>
</Tabs>

***

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

CometChatGroupsWithMessages component does not have any available functionality. You can use Functional customisation its [Components](/ui-kit/android/v4/components-overview#components). For more details on individual component functionalities, you can refer [Groups Functionalities](/ui-kit/android/v4/groups#functionality) and [Messages functionalities](/ui-kit/android/v4/messages#functionality).

***

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

CometChatGroupsWithMessages component does not have any advanced-level customization . You can use Advanced customisation its [Components](/ui-kit/android/v4/components-overview#components). For more details on individual component functionalities, you can refer [Groups Advanced](/ui-kit/android/v4/groups#advanced) and [Messages Advanced](/ui-kit/android/v4/messages#advanced).

CometChatGroupsWithMessages uses advanced-level customization of both Groups & Messages components to achieve its default behavior.

1. CometChatGroupsWithMessages utilizes the [Itemclicklistener](/ui-kit/android/v4/groups#2-itemclicklistener) function of the `Groups` subcomponent to navigate the [Groups](/ui-kit/android/v4/groups) to [Messages](/ui-kit/android/v4/messages)

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/v4EbHQCGZ54oJcmr/images/58ee4322-groups_with_messages_groups_to_message_cometchat_screens-880e52087a16c05489bd75cb8728c111.png?fit=max&auto=format&n=v4EbHQCGZ54oJcmr&q=85&s=b33e7bbb1d487b61af97474319ec8f72" width="4498" height="3120" data-path="images/58ee4322-groups_with_messages_groups_to_message_cometchat_screens-880e52087a16c05489bd75cb8728c111.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometchatGroupsWithMessages.setItemClickListener(new OnItemClickListener<Group>() {
        @Override
        public void OnItemClick(Group group, int index) {
            // Your action
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometchatGroupsWithMessages.setItemClickListener(object : OnItemClickListener<Group>() {
        fun OnItemClick(group: Group, i: index) {
            //Your action
        }
    })
    ```
  </Tab>
</Tabs>

<Warning>
  When you override `.setItemClickListener()`, the default behavior of **CometChatGroupsWithMessages** will also be overridden.
</Warning>

***

2. CometChatGroupsWithMessages utilizes the [SetMenu](/ui-kit/android/v4/groups) function of the `Messages` subcomponent to navigatefrom [Create Group](/ui-kit/android/v4/create-group) to [Details](/ui-kit/android/v4/group-details).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/LKT8U_07JOWQgTZK/images/0e1fd81f-groups_with_messages_to_details_cometchat_screens-b19d034ec6f1e29567b1c45bb4ea9332.png?fit=max&auto=format&n=LKT8U_07JOWQgTZK&q=85&s=b19d7ca088a5d979626e01ac44b7d157" width="4498" height="3120" data-path="images/0e1fd81f-groups_with_messages_to_details_cometchat_screens-b19d034ec6f1e29567b1c45bb4ea9332.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    ImageView imageView = new ImageView(requireContext());
    imageView.setBackground(AppCompatResources.getDrawable(requireContext(), R.drawable.ic_refresh_black));
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            
        }
    });
    cometchatGroupsWithMessages.setMenu(imageView);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val imageView = ImageView(requireContext())
    imageView.background = AppCompatResources.getDrawable(requireContext(), R.drawable.ic_refresh_black)
    imageView.setOnClickListener {

    }
    cometchatGroupsWithMessages.setMenu(imageView)
    ```
  </Tab>
</Tabs>

<Warning>
  When you override `.setMenu()`, the default behavior of **CometChatGroupsWithMessages** will also be overridden.
</Warning>

***

## Configurations

[Configurations](/ui-kit/android/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component.

**CometChatGroupsWithMessages** has `Groups` and `Messages` component. Hence, each of these components will have its individual `Configuration`. `Configurations` expose properties that are available in its individual components.

#### Groups

You can customize the properties of the Groups component by making use of the GroupsConfiguration. You can accomplish this by employing the following method as demonstrated below:

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    GroupsConfiguration groupsConfiguration =new GroupsConfiguration();

    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val groupsConfiguration = GroupsConfiguration()

    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration)
    ```
  </Tab>
</Tabs>

All exposed properties of `GroupsConfiguration` can be found under [Groups](/ui-kit/android/v4/groups#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Groups subcomponent

You can modify the style using the `GroupsStyle` method.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/aledzZZMtw_sXx4U/images/fc2044ae-groups_with_messages_configurations_groups_cometchat_screens-1d34f1881e7047a161d1205907ea45ff.png?fit=max&auto=format&n=aledzZZMtw_sXx4U&q=85&s=a14adf382e4b5d5cbd82bc1f021df21f" width="4498" height="3120" data-path="images/fc2044ae-groups_with_messages_configurations_groups_cometchat_screens-1d34f1881e7047a161d1205907ea45ff.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    GroupsStyle groupsStyle = new GroupsStyle();
    groupsStyle.setBackground(Color.GRAY);

    GroupsConfiguration groupsConfiguration =new GroupsConfiguration();
    groupsConfiguration.setStyle(groupsStyle);

    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val groupsStyle = GroupsStyle()
    groupsStyle.setBackground(Color.GRAY)

    val groupsConfiguration = GroupsConfiguration()
    groupsConfiguration.setStyle(groupsStyle)

    cometchatGroupsWithMessages.setGroupsConfiguration(groupsConfiguration)
    ```
  </Tab>
</Tabs>

***

#### Messages

You can customize the properties of the Messages component by making use of the `messagesConfiguration`. You can accomplish this by employing the `messagesConfiguration` as demonstrated below:

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    MessagesConfiguration messagesConfiguration =new MessagesConfiguration();
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messagesConfiguration = MessagesConfiguration()
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration)
    ```
  </Tab>
</Tabs>

All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/android/v4/messages#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Messages subcomponent and, in addition, you want to hide message composer.

You can modify the style using the `messagesStyle` method and hide using `hide(messageComposer: bool)` method.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Relz_yItqW5RHUsU/images/50c05689-users_with_messages_message_configuration_cometchat_screens-0e7e8f93370407ca96d5cb62c027d3ac.png?fit=max&auto=format&n=Relz_yItqW5RHUsU&q=85&s=ede72d9b4386f6c85140f98d25634a4a" width="4498" height="3120" data-path="images/50c05689-users_with_messages_message_configuration_cometchat_screens-0e7e8f93370407ca96d5cb62c027d3ac.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    MessagesConfiguration messagesConfiguration =new MessagesConfiguration();
    MessagesStyle messagesStyle = new MessagesStyle();
    messagesStyle.setBackground(Color.GRAY);
    messagesConfiguration.setStyle(messagesStyle);
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messagesConfiguration = MessagesConfiguration()
    val messagesStyle = MessagesStyle()
    messagesStyle.setBackground(Color.GRAY)
    messagesConfiguration.setStyle(messagesStyle)
    cometchatGroupsWithMessages.setMessagesConfiguration(messagesConfiguration)
    ```
  </Tab>
</Tabs>

***

#### Join Protected Group

You can customize the properties of the Join Group component by making use of the JoinGroupConfiguration. You can accomplish this by employing the `JoinProtectedGroupConfiguration` class as demonstrated below:

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    JoinProtectedGroupConfiguration joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration();

    cometChatGroupsWithMessages.setJoinGroupConfiguration(joinProtectedGroupConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val joinProtectedGroupConfiguration = JoinProtectedGroupConfiguration()

    cometChatGroupsWithMessages.setJoinGroupConfiguration(joinProtectedGroupConfiguration)
    ```
  </Tab>
</Tabs>

All exposed properties of `JoinProtectedGroupConfiguration` can be found under Join Group. 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 Join Group subcomponent.

You can modify the style using the `JoinProtectedGroupStyle` property.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Q-VZaihy61fy3D_G/images/21a07212-groups_with_messages_configurations_password_procted_group_cometchat_screens-2faab2e5e5902ae8b96dbe940dda4429.png?fit=max&auto=format&n=Q-VZaihy61fy3D_G&q=85&s=a972f9814aa921976b6368f0feec40e4" width="4498" height="3120" data-path="images/21a07212-groups_with_messages_configurations_password_procted_group_cometchat_screens-2faab2e5e5902ae8b96dbe940dda4429.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    JoinProtectedGroupStyle joinProtectedGroupStyle = new JoinProtectedGroupStyle();
    joinProtectedGroupStyle.setBackground(R.drawable.solid_background_color);
    joinProtectedGroupStyle.setJoinGroupIconTint(R.color.red);
    joinProtectedGroupStyle.setPasswordTextAppearance(R.style.MyTitleStyle);

    JoinProtectedGroupConfiguration joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration();
    joinProtectedGroupConfiguration.setStyle(joinProtectedGroupStyle);

    cometChatGroupsWithMessages.setJoinGroupConfiguration(joinProtectedGroupConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val joinProtectedGroupStyle = JoinProtectedGroupStyle()
    joinProtectedGroupStyle.setBackground(R.drawable.solid_background_color)
    joinProtectedGroupStyle.setJoinGroupIconTint(R.color.red)
    joinProtectedGroupStyle.setPasswordTextAppearance(R.style.MyTitleStyle)

    val joinProtectedGroupConfiguration = JoinProtectedGroupConfiguration()
    joinProtectedGroupConfiguration.setStyle(joinProtectedGroupStyle)

    cometChatGroupsWithMessages.setJoinGroupConfiguration(joinProtectedGroupConfiguration)
    ```
  </Tab>
</Tabs>

***

#### Create Group

You can customize the properties of the Create Group component by making use of the CreateGroupConfiguration. You can accomplish this by employing the `createGroupConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CreateGroupStyle createGroupStyle = new CreateGroupStyle();

    CreateGroupConfiguration createGroupConfiguration = new CreateGroupConfiguration();
    createGroupConfiguration.setStyle(createGroupStyle);

    cometChatGroupsWithMessages.setCreateGroupConfiguration(createGroupConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val createGroupStyle = CreateGroupStyle()

    val createGroupConfiguration = CreateGroupConfiguration()
    createGroupConfiguration.setStyle(createGroupStyle)

    cometChatGroupsWithMessages.setCreateGroupConfiguration(createGroupConfiguration)
    ```
  </Tab>
</Tabs>

All exposed properties of `CreateGroupConfiguration` can be found under [Create Group](/ui-kit/android/v4/create-group#configurations). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Create Group subcomponent.

You can modify the style using the `createGroupStyle` property.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CreateGroupStyle createGroupStyle = new CreateGroupStyle();
    createGroupStyle.setBackground(R.drawable.solid_background_color);
    createGroupStyle.setTitleTextColor(R.color.red);
    createGroupStyle.setBorderColor(R.color.red);

    CreateGroupConfiguration createGroupConfiguration = new CreateGroupConfiguration();
    createGroupConfiguration.setStyle(createGroupStyle);

    cometChatGroupsWithMessages.setCreateGroupConfiguration(createGroupConfiguration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val createGroupStyle = CreateGroupStyle()
    createGroupStyle.setBackground(R.drawable.solid_background_color)
    createGroupStyle.setTitleTextColor(R.color.red)
    createGroupStyle.setBorderColor(R.color.red)

    val createGroupConfiguration = CreateGroupConfiguration()
    createGroupConfiguration.setStyle(createGroupStyle)

    cometChatGroupsWithMessages.setCreateGroupConfiguration(createGroupConfiguration)
    ```
  </Tab>
</Tabs>

***