> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversations

> Conversations — CometChat documentation.

## Overview

The Conversations is a [Component](/ui-kit/android/v4/components-overview#components), That shows all conversations related to the currently logged-in user,

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e309d85b-conversation_overview_cometchat_screens-8494d8f69310b9d6570ca97bc7f47efd.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=828f8e83242ec1a4cd1ca939f80867a1" width="4498" height="3120" data-path="images/e309d85b-conversation_overview_cometchat_screens-8494d8f69310b9d6570ca97bc7f47efd.png" />
</Frame>

## Usage

### Integration

There are multiple ways in which you can use Conversations in your app. **Layout File**: To use Conversations in your \`layout\_activity.xml, use the following code snippet.

```xml layout_activity.xml theme={null}
<com.cometchat.chatuikit.conversations.CometChatConversations
        android:id="@+id/conversation"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
```

2. **Activity**: To use Conversations in your Activity, use the following code snippet.

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

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

3. **Fragment**: To use `Conversations` in your `Fragment`, use the following code snippet.

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

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

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

`ItemClickListener` is triggered when you click on a ListItem of the Conversations component. The `ItemClickListener` action doesn't have a predefined behavior. You can override this action using the following code snippet.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setItemClickListener(new OnItemClickListener<Conversation>() {
                @Override
                public void OnItemClick(Conversation conversation, int i) {
                    // Your custom Action
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
     cometChatConversations.setItemClickListener(object : OnItemClickListener<Conversation> {
        override fun onItemClick(conversation: Conversation, position: Int) {
            // Your custom Action
        }
    })
    ```
  </Tab>
</Tabs>

***

##### 2. OnBackPressListener

`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}
    cometChatConversations.addOnBackPressListener(new CometChatListBase.OnBackPress() {
        @Override
        public void onBack() {
            // Action on app bar back press
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometChatConversations.addOnBackPressListener(object : CometChatListBase.OnBackPress {
        override fun onBack() {
            // Action on app bar back press
        }
    })
    ```
  </Tab>
</Tabs>

***

##### 3. OnSelection

The `OnSelection` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setOnSelection(new CometChatConversations.OnSelection() {
        @Override
        public void onSelection(List<Conversation> list) {
            //Your custom action
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometChatConversations.setOnSelection(object : CometChatConversations.OnSelection {
        override fun onSelection(list: List<Conversation>) {
            // Your custom action
        }
    })
    ```
  </Tab>
</Tabs>

***

##### 4. 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 YourActivity.java theme={null}
    cometChatConversations.setOnError(new OnError() {
        @Override
        public void onError(Context context, CometChatException e) {
            //Your Exception Handling code.
        }
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin YourActivity.kt theme={null}
    cometChatConversations.setOnError(object : OnError {
        override fun onError(context: Context, e: CometChatException) {
            // Your Exception Handling code.
        }
    })
    ```
  </Tab>
</Tabs>

***

### Filters

You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/android/retrieve-conversations).

You can set filters using the following parameters.

1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
2. **Limit:** Number of conversations fetched in a single request.
3. **WithTags:** Filter on fetching conversations containing tags
4. **Tags:** Filters on specific `Tag`
5. **UserTags:** Filters on specific User `Tag`
6. **GroupTags:** Filters on specific Group `Tag`

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    ConversationsRequest.ConversationsRequestBuilder builder = new ConversationsRequest.ConversationsRequestBuilder();
                builder.setConversationType(CometChatConstants.CONVERSATION_TYPE_USER);
                builder.setLimit(50);

    cometChatConversations.setConversationsRequestBuilder(builder);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val builder = ConversationsRequest.ConversationsRequestBuilder()
        builder.setConversationType(CometChatConstants.CONVERSATION_TYPE_USER)
        builder.setLimit(50)

    cometChatConversations.setConversationsRequestBuilder(builder)
    ```
  </Tab>
</Tabs>

***

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

##### 1. ConversationDeleted

This event will be emitted when the user deletes a conversation

<Tabs>
  <Tab title="Java">
    ```java Add Listener theme={null}
    CometChatConversationEvents.addListener("YOUR_LISTENER_TAG", new CometChatConversationEvents() {
        @Override
        public void ccConversationDeleted(Conversation conversation) {
            super.ccConversationDeleted(conversation);
        }
    });
    ```

    Remove Listener

    ```
    CometChatMessageEvents.removeListener("YOUR_LISTENER_TAG");
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin Add Listener theme={null}
    CometChatConversationEvents.addListener("LISTENER_TAG", object : CometChatConversationEvents() {
        override fun ccConversationDeleted(conversation: Conversation) {
            super.ccConversationDeleted(conversation)
        }
    })
    ```

    ```kotlin Remove Listener theme={null}
    CometChatMessageEvents.removeListener("YOUR_LISTENER_TAG");
    ```
  </Tab>
</Tabs>

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

##### 1. Conversation Style

You can set the `ConversationsStyle` to the `Conversations` Component to customize the styling.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    ConversationsStyle conversationsStyle = new ConversationsStyle();
        conversationsStyle.setBorderWidth(20);
        conversationsStyle.setBorderColor(Color.BLACK);
        conversationsStyle.setSeparatorColor(Color.DKGRAY);
        cometChatConversations.setStyle(conversationsStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val conversationsStyle = ConversationsStyle()
    conversationsStyle.borderWidth = 20
    conversationsStyle.borderColor = Color.BLACK
    conversationsStyle.separatorColor = Color.DKGRAY
    cometChatConversations.setStyle(conversationsStyle)
    ```
  </Tab>
</Tabs>

List of properties exposed by ConversationStyle

| Property                           | Description                                                               | Code                                           |
| ---------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------- |
| **Background Color**               | Used to set the background color                                          | `setBackground(@color init)`                   |
| **Background Drawable**            | Used to set background Drawable                                           | `setBackground(@drawable int)`                 |
| **Border Width**                   | Used to set border width                                                  | `setBorderWidth(int)`                          |
| **Border Color**                   | Used to set border color                                                  | `setBorderColor(@color ini)`                   |
| **Corner Radius**                  | Used to set border radius                                                 | `setCornerRadius(float)`                       |
| **Title Appearance**               | Used to customise the appearance of the title in the app bar              | `setTitleAppearance(@style int)`               |
| **BackIcon Tint**                  | Used to set the color of the back icon in the app bar                     | `setBackIconTint(@color int)`                  |
| **OnlineStatus Color**             | Used to set the color of the status indicator shown if a member is online | `setOnlineStatusColor(@color int)`             |
| **Separator Color**                | Used to set the color of the divider separating the group member items    | `setSeparatorColor(@color int)`                |
| **LastMessageText Appearance**     | Used to set the style of the text for the last message                    | `setLastMessageTextAppearance(@style int)`     |
| **ThreadIndicatorText Appearance** | Used to set the style of the text for the thread indicator                | `setThreadIndicatorTextAppearance(@style int)` |
| **ErrorText Color**                | Used to set the color of the text for the error Text.                     | `setErrorTextColor(@color int)`                |
| **LastMessageText Color**          | Used to set the color of the text for the last message.                   | `setLastMessageTextColor(@color int)`          |
| **TypingIndicatorTextColor**       | Used to set the color of the typing indicator text.                       | `setLastMessageTextColor(@color int)`          |
| **LastMessageText Color**          | Used to set the color of the text for the last message.                   | `setLastMessageTextColor(@color int)`          |
| **ThreadIndicatorText Color**      | Used to set the color of thread indicator text                            | `setThreadIndicatorTextColor(@color int)`      |

##### 2. Avatar Style

To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/android/v4/avatar#avatarstyle).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    AvatarStyle avatarStyle = new AvatarStyle();
    avatarStyle.setBorderWidth(10);
    avatarStyle.setBorderColor(Color.BLACK);
    cometChatConversations.setAvatarStyle(avatarStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val avatarStyle = AvatarStyle()
    avatarStyle.borderWidth = 10
    avatarStyle.borderColor = Color.BLACK
    cometChatConversations.setAvatarStyle(avatarStyle)
    ```
  </Tab>
</Tabs>

##### 3. StatusIndicator Style

To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Indicator Styles](/ui-kit/android/v4/status-indicator#customization).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    StatusIndicatorStyle statusIndicatorStyle = new StatusIndicatorStyle();
            statusIndicatorStyle.setCornerRadius(3.5f);
            statusIndicatorStyle.setBorderColor(Color.GREEN);
            cometChatConversations.setStatusIndicatorStyle(statusIndicatorStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val statusIndicatorStyle = StatusIndicatorStyle()
    statusIndicatorStyle.cornerRadius = 3.5f
    statusIndicatorStyle.borderColor = Color.GREEN
    cometChatConversations.setStatusIndicatorStyle(statusIndicatorStyle)
    ```
  </Tab>
</Tabs>

##### 4. Date Style

To apply customized styles to the `Date` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/android/v4/date#datestyle).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    DateStyle dateStyle = new DateStyle();
    dateStyle.setTextSize(20);
    dateStyle.setTextColor(Color.GRAY);
    cometChatConversations.setDateStyle(dateStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val dateStyle = DateStyle()
    dateStyle.setTextSize(20)
    dateStyle.setTextColor(Color.GRAY)
    cometChatConversations.setDateStyle(dateStyle)
    ```
  </Tab>
</Tabs>

##### 5. Badge Style

To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/android/v4/badge#customization).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    BadgeStyle badgeStyle = new BadgeStyle();
    badgeStyle.setTextColor(Color.WHITE);
    badgeStyle.setBorderColor(Color.BLACK);
    cometChatConversations.setBadgeStyle(badgeStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val badgeStyle = BadgeStyle()
    badgeStyle.setTextColor(Color.WHITE)
    badgeStyle.setBorderColor(Color.BLACK)
    cometChatConversations.setBadgeStyle(badgeStyle)
    ```
  </Tab>
</Tabs>

##### 6. LisItem Style

To apply customized styles to the `ListItemStyle` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [List Item Styles](/ui-kit/android/v4/list-item#listitemstyle).

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    ListItemStyle listItemStyle = new ListItemStyle();
            listItemStyle.setTitleColor(Color.BLACK);
            cometChatConversations.setListItemStyle(listItemStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val listItemStyle = ListItemStyle()
    listItemStyle.setTitleColor(Color.BLACK)
    cometChatConversations.setListItemStyle(listItemStyle)
    ```
  </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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/de3b2a8f-conversation_functionality_cometchat_screens-0856b233f9c72a6a3aea4613cbfecb52.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=b8337ff1021dd6c910fa4390a36de1ab" width="4498" height="3120" data-path="images/de3b2a8f-conversation_functionality_cometchat_screens-0856b233f9c72a6a3aea4613cbfecb52.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
        cometChatConversations.setTitle("Your Custom Title");
        cometChatConversations.showBackButton(true);
        cometChatConversations.backIcon(getDrawable(R.drawable.your_back_icon));
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setTitle("Your Custom Title")
    cometChatConversations.showBackButton(true)
    cometChatConversations.backIcon(getDrawable(R.drawable.your_back_icon))
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property               | Description                                                                                                                                                                                                                                     | Code                                                         |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| Title                  | Used to set custom title in the app bar.                                                                                                                                                                                                        | `.setTitle("Your Custom Title")`                             |
| EmptyState Text        | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `.emptyStateText("Your Custom Title")`                       |
| Selection Mode         | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `.setSelectionMode(UIKitConstants.SelectionMode.MULTIPLE);`  |
| SearchPlaceholder Text | Used to set placeholder text for the search field                                                                                                                                                                                               | `.setSearchPlaceholderText("YOUR_CUSTOM_PLACEHOLDER");`      |
| ProtectedGroup Icon    | Used to set icon shown in place of status indicator for password protected group                                                                                                                                                                | `.setProtectedGroupIcon(getDrawable(R.drawable.your_icon));` |
| SearchBox Icon         | Used to set search Icon in the search field                                                                                                                                                                                                     | `.setSearchBoxIcon(getDrawable(R.drawable.your_icon));`      |
| SentIcon Icon          | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is sent                                                                     | `.setSentIcon(getDrawable(R.drawable.your_icon));`           |
| Delivered Icon         | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is delivered                                                                | `.setDeliveredIcon(getDrawable(R.drawable.your_icon));`      |
| Read Icon              | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is read                                                                     | `.setReadIcon(getDrawable(R.drawable.your_icon))`            |
| Back Icon              | used to set back button located in the app bar                                                                                                                                                                                                  | `.backIcon(getDrawable(R.drawable.your_back_icon));`         |
| Show BackButton        | Used to toggle visibility for back button in the app bar                                                                                                                                                                                        | `.showBackButton(true);`                                     |
| Hide Search            | Used to toggle visibility for search box                                                                                                                                                                                                        | `.hideSearch(false);`                                        |
| Hide Error             | Used to hide error on fetching conversations                                                                                                                                                                                                    | `.hideError(false);`                                         |
| Hide Separator         | Used to control visibility of Separators in the list view                                                                                                                                                                                       | `.hideSeparator(false);`                                     |
| Disable UsersPresence  | Used to control visibility of status indicator shown if user is online                                                                                                                                                                          | `.disableUsersPresence(false);`                              |
| Hide Receipt           | Used to hide receipts shown in the subtitle of the conversation item without disabling the functionality of marking messages as read and delivered.                                                                                             | `.hideReceipt(false);`                                       |
| Disable Typing         | Used to toggle visibility of typing indicator                                                                                                                                                                                                   | `.disableTyping(false);`                                     |
| Disable Mentions       | Sets whether mentions in text should be disabled. Processes the text formatters If there are text formatters available and the disableMentions flag is set to true, it removes any formatters that are instances of CometChatMentionsFormatter. | `.setDisableMentions(true);`                                 |

### Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

***

#### SetListItemView

With this function, you can assign a custom ListItem to the Conversations Component.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setListItemView((context, conversation) -> {
         // Your code for customizing the list item view
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setListItemView { context, conversation ->
        // Your code for customizing the list item view
    }
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e497f835-conversation_list_item_view_cometchat_screens-5b12d36475a002214a00529058db5884.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=94eb8e3df56f7c217c5cb1c6b0785857" width="4498" height="3120" data-path="images/e497f835-conversation_list_item_view_cometchat_screens-5b12d36475a002214a00529058db5884.png" />
</Frame>

You can create an `item_converation_list.xml` as a custom layout file. Which we will inflate in `setListItemView()`

```html theme={null}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="10dp"
        app:cardBackgroundColor="@color/purple_500"
        app:cardCornerRadius="10dp"
        android:layout_margin="5dp"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <com.cometchat.chatuikit.shared.views.CometChatAvatar.CometChatAvatar
                android:id="@+id/item_avatar"
                android:layout_centerVertical="true"
                android:layout_margin="10dp"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:padding="10dp"
                />
            <TextView
                android:id="@+id/txt_item_name"
                android:text="name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/item_avatar"
                android:textSize="17sp"
                />
            <TextView
                android:id="@+id/txt_item_date"
                android:text="date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_alignParentEnd="true"
                android:textSize="12sp"
                android:layout_margin="10dp"
                />
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</RelativeLayout>
```

In the method `setListItemView` you need to inflate the XML and initialize the views using the conversation objects.

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setListItemView(new Function2<Context, Conversation, View>() {
                @Override
                public View apply(Context context, Conversation conversation) {
                    View view = getLayoutInflater().inflate(R.layout.item_converation_list, null);

                    CometChatAvatar avatarView = view.findViewById(R.id.item_avatar);
                    avatarView.setRadius(100);

                    TextView nameView = view.findViewById(R.id.txt_item_name);
                    TextView dateView = view.findViewById(R.id.txt_item_date);


                    AppEntity entity = conversation.getConversationWith();
                    if(entity instanceof User){
                        User user = (User) entity;
                        nameView.setText(user.getName());
                        avatarView.setImage(user.getAvatar(),user.getName());
                    }else{
                        Group group = (Group) entity;
                        nameView.setText(group.getName());
                        avatarView.setImage(group.getIcon(),group.getName());
                    }

                    dateView.setText(new SimpleDateFormat("HH:mm").format(new Date(conversation.getUpdatedAt())));
                    return view;
                }
            });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setListItemView { context, conversation ->
        val view = layoutInflater.inflate(R.layout.item_conversation_list, null)

        val avatarView: CometChatAvatar = view.findViewById(R.id.item_avatar)
        avatarView.setRadius(100)

        val nameView: TextView = view.findViewById(R.id.txt_item_name)
        val dateView: TextView = view.findViewById(R.id.txt_item_date)

        val entity: AppEntity = conversation.conversationWith
        if (entity is User) {
            val user: User = entity
            nameView.text = user.name
            avatarView.setImage(user.avatar, user.name)
        } else if (entity is Group) {
            val group: Group = entity
            nameView.text = group.name
            avatarView.setImage(group.icon, group.name)
        }

        dateView.text = SimpleDateFormat("HH:mm").format(Date(conversation.updatedAt))
        view
    }
    ```
  </Tab>
</Tabs>

***

#### SetTextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [MentionsFormatter Guide](/ui-kit/android/v4/mentions-formatter-guide)

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7abd65f9-conversationsmentions-17bdf4c7b26ff9fedef5bf8ae4678e98.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=ec2c768d3f9052a0fc604340d498b7e9" width="8018" height="6240" data-path="images/7abd65f9-conversationsmentions-17bdf4c7b26ff9fedef5bf8ae4678e98.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}

    // Initialize CometChatMentionsFormatter
    CometChatMentionsFormatter mentionFormatter = new CometChatMentionsFormatter(context);

    //set style to customize conversation mention text
    mentionFormatter.setConversationsMentionTextStyle(new MentionTextStyle()
                .setLoggedInUserTextStyle(Typeface.defaultFromStyle(Typeface.BOLD))
                .setTextColor(Color.parseColor("#000000")));

    // This can be passed as an array of formatter in CometChatConversations by using setTextFormatters method.
    List<CometChatTextFormatter> textFormatters = new ArrayList<>();
    textFormatters.add(mentionFormatter);
    cometChatConversations.setTextFormatters(textFormatters);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}

    // Initialize CometChatMentionsFormatter
    val mentionFormatter = CometChatMentionsFormatter(context)
    //set style to customize conversation mention text
    mentionFormatter.conversationsMentionTextStyle = MentionTextStyle()
    .setLoggedInUserTextStyle(Typeface.defaultFromStyle(Typeface.BOLD))
    .setTextColor(Color.parseColor("#000000"))

    // This can be passed as an array of formatter in CometChatConversations by using setTextFormatters method.
    val textFormatters: MutableList<CometChatTextFormatter> = ArrayList()
    textFormatters.add(mentionFormatter)
    cometChatConversations.setTextFormatters(textFormatters)
    ```
  </Tab>
</Tabs>

#### SetMenu

You can set the Custom Menu view to add more options to the Conversations component.

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

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

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7957f93b-conversation_set_menu_cometchat_screens-82d3726e324818e973438df38f79f59d.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=ef1c35f7897f6af46ac879bcebb77d7f" width="4498" height="3120" data-path="images/7957f93b-conversation_set_menu_cometchat_screens-82d3726e324818e973438df38f79f59d.png" />
</Frame>

You can create a `view_menu.xml` as a custom view file. Which we will inflate and pass it to `.setMenu`.

```xml view_menu.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

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

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

<Tabs>
  <Tab title="Java">
    ```java theme={null}

        View view = getLayoutInflater().inflate(R.layout.view_menu, null);
        ImageView imgRefresh = view.findViewById(R.id.img_refresh);
        imgRefresh.setOnClickListener(v -> {
            Toast.makeText(this, "Clicked on Refresh", Toast.LENGTH_SHORT).show();
        });
        cometChatConversations.setMenu(view);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val view = layoutInflater.inflate(R.layout.view_menu, null)
    val imgRefresh = view.findViewById<ImageView>(R.id.img_refresh)
    imgRefresh.setOnClickListener {
        Toast.makeText(this, "Clicked on Refresh", Toast.LENGTH_SHORT).show()
    }
    cometChatConversations.setMenu(view)
    ```
  </Tab>
</Tabs>

***

#### SetDatePattern

You can modify the date pattern to your requirement using .setDatePattern. This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setDatePattern()
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setDatePattern()
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/49e923b7-conversation_set_date_pattern_cometchat_screens-c01555f427a9bb56df70f8f44b7e8e33.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=ba361462f95e3185203288153fd050c5" width="4498" height="3120" data-path="images/49e923b7-conversation_set_date_pattern_cometchat_screens-c01555f427a9bb56df70f8f44b7e8e33.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setDatePattern(conversation -> {
            SimpleDateFormat sdf = new SimpleDateFormat("hh:mm");
            return sdf.format(new Date(conversation.getUpdatedAt()));
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setDatePattern { conversation ->
    val sdf = SimpleDateFormat("hh:mm")
    sdf.format(Date(conversation.updatedAt))
    }
    ```
  </Tab>
</Tabs>

#### SetSubtitleView

You can customize the subtitle view for each conversation item to meet your requirements

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setSubtitleView()
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setSubtitleView()
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/24f330ea-conversation_set_subtitle_view_cometchat_screens-c01555f427a9bb56df70f8f44b7e8e33.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=14c9dc5e477f8ffa5a8df6be130887d6" width="4498" height="3120" data-path="images/24f330ea-conversation_set_subtitle_view_cometchat_screens-c01555f427a9bb56df70f8f44b7e8e33.png" />
</Frame>

You need to create subtitle\_layout.xml and inflate it in the setSubtitleView apply function. Then, you can define individual actions depending on your requirements.

```xml subtitle_layout.xml theme={null}
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

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

</RelativeLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
        cometChatConversations.setSubtitleView(new Function2<Context, Conversation, View>() {
                @Override
                public View apply(Context context, Conversation conversation) {
                    View view = getLayoutInflater().inflate(R.layout.subtitle_layout, null);
                    TextView txtSubtitle = view.findViewById(R.id.txt_subtitle);
                    ImageView imgConversation = view.findViewById(R.id.img_conversation);
                    ImageView imgAudioCall = view.findViewById(R.id.img_audio_call);;
                    ImageView imgVideCall = view.findViewById(R.id.img_video_call);;

                    BaseMessage baseMessage = conversation.getLastMessage();
                    assert baseMessage != null;
                    if(baseMessage instanceof TextMessage)
                        txtSubtitle.setText(((TextMessage) baseMessage).getText());
                    else
                        txtSubtitle.setText(baseMessage.getType()+" message received.");

                    imgConversation.setOnClickListener(v -> {
                        Toast.makeText(context, "Conversation Clicked", Toast.LENGTH_SHORT).show();
                    });

                    imgAudioCall.setOnClickListener(v -> {
                        Toast.makeText(context, "Audio Call Clicked", Toast.LENGTH_SHORT).show();
                    });

                    imgVideCall.setOnClickListener(v -> {
                        Toast.makeText(context, "Video Call Clicked", Toast.LENGTH_SHORT).show();
                    });

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

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setSubtitleView { context, conversation ->
    val view = layoutInflater.inflate(R.layout.subtitle_layout, null)
    val txtSubtitle = view.findViewById<TextView>(R.id.txt_subtitle)
    val imgConversation = view.findViewById<ImageView>(R.id.img_conversation)
    val imgAudioCall = view.findViewById<ImageView>(R.id.img_audio_call)
    val imgVideoCall = view.findViewById<ImageView>(R.id.img_video_call)

    val baseMessage = conversation.lastMessage
    requireNotNull(baseMessage) { "Last message should not be null" }
    txtSubtitle.text = if (baseMessage is TextMessage) {
        baseMessage.text
    } else {
        "${baseMessage.type} message received."
    }

    imgConversation.setOnClickListener {
        Toast.makeText(context, "Conversation Clicked", Toast.LENGTH_SHORT).show()
    }

    imgAudioCall.setOnClickListener {
        Toast.makeText(context, "Audio Call Clicked", Toast.LENGTH_SHORT).show()
    }

    imgVideoCall.setOnClickListener {
        Toast.makeText(context, "Video Call Clicked", Toast.LENGTH_SHORT).show()
    }

    view

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

***

#### SetTail

used to generate a custom trailing view for the conversation item, by default it shows the time sent of the last message and the unread messages count

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setTail((context, conversation) -> {
            View view = getLayoutInflater().inflate(R.layout.your_custom_view, null);
            //Initialize view using conversation Object
            return view;zzzzzzzxzxzxzxzxzx
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setTail { context, conversation ->
    val view = layoutInflater.inflate(R.layout.your_custom_view, null)
    // Initialize view using conversation Object
    view
    }
    ```
  </Tab>
</Tabs>

#### SetOptions

You can set a List of 'CometChatOption' for a conversation item to add your custom actions to the conversation. These options will be visible when swiping any conversation item.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setOptions()
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setOptions()
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/5629f4e3-conversation_set_options_cometchat_screens-a54940cae4122b62fa43abdcf0ab585a.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=b7b4cfdf3e064515e133ffe4169845dd" width="4498" height="3120" data-path="images/5629f4e3-conversation_set_options_cometchat_screens-a54940cae4122b62fa43abdcf0ab585a.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setOptions((context, conversation) -> {

            List<CometChatOption> optionList = new ArrayList<>();

            CometChatOption option = new CometChatOption();
            option.setId("option_send_photo");
            option.setIcon(R.drawable.ic_camera);
            option.setBackgroundColor(Color.CYAN);
            option.setOnClick(() -> {
                // your Action onClick of option
            });
            optionList.add(option);


            CometChatOption option2 = new CometChatOption();
            option2.setId("option_audio_call");
            option2.setIcon(R.drawable.ic_call);
            option2.setBackgroundColor(Color.BLUE);
            option2.setOnClick(() -> {
                // your Action onClick of option
            });
            optionList.add(option2);


            CometChatOption option3 = new CometChatOption();
            option3.setId("option_video_call");
            option3.setIcon(R.drawable.ic_video);
            option3.setBackgroundColor(Color.RED);
            option3.setOnClick(() -> {
                // your Action onClick of option
            });
            optionList.add(option3);

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

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setOptions { context, conversation ->
    val optionList = mutableListOf<CometChatOption>()

    val option = CometChatOption().apply {
        id = "option_send_photo"
        icon = R.drawable.ic_camera
        backgroundColor = Color.CYAN
        onClick = {
            // Your action onClick of option
        }
    }
    optionList.add(option)

    val option2 = CometChatOption().apply {
        id = "option_audio_call"
        icon = R.drawable.ic_call
        backgroundColor = Color.BLUE
        onClick = {
            // Your action onClick of option
        }
    }
    optionList.add(option2)

    val option3 = CometChatOption().apply {
        id = "option_video_call"
        icon = R.drawable.ic_video
        backgroundColor = Color.RED
        onClick = {
            // Your action onClick of option
        }
    }
    optionList.add(option3)

    optionList

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

***

#### SetLoadingStateView

You can set a custom loader view using `setLoadingStateView` to match the loading view of your app.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setLoadingStateView();
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setLoadingStateView()
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/afde20df-conversation_set_loading_state_cometchat_screens-d439f8e61301fbe072c7cabe588a1b81.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=b06f2b7172eb0ffb4f4bc3454bf71b96" width="4498" height="3120" data-path="images/afde20df-conversation_set_loading_state_cometchat_screens-d439f8e61301fbe072c7cabe588a1b81.png" />
</Frame>

We have added a `ContentLoadingProgressBar` to `loading_view_layout.xml`. You can choose any view you prefer. This view should be inflated and passed to the `setLoadingStateView()` method.

```xml loading_view_layout.xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        >
        <androidx.core.widget.ContentLoadingProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="?android:attr/progressBarStyleLarge"
            android:layout_gravity="center_horizontal"
            />
    </FrameLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setLoadingStateView(R.layout.loading_view_layout);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setLoadingStateView(R.layout.loading_view_layout)
    ```
  </Tab>
</Tabs>

#### SetErrorStateView

You can set a custom `ErrorStateView` using `setEmptyStateView` to match the error view of your app.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    cometChatConversations.setErrorStateView();
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setErrorStateView();
    ```
  </Tab>
</Tabs>

Demonstration

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/dfb71a73-conversation_set_error_state_cometchat_screens-b47d9179e9b394158072cb04f8f3483e.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=d03fd0df4aa420d0b42fd5839bc5950c" width="4498" height="3120" data-path="images/dfb71a73-conversation_set_error_state_cometchat_screens-b47d9179e9b394158072cb04f8f3483e.png" />
</Frame>

We have added an error view to `error_state_view_layout.xml`. You can choose any view you prefer. This view should be inflated and passed to the `setErrorStateView()` method.

```xml error_state_view_layout.xml theme={null}
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/img_error"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/ic_error"
    android:layout_centerInParent="true"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Something Went Wrong"
    android:textSize="30sp"
    android:layout_below="@+id/img_error"
    android:layout_marginTop="50dp"
    android:layout_centerHorizontal="true"
    />

</RelativeLayout>
```

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
    cometChatConversations.setErrorStateView(R.layout.error_state_view_layout);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    cometChatConversations.setErrorStateView(R.layout.error_state_view_layout);
    ```
  </Tab>
</Tabs>

***