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

# State Views

> Replace or restyle the default empty, error, and loading state views with custom layouts.

Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with custom layouts or restyle the default ones.

## Replacing State Views

Each state view setter accepts an Android layout resource ID (`@LayoutRes int`). The component inflates the layout when the corresponding state is triggered.

| Setter                           | State                                  |
| -------------------------------- | -------------------------------------- |
| `setEmptyView(@LayoutRes int)`   | No data to display                     |
| `setErrorView(@LayoutRes int)`   | An error occurred during data fetching |
| `setLoadingView(@LayoutRes int)` | Data is being fetched                  |

## Example: Custom Empty State

Create a custom layout:

```xml theme={null}
<!-- res/layout/custom_empty_state.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="32dp">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/ic_empty_conversations"
        android:contentDescription="No conversations" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="No conversations yet"
        android:textSize="18sp"
        android:textColor="@color/text_secondary" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Start a new chat to get going"
        android:textSize="14sp"
        android:textColor="@color/text_tertiary" />
</LinearLayout>
```

Set it on the component:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    conversations.setEmptyView(R.layout.custom_empty_state)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    conversations.setEmptyView(R.layout.custom_empty_state);
    ```
  </Tab>
</Tabs>

## State Visibility Controls

Hide or show specific state views entirely:

| Method                           | Description                                                  |
| -------------------------------- | ------------------------------------------------------------ |
| `setEmptyStateVisibility(int)`   | Show or hide the empty state (`View.VISIBLE` or `View.GONE`) |
| `setErrorStateVisibility(int)`   | Show or hide the error state                                 |
| `setLoadingStateVisibility(int)` | Show or hide the loading state                               |

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    // Hide the error state entirely
    conversations.setErrorStateVisibility(View.GONE)

    // Hide the loading state (useful if you have your own loading indicator)
    conversations.setLoadingStateVisibility(View.GONE)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    // Hide the error state entirely
    conversations.setErrorStateVisibility(View.GONE);

    // Hide the loading state
    conversations.setLoadingStateVisibility(View.GONE);
    ```
  </Tab>
</Tabs>

## Restyling Default State Views

If you want to keep the default state layout but change its appearance, use the text customization setters:

### Empty State

| Method                                               | Description                               |
| ---------------------------------------------------- | ----------------------------------------- |
| `setEmptyStateTitleTextColor(@ColorInt int)`         | Title text color                          |
| `setEmptyStateSubtitleTextColor(@ColorInt int)`      | Subtitle text color                       |
| `setEmptyStateTextTitleAppearance(@StyleRes int)`    | Title text appearance (font, size, style) |
| `setEmptyStateTextSubtitleAppearance(@StyleRes int)` | Subtitle text appearance                  |

### Error State

| Method                                               | Description              |
| ---------------------------------------------------- | ------------------------ |
| `setErrorStateTitleTextColor(@ColorInt int)`         | Title text color         |
| `setErrorStateSubtitleTextColor(@ColorInt int)`      | Subtitle text color      |
| `setErrorStateTextTitleAppearance(@StyleRes int)`    | Title text appearance    |
| `setErrorStateTextSubtitleAppearance(@StyleRes int)` | Subtitle text appearance |

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    // Restyle the default empty state
    conversations.setEmptyStateTitleTextColor(Color.parseColor("#1A1A1A"))
    conversations.setEmptyStateSubtitleTextColor(Color.parseColor("#808080"))
    conversations.setEmptyStateTextTitleAppearance(R.style.TextAppearance_Heading)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    // Restyle the default empty state
    conversations.setEmptyStateTitleTextColor(Color.parseColor("#1A1A1A"));
    conversations.setEmptyStateSubtitleTextColor(Color.parseColor("#808080"));
    conversations.setEmptyStateTextTitleAppearance(R.style.TextAppearance_Heading);
    ```
  </Tab>
</Tabs>

## Related

* [Customization Overview](/ui-kit/android/customization-overview) — See all customization categories.