Customization

This guide explains how to customize layers of Sendbird UIKit for Jetpack Compose and demonstrate the specific customization options for each layer and screen as follows:

• Screen customization
• Data customization

Follow these steps to customize the Sendbird UIKit for Jetpack Compose:

Select the screen you want to customize from the UIKit for Jetpack Compose screens below.

• ChannelScreen
• ChannelsScreen
• ChannelCreationScreen
• InvitationUserScreen
• MembersScreen
• ChannelSettingsScreen

Find the parameters needed to customize the screen. The example below customizes the channelItem in the ChannelsScreen.

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

Note: When changing the parameters of a Composable function, use MaterialTheme as much as possible. This will help you create a consistent UI. If you find it difficult to configure the UI you want using parameters, consider creating a Composable directly using the components provided by UIKit. You can find the components in the Component API reference.

Inject the custom screen into the UIKit for Jetpack Compose screen using sendbirdGroupChannelNavGraph. The example below injects the ChannelsScreenExample into the ChannelsScreen.

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

UIKit for Jetpack Compose provides a way to customize data: use repositories. This allows you to use the data provided by UIKit for Jetpack Compose in your ViewModel. To connect this data to a Composable, pass the ViewModel as a parameter when calling the Composable.

UIKit for Jetpack Compose provides the following repositories:

• ChannelCreationScreenResourceRepository
• ChannelScreenResourceRepository
• ChannelSettingsScreenResourceRepository
• ChannelsScreenResourceRepository
• MembersScreenResourceRepository
• UserInvitationScreenResourceRepository

You can create a custom repository by delegating one of the default repositories provided by UIKit for Jetpack Compose. The example below shows how to use the ChannelsScreen repository.

class CustomChannelsScreenResourceRepository :
    ChannelsScreenResourceRepository by DefaultChannelsScreenResourceRepository()

class CustomChannelsViewModel(
    private val repository: CustomChannelsScreenResourceRepository
) : ViewModel() {
    // ViewModel implementation.
}

@Composable
fun CustomChannelsScreen(
    navController: NavController,
    viewModel: CustomChannelsViewModel
) {
    // Composable implementation.
}

UIKit for Jetpack Compose allows you to customize the Models used in the composables. UIKit for Jetpack Compose provides customizable Models for UikitGroupChannel, UikitUser, UikitBaseMessage, and other models used in composables. The example below demonstrates how to customize the UikitGroupChannel.

data class CustomGroupChannel(
    // This is base instance for the custom group channel.
    override val baseUikitGroupChannel: UikitGroupChannel
    // TODO : Add your custom properties here.
) : CustomizableGroupChannel

Note: To learn more about the ViewModels provided by UIKit for Jetpack Compose, see the User API reference, Group channel API reference, and Message API reference.