State Views - CometChat Docs

Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with your own custom views.

State Types

State	When it shows
Loading	Data is being fetched
Empty	No data to display
Error	An error occurred during data fetching

Replacing State Views

Kotlin (XML Views)
Jetpack Compose

Each component accepts a View? for each state:

// Custom empty view
val emptyView = LayoutInflater.from(context)
    .inflate(R.layout.custom_empty_state, null)
conversations.setEmptyView(emptyView)

// Custom error view
val errorView = LayoutInflater.from(context)
    .inflate(R.layout.custom_error_state, null)
conversations.setErrorView(errorView)

// Custom loading view
val loadingView = LayoutInflater.from(context)
    .inflate(R.layout.custom_loading_state, null)
conversations.setLoadingView(loadingView)

Example custom empty layout:

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" />
</LinearLayout>

Each component accepts @Composable lambdas for each state:

CometChatConversations(
    emptyView = {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Icon(
                painter = painterResource(R.drawable.ic_empty_conversations),
                contentDescription = "No conversations",
                modifier = Modifier.size(120.dp),
                tint = CometChatTheme.colorScheme.iconTintSecondary
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                text = "No conversations yet",
                style = CometChatTheme.typography.heading2Medium,
                color = CometChatTheme.colorScheme.textColorPrimary
            )
        }
    },
    errorView = { onRetry ->
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text("Something went wrong")
            Spacer(modifier = Modifier.height(8.dp))
            Button(onClick = onRetry) {
                Text("Retry")
            }
        }
    },
    loadingView = {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator()
        }
    }
)

Note: the errorView lambda receives an onRetry callback you can wire to a retry button.

Hiding State Views

Kotlin (XML Views)
Jetpack Compose

Components like CometChatMessageList provide explicit hide methods:

messageList.setHideLoadingState(true)
messageList.setHideEmptyState(true)
messageList.setHideErrorState(true)

For components that don’t have dedicated hide methods (e.g., CometChatConversations), pass null to remove a custom state view:

conversations.setEmptyView(null)
conversations.setErrorView(null)
conversations.setLoadingView(null)

CometChatConversations(
    hideEmptyState = true,
    hideErrorState = true,
    hideLoadingState = true
)

CometChatMessageList(
    hideEmptyState = true,
    hideErrorState = true,
    hideLoadingState = true
)

Components with State Views

State views are available on all list-based components:

Component	States supported
`CometChatConversations`	Loading, Empty, Error
`CometChatUsers`	Loading, Empty, Error
`CometChatGroups`	Loading, Empty, Error
`CometChatGroupMembers`	Loading, Empty, Error
`CometChatCallLogs`	Loading, Empty, Error
`CometChatMessageList`	Loading, Empty, Error

Customization Overview — See all customization categories.
View Slots — Replace specific regions of list items.

​State Types

​Replacing State Views

​Hiding State Views

​Components with State Views

​Related

State Types

Replacing State Views

Hiding State Views

Components with State Views

Related