Configure the group channel settings

You can configure the settings of each group channel. Customizable settings include channel name, cover image, and notifications. You can also leave the channel.

ChannelSettingsScreen composable

The ChannelSettingsScreen composable is a screen that displays the channel configuration menu items, which provides composables such as a top bar, menu items, and failure screen.

Parameters

The ChannelSettingsScreen composable provides a convenient API for creating a channel settings screen. ChannelSettingsScreen 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.
channelUrl	The URL of the channel.
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.
onChannelRemoved	The function called when the channel is removed.
onMembersMenuClick	The function called when the user clicks the members menu.
viewModel	A view model that provides the channel settings screen UI state.
dialogState	A state that indicates whether the dialog is shown.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the channel settings are loaded.
failure	A composable that serves as the failure screen when the channel settings fail to load.
notificationMenu	A composable that serves as the notification menu.
membersMenu	A composable that serves as the members menu.
leaveChannelMenu	A composable that serves as the leave channel menu.

Composition tree

ChannelSettingsScreen is composed of the following components:

ChannelSettingsScreen
- Scaffold

How to render

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

Basic example

The following example implements the default ChannelSettingsScreen composable with navigation:

Kotlin

@Composable
fun ChannelSettingsScreenWithNav() {
    val navController = rememberNavController()
    // FIXME: Replace with your channel URL.
    val channelUrl = "channelUrl"
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            navController = navController,
            startDestination = SendbirdNavigationRoute.ChannelSettings(channelUrl),
            channelSettingsScreen = { channelUrl ->
                ChannelSettingsExample(navController, channelUrl)
            }
        )
    }
}

@Composable
fun ChannelSettingsExample(
    navController: NavController,
    channelUrl: String
) {
    ChannelSettingsScreen(
        navController = navController,
        channelUrl = channelUrl
    )
}

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

Customization

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

the navigation icon of the top bar is invisible.
a new menu is added below the Leave channel menu.

Kotlin

@Composable
fun ChannelSettingsExample(
    navController: NavController,
    channelUrl: String
) {
    ChannelSettingsScreen(
        navController = navController,
        channelUrl = channelUrl,
        topBar = { _, onActionClick ->
            ChannelSettingsTopBar(
                navigationIcon = {},
                onActionClick = onActionClick
            )
        },
        leaveChannelMenu = { onClick ->
            Column {
                ChannelSettingsLeaveChannelMenu(modifier = Modifier.clickable { onClick() })
                HorizontalDivider(
                    modifier = Modifier.padding(horizontal = 16.dp),
                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = SendbirdOpacity.ExtraLowOpacity)
                )
                ChannelSettingsMenu(
                    icon = painterResource(id = R.drawable.icon_plus),
                    iconTint = MaterialTheme.colorScheme.primary,
                    text = "New menu"
                )
            }
        }
    )
}

On this page

ChannelSettingsScreen composable

Parameters Composition tree

How to render

Basic example Customization

Sample app