Create a group channel

Create new channels in Sendbird UIKit for Jetpack Compose using the ChannelCreationScreen. In the create group channel screen, the current user can select users from the user list to create a new group channel.

ChannelCreationScreen composable

The ChannelCreationScreen composable provides a convenient API for creating a create group channel screen. ChannelCreationScreen has specific parameters for handling particular elements of the screen. Among them are the following:

Parameters

Parameter	Description
navController	A navigation controller that manages the Sendbird navigation flow.
modifier	A modifier that is applied to the composable.
channelCreationScreenState	A state that indicates whether the user is selected.
snackbarHostState	A state that indicates whether the snackbar is shown.
viewModelContract	A view model that provides the create group channel screen UI state.
onTopBarNavigationIconClick	The function called when the user clicks the navigation icon.
onTopBarActionClick	The function called when the user clicks the action icon.
onChannelCreated	The function called when the channel is created.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the user list is loaded.
failure	A composable that serves as the failure screen when the user list fails to load.
empty	A composable that serves as the empty screen when the user list is empty.
userItem	A composable that serves as the user item.

Composition tree

ChannelCreationScreen is composed of the following components:

ChannelCreationScreen
- Scaffold
  - ChannelCreationTopBar
  - SendbirdSnackbar
  - LoadingScreen
  - FailurePlaceholder
  - ScreenPlaceholder
  - LazyColumn
    - ChannelCreationItem

How to render

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

Basic example

The following example implements the default ChannelCreationScreen composable with navigation:

Kotlin

@Composable
fun ChannelCreationScreenWithNav() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            navController = navController,
            startDestination = SendbirdNavigationRoute.ChannelCreation,
            channelCreationScreen = {
                ChannelCreationExample(navController)
            }
        )
    }
}

@Composable
fun ChannelCreationExample(
    navController: NavController
) {
    ChannelCreationScreen(
        navController = navController
    )
}

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

Customization

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

the navigation icon of the top bar is displayed with your custom icon.
the user item is customized to include a check change listener.

Kotlin

@Composable
fun ChannelCreationExample(
    navController: NavController
) {
    ChannelCreationScreen(
        navController = navController,
        topBar = { selectedUserCount, _, onActionClick ->
            ChannelCreationTopBar(
                selectedUserCount = selectedUserCount,
                navigationIcon = { Icon(
                    painter = painterResource(id = R.drawable.YOUR_CUSTOM_ICON),
                    contentDescription = "Test"
                )},
                onActionClick = onActionClick
            )
        },
        userItem = { user, isSelected, onCheckedChange ->
            Text(
                text = user.userNickname(),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .fillMaxWidth()
                    .background(
                        if (isSelected) {
                            MaterialTheme.colorScheme.primary.copy(alpha = 0.1f)
                        } else {
                            MaterialTheme.colorScheme.background
                        }
                    )
                    .clickable {
                        onCheckedChange(user)
                    }
                    .padding(16.dp)
            )
        }
    )
}

On this page

ChannelCreationScreen composable

Parameters Composition tree

How to render

Basic example Customization

Sample app