List channels

A channel list shows a complete list of group channels that the current user is a member of. Once a connection with Sendbird server is established, you can display and manage the channel list without complex implementation. All chat services built with Sendbird UIKit begin from the channel list.

ChannelsScreen composable

The ChannelsScreen composable is a screen that displays a list of channels. It is a pre-built screen that provides a list of channels with a top bar, loading screen, failure screen, and empty screen.

Parameters

The ChannelsScreen composable provides a convenient API for creating a list of channels screen. ChannelsScreen has specific parameters for handling particular elements of the screen. Among them are the following:

Parameter	Description
navController	A navigation controller that manages the Sendbird navigation flow.
modifier	A modifier that is applied to the composable.
onTopBarNavigationIconClick	The function called when the user clicks the navigation icon.
onTopBarActionClick	The function called when the user clicks the action icon.
onChannelItemClick	The function called when the user clicks a channel item.
onChannelItemLongClick	The function called when the user long-clicks a channel item.
viewModelContract	A view model that provides the channel screen UI state.
dialogState	A state that indicates the visibility of the dialog.
snackbarHostState	A state that indicates the visibility of the snackbar.
channelsDialog	A component that serves as the dialog for the channel list.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the channel list is loaded.
failure	A composable that serves as the failure screen when the channel list fails to load.
empty	A composable that serves as the empty screen when the channel list is empty.
channelItem	A composable that serves as the channel item.

Composition tree

ChannelsScreen composable uses the following child composables:

ChannelsScreen
- Scaffold
  - ChannelsTopBar
  - SendbirdSnackbar
  - LoadingScreen
  - FailurePlaceholder
  - ScreenPlaceholder
  - LazyColumn
    - ChannelItem
  - MenuDialog

How to render

The following example demonstrates how to render and customize the ChannelsScreen composable with the default UI components.

Basic usage

The following example implements the default ChannelsScreen composable with navigation :

Kotlin

@Composable
fun ChannelsScreenWithNav() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            navController = navController,
            channelsScreen = {
                ChannelsScreenExample(
                    navController = navController
                )
            }
        )
    }
}

@Composable
fun ChannelsScreenExample(
    navController: NavHostController
) {
    ChannelsScreen(
        navController = navController
    )
}

Note: To learn how to integrate Sendbird navigation, see Navigation.

Customization

The following is a customization example for the ChannelsScreen composable. In this case:

the navigation icon of the top bar is invisible.
the channel item is customized to include a click and long-click listener.
the text color of channel items is 'MaterialTheme.colors.secondary'.

Kotlin

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ChannelsScreenExample(
    navController: NavHostController
) {
    ChannelsScreen(
        navController = navController,
        topBar = { _, onActionClick ->
            ChannelsTopBar(
                navigationIcon = {},
                onActionClick = onActionClick
            )
        },
        channelItem = { channel, onClick, onLongClick ->
            Text(
                text = channel.title(),
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.secondary,
                modifier = Modifier
                    .fillMaxWidth()
                    .combinedClickable(
                        onClick = { onClick(channel) },
                        onLongClick = { onLongClick(channel) }
                    )
                    .padding(16.dp)
            )
        }
    )
}

On this page

ChannelsScreen composable

Parameters Composition tree

How to render

Basic usage Customization

Sample app