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

# Message List

> Message List — CometChat documentation.

## Overview

`MessageList` is a [Composite Component](/ui-kit/android/v4/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.

`MessageList` is primarily a list of the base component [MessageBubble](/ui-kit/android/v4/message-bubble). The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/tZ9icCqOV58QJidg/images/edf8f7ab-message_list_overview_cometchat_screens-7c4d1aff4f7ca649ce88c02d2769e244.png?fit=max&auto=format&n=tZ9icCqOV58QJidg&q=85&s=1d36265afb6a16243ccdd175bc1d44a0" width="4498" height="3120" data-path="images/edf8f7ab-message_list_overview_cometchat_screens-7c4d1aff4f7ca649ce88c02d2769e244.png" />
</Frame>

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the MessageList component into your `layout.xml` file.

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.messagelist.CometChatMessageList
                    android:id="@+id/message_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:background="@android:color/transparent" />
    ```
  </Tab>
</Tabs>

<Warning>
  Simply adding the `MessageList` component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
</Warning>

***

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

`onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    messageList.setOnThreadRepliesClick((context, baseMessage, cometChatMessageTemplate, cometChatMessageBubble) -> {
        // Your action onclick
    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    messageList.setOnThreadRepliesClick { context, baseMessage, cometChatMessageTemplate, cometChatMessageBubble ->
        // Your action onclick
    }
    ```
  </Tab>
</Tabs>

##### setOnReactionClickListener

The listener to be set for reacting to a message.Pass a non-null instance of OnReactionClickListener to enable it.

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/Sa9o3dFd0TJV05JN/images/42b3f504-onreactionclicked-be260014387afa52dce3b90378e5cdd4.png?fit=max&auto=format&n=Sa9o3dFd0TJV05JN&q=85&s=b81f507405ba207bf4913b73e30163b1" width="7726" height="6260" data-path="images/42b3f504-onreactionclicked-be260014387afa52dce3b90378e5cdd4.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
     messageList.setOnReactionClickListener(new OnReactionClickListener() {
                        @Override
                        public void onClick(String reaction) {
                            Toast.makeText(this, reaction + "Clicked", Toast.LENGTH_SHORT).show();
                        }

                        @Override
                        public void onClick(BaseMessage baseMessage, String reaction) {
                        }
                    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    messageList.setOnReactionClickListener(object : OnReactionClickListener {
            override fun onClick(reaction: String) {
                Toast.makeText(this, reaction + "Clicked", Toast.LENGTH_SHORT).show()
            }

            override fun onClick(baseMessage: BaseMessage, reaction: String) {}
        });
    ```
  </Tab>
</Tabs>

##### setOnAddReactionClickListener

The listener to be set for adding reactions to a message.Pass a non-null instance of OnAddReactionClickListener to enable it.

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/E5DbhavBfTmsHVE7/images/90d1bd97-onaddreactionclick-4ceb5c145ee1a5e6ddf8214be1960821.png?fit=max&auto=format&n=E5DbhavBfTmsHVE7&q=85&s=6b4515229b262bedca6ce3a66fa79e19" width="7722" height="6260" data-path="images/90d1bd97-onaddreactionclick-4ceb5c145ee1a5e6ddf8214be1960821.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java YourActivity.java theme={null}
     messageList.setOnAddReactionClickListener(new OnAddReactionClickListener() {
                        @Override
                        public void onClick() {
                            Toast.makeText(YourActivity.this, "Clicked on Add reaction", Toast.LENGTH_SHORT).show();
                        }
                    });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
      messageList.setOnAddReactionClickListener {
            object : OnAddReactionClickListener {
                override fun onClick() {
                    Toast.makeText(this, reaction + "Clicked on Add reaction", Toast.LENGTH_SHORT).show()
                }
            }
        }
    ```
  </Tab>
</Tabs>

##### 2. onError

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

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

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

### Filters

You can adjust the `MessagesRequestBuilder` in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/android/additional-message-filtering).

In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    MessagesRequest.MessagesRequestBuilder messagesRequest = new MessagesRequest.MessagesRequestBuilder()
        .setSearchKeyword("your search keyword")
        .setUID("user uid");

    messageList.setMessagesRequestBuilder(messagesRequest);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messagesRequest = MessagesRequest.MessagesRequestBuilder()
        .setSearchKeyword("your search keyword")
        .setUID("user uid")
        .build()

    messageList.messagesRequestBuilder = messagesRequest
    ```
  </Tab>
</Tabs>

<Note>
  The following parameters in messageRequestBuilder will always be altered inside the message list

  1. UID
  2. GUID
  3. types
  4. categories
</Note>

***

### 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 MessageList Component does not emit any events of its own.

***

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

You can set the MessageListStyle to the MessageList Component to customize the styling.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    MessageListStyle messageListStyle = new MessageListStyle();
        messageListStyle.setBackground(Color.BLACK);
        messageListStyle.setBorderColor(Color.WHITE);

        messageList.setStyle(messageListStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messageListStyle = MessageListStyle().apply {
        background = Color.BLACK
        borderColor = Color.WHITE
    }

    messageList.style = messageListStyle
    ```
  </Tab>
</Tabs>

List of properties exposed by MessageListStyle

| Property                       | Description                                                          | Code                                           |
| ------------------------------ | -------------------------------------------------------------------- | ---------------------------------------------- |
| **Border Width**               | used to set border width                                             | `.setBorderWidth(int)`                         |
| **Border Color**               | used to set border color                                             | `.setBorderColor(@ColorInt int)`               |
| **Corner Radius**              | used to set corner radius                                            | `.setCornerRadius(int)`                        |
| **LoadingIcon Tint**           | used to set loading icon tint                                        | `.setLoadingIconTint(@ColorInt int)`           |
| **EmptyText Appearance**       | used to set empty state text Appearance                              | `.setLoadingIconTint(@StyleRes int)`           |
| **ErrorText Appearance**       | used to set error text Appearance                                    | `.setErrorTextAppearance(@StyleRes int)`       |
| **EmptyText Color**            | used to set empty state text color                                   | `.setEmptyTextColor(@ColorInt int)`            |
| **ErrorText Color**            | used to set error state text color                                   | `.setErrorTextColor(@ColorInt int)`            |
| **NameText Color**             | used to set sender/receiver name text color on a message bubble.     | `.setNameTextColor(@ColorInt int)`             |
| **NameText Appearance**        | used to set sender/receiver name text appearance on a message bubble | `.setNameTextAppearance(@StyleRes int)`        |
| **TimeStampText Color**        | used to set time stamp text appearance                               | `.setTimeStampTextAppearance(@StyleRes int)`   |
| **ThreadReplySeparator Color** | used to set thread reply separator color                             | `.setThreadReplySeparatorColor(@ColorInt int)` |
| **ThreadReplyText Color**      | used to set thread reply text color                                  | `.setThreadReplyTextColor(@ColorInt int)`      |
| **ThreadReplyText Appearance** | used to set thread reply text appearance                             | `.setThreadReplyTextAppearance(@StyleRes int)` |
| **ThreadReplyIcon Tint**       | used to set thread reply icon tint                                   | `.setThreadReplyIconTint(@ColorInt int)`       |
| **Background**                 | This method will set the background color for message list           | `.setBackground(@ColorInt int)`                |
| **Background**                 | This will set drawable component for list background                 | `.setBackground(@drawable 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).

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

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val avatarStyle = AvatarStyle()
    avatarStyle.borderWidth = 10
    avatarStyle.borderColor = Color.BLACK
    messageList.setAvatarStyle(avatarStyle)
    ```
  </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.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatMessageList messageList = findViewById(R.id.message_list);
    messageList.setUser(user);
    messageList.hideError(true);
    messageList.hideReceipt(true);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messageList = findViewById<CometChatMessageList>(R.id.message_list)
    messageList.user = user
    messageList.hideError(true)
    messageList.hideReceipt(true)
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/MoukXfOA8-IbkyPZ/images/3860adbb-message_list_functionality_cometchat_screens-de484e6697b6bf5e1937ce296aea2482.png?fit=max&auto=format&n=MoukXfOA8-IbkyPZ&q=85&s=2ca2b5720e9df4b9367bc0feb434a038" width="4498" height="3120" data-path="images/3860adbb-message_list_functionality_cometchat_screens-de484e6697b6bf5e1937ce296aea2482.png" />
</Frame>

| Property                                            | Description                                                                                                                                                                                                                                     | Code                                                          |
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| **User** <Tooltip tip="Not available">🛑</Tooltip>  | Used to pass user object of which header specific details will be shown                                                                                                                                                                         | `.setUser(user);`                                             |
| **Group** <Tooltip tip="Not available">🛑</Tooltip> | Used to pass group object of which header specific details will be shown                                                                                                                                                                        | `.setGroup(Group);`                                           |
| **Messages Alignment**                              | used to set the alignmet of messages in CometChatMessageList. It can be either **leftAligned** or **standard**                                                                                                                                  | `.setAlignment(UIKitConstants.MessageListAlignment);`         |
| **EmptyState Text**                                 | used to set text which will be visible when no messages are available                                                                                                                                                                           | `.emptyStateText("Your_EMPTY_STATE_TEXT");`                   |
| **ErrorState Text**                                 | used to set text which will be visible when error in messages retrieval                                                                                                                                                                         | `.errorStateText("Your_ERROR_STATE_TEXT");`                   |
| **Hide Error**                                      | used to toggle visibility of error in MessageList                                                                                                                                                                                               | `.hideError(false);`                                          |
| **Disable Sound For Messages**                      | used to enable/disable sound for incoming/outgoing messages , default false                                                                                                                                                                     | `.disableSoundForMessages(false);`                            |
| **CustomSound For Messages**                        | used to set custom sound for outgoing message                                                                                                                                                                                                   | `.setCustomSoundForMessages(@RawRes resource);`               |
| **Set ReadIcon**                                    | used to set custom read icon visible at read receipt                                                                                                                                                                                            | `.setReadIcon(@DrawableRes resource);`                        |
| **Set DeliverIcon**                                 | used to set custom delivered icon visible at read receipt                                                                                                                                                                                       | `.setDeliverIcon(@DrawableRes resource);`                     |
| **Set SentIcon**                                    | used to set custom sent icon visible at read receipt                                                                                                                                                                                            | `.setSentIcon(@DrawableRes resource);`                        |
| **Set SentIcon**                                    | used to set custom sent icon visible at read receipt                                                                                                                                                                                            | `.setSentIcon(@DrawableRes resource);`                        |
| **Set WaitIcon**                                    | used to set custom wait icon visible at read receipt                                                                                                                                                                                            | `.setWaitIconIcon(@DrawableRes resource);`                    |
| **Show Avatar**                                     | used to toggle visibility for avatar                                                                                                                                                                                                            | `.showAvatar(false);`                                         |
| **Hide Timestamp**                                  | used to toggle visibility for of timestamp                                                                                                                                                                                                      | `.hideTimestamp(false);`                                      |
| **Set TimeStampAlignment**                          | used to set receipt's time stamp alignment .It can be either **top** or **bottom**                                                                                                                                                              | `.setTimeStampAlignment(UIKitConstants.TimeStampAlignment);`  |
| **Set newMessageIndicatorText**                     | used to set new message indicator text                                                                                                                                                                                                          | `.newMessageIndicatorText("Your_CUSTOM_TEXT");`               |
| **Toggle scrollToBottomOnNewMessage**               | should scroll to bottom on new message? , by default false                                                                                                                                                                                      | `.scrollToBottomOnNewMessage(true);`                          |
| **Toggle scrollToBottomOnNewMessage**               | should scroll to bottom on new message? , by default false                                                                                                                                                                                      | `.scrollToBottomOnNewMessage(true);`                          |
| **Hide Receipt**                                    | Used to control visibility of read receipts without disabling the functionality of marking messages as read and delivered.                                                                                                                      | `.hideReceipt(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);`                                  |
| **Disable Reactions**                               | Sets A boolean value indicating whether to disable reactions.Pass `true` to disable reactions, `false` to enable them.                                                                                                                          | `.disableReactions(true);`                                    |
| **Add Reaction Icon**                               | Sets The resource ID to be set for the add reaction icon.This ID refers to the drawable resource representing the icon.                                                                                                                         | `.setAddReactionIcon(R.drawable.your_icon);`                  |
| **Hide Add Reactions Icon**                         | Sets A boolean value indicating whether to hide the add reactions icon. Pass `true` to hide the icon, `false` to show it.                                                                                                                       | `.hideAddReactionsIcon(true);`                                |
| **Set Quick Reactions**                             | The list of quick reactions to be set.This list will replace the predefined set of reactions                                                                                                                                                    | `.setQuickReactions(Arrays.asList("👻","😈","🙀","🤡","❤️");` |

***

### Advance

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.

#### SetTemplate

[CometChatMessageTemplate](/ui-kit/android/v4/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/android/v4/message-template).

You can set message Templates to MessageList by using the following code snippet

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    List<CometChatMessageTemplate> messageTemplateList = new ArrayList<>();
    messageTemplateList.add(CometChatUIKit.getDataSource().getTextTemplate());
    messageTemplateList.add(CometChatUIKit.getDataSource().getImageTemplate());
    messageList.setTemplates(messageTemplateList);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val messageTemplateList = ArrayList<CometChatMessageTemplate>().apply {
        add(CometChatUIKit.dataSource.textTemplate)
        add(CometChatUIKit.dataSource.imageTemplate)
    }
    messageList.templates = messageTemplateList
    ```
  </Tab>
</Tabs>

#### Set DateSeparatorPattern

You can modify the date pattern of the message list date separator to your requirement using `setDateSeparatorPattern()`. 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}
    messageList.setDateSeparatorPattern()
    ```
  </Tab>

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

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/BeS0cj3AlwGwbqBl/images/a675510b-message_list_set_date_separator_pattern_cometchat_screens-ad384bd94138a32140d8a5ea1386ed74.png?fit=max&auto=format&n=BeS0cj3AlwGwbqBl&q=85&s=b4ea0743d57ffa142b9a97d601eb2f4a" width="4498" height="3120" data-path="images/a675510b-message_list_set_date_separator_pattern_cometchat_screens-ad384bd94138a32140d8a5ea1386ed74.png" />
</Frame>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    messageList.setDateSeparatorPattern(baseMessage -> {
            SimpleDateFormat sdf = new SimpleDateFormat("hh:mm MM/yyyy");
            return sdf.format(new Date(baseMessage.getUpdatedAt()));
        });
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
        messageList.datePattern = { baseMessage ->
        val sdf = setDateSeparatorPattern("hh:mm MM/yyyy")
        sdf.format(Date(baseMessage.updatedAt))
    }
    ```
  </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}
    messageList.setDatePattern()
    ```
  </Tab>

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

**Example**

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

  <Tab title="Kotlin">
    ```kotlin theme={null}
        messageList.datePattern = { baseMessage ->
        val sdf = SimpleDateFormat("hh:mm")
        sdf.format(Date(baseMessage.updatedAt))
    }
    ```
  </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}
    messageList.setErrorStateView();
    ```
  </Tab>

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

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/v-eSvFFm_r_istSu/images/30e0f74c-message_list_set_error_state_cometchat_screens-31d1212e0fa7daed6d9c41fe1a4ef1d9.png?fit=max&auto=format&n=v-eSvFFm_r_istSu&q=85&s=e035c6e4aca2cea0d9188552eef31fbc" width="4498" height="3120" data-path="images/30e0f74c-message_list_set_error_state_cometchat_screens-31d1212e0fa7daed6d9c41fe1a4ef1d9.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}
    messageList.setErrorStateView(R.layout.error_state_view_layout);
    ```
  </Tab>

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

#### SetEmptyStateView

The `setEmptyStateView()` function provides the ability to set a custom empty state view in your app. An empty state view is displayed when there are no messages for a particular user.

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

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

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/XCsfQjzfnJrLl1Zv/images/dfec18c4-message_list_set_empty_state_cometchat_screens-a8cddc1b7306472f66a83f51d548cc44.png?fit=max&auto=format&n=XCsfQjzfnJrLl1Zv&q=85&s=91e1dbc257197dd46b60f7b80db44787" width="4498" height="3120" data-path="images/dfec18c4-message_list_set_empty_state_cometchat_screens-a8cddc1b7306472f66a83f51d548cc44.png" />
</Frame>

You have to create a custom layout named `empty_view_layout.xml`, you can set it as the empty state view by passing it as a parameter to the setEmptyStateView() function.

```xml empty_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"
    android:layout_gravity="center_vertical"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start new conversation."
        android:layout_centerInParent="true"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="@color/light_grey"
        />

</RelativeLayout>
```

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    messageList.setEmptyStateView(R.layout.empty_view_layout);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    messageList.setEmptyStateView(R.layout.empty_view_layout)
    ```
  </Tab>
</Tabs>

#### SetLoadingStateView

The `setLoadingStateView` function allows you to set a custom loading view in your app. This feature enables you to maintain a consistent look and feel throughout your application,

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

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

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/tKDtB3xjE6jATqmt/images/0447fc51-message_list_set_loading_state_cometchat_screens-d64dc9234299988d9a8201f51879185f.png?fit=max&auto=format&n=tKDtB3xjE6jATqmt&q=85&s=801a7287685fa3d9a6ac013a24ef8fa1" width="4498" height="3120" data-path="images/0447fc51-message_list_set_loading_state_cometchat_screens-d64dc9234299988d9a8201f51879185f.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}
    messageList.setLoadingStateView(R.layout.loading_view_layout);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    messageList.setLoadingStateView(R.layout.loading_view_layout)
    ```
  </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-feature-card-builder/qyfJptTKpJBV4TKk/images/8ebb56e7-mentionsconfigured-8e774733327d2a63df6bc3bf4ae5a2e8.png?fit=max&auto=format&n=qyfJptTKpJBV4TKk&q=85&s=a37d684a7f8a5a402433d8a340a1898e" width="9556" height="6820" data-path="images/8ebb56e7-mentionsconfigured-8e774733327d2a63df6bc3bf4ae5a2e8.png" />
</Frame>

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

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

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

    mentionFormatter.setLeftBubbleMentionTextStyle(new MentionTextStyle()
                .setLoggedInUserTextStyle(Typeface.defaultFromStyle(Typeface.BOLD))
                .setTextColor(Color.parseColor("#000000")));

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

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

    // Initialize CometChatMentionsFormatter
    val mentionFormatter = CometChatMentionsFormatter(context)

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

        mentionFormatter.leftBubbleMentionTextStyle = MentionTextStyle()
            .setLoggedInUserTextStyle(Typeface.defaultFromStyle(Typeface.BOLD))
            .setTextColor(Color.parseColor("#000000"))

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

## Configuration

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

### MessageInformation

From the MessageList, you can navigate to the [MesssageInformation](/ui-kit/android/v4/message-information) component as shown in the image.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/cEj5TXvU_reIGZbk/images/21c17829-message_list_to_message_info_cometchat_screens-a321346a12bfe676779019cfc14931b4.png?fit=max&auto=format&n=cEj5TXvU_reIGZbk&q=85&s=12e22a802bb87a42c89831a27591ae69" width="4498" height="3120" data-path="images/21c17829-message_list_to_message_info_cometchat_screens-a321346a12bfe676779019cfc14931b4.png" />
</Frame>

If you wish to modify the properties of the [MesssageInformation](/ui-kit/android/v4/message-information) Component, you can use the `MessageInformationConfiguration` object.

<Tabs>
  <Tab title="Java">
    ```java theme={null}
     MessageInformationConfiguration configuration = new MessageInformationConfiguration();
     messageList.setMessageInformationConfiguration(configuration);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val configuration = MessageInformationConfiguration()
    messageList.messageInformationConfiguration = configuration
    ```
  </Tab>
</Tabs>

The `MessageInformationConfiguration` indeed provides access to all the [Action](/ui-kit/android/v4/message-information#style), [Filters](/ui-kit/android/v4/message-information#filters), [Styles](#style), [Functionality](/ui-kit/android/v4/message-information#functionality), and [Advanced](/ui-kit/android/v4/message-information) properties of the [MesssageInformation](/ui-kit/android/v4/message-information) component.

Please note that the properties marked with the 🛑 symbol are not accessible within the Configuration Object.

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/qyfJptTKpJBV4TKk/images/8dd083ab-message_list_message_info_configuration_cometchat_screens-a4889df6789b81c5b91d0ef3edfaa28b.png?fit=max&auto=format&n=qyfJptTKpJBV4TKk&q=85&s=c48f35823809d39a5e8e78be1432786d" width="4498" height="3120" data-path="images/8dd083ab-message_list_message_info_configuration_cometchat_screens-a4889df6789b81c5b91d0ef3edfaa28b.png" />
</Frame>

In this example, we are disabling the back button and styling a few properties of the [MesssageInformation](/ui-kit/android/v4/message-information) component using `MessageInformationConfiguration`.

```java theme={null}
MessageInformationStyle messageInformationStyle = new MessageInformationStyle();
messageInformationStyle.setBackground(Color.LTGRAY);

MessageInformationConfiguration messageInformationConfiguration = new MessageInformationConfiguration();
messageInformationConfiguration.setShowBackButton(false);
messageInformationConfiguration.setTitle("Info");
messageInformationConfiguration.setStyle(messageInformationStyle);

messageList.setMessageInformationConfiguration(messageInformationConfiguration);
```

In the above code, the back button is disabled, the title is set to "Info", and the background color is set to light gray. Finally, this configuration is applied to the message list.