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

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

Step 1 Find screen to customize

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

Step 2 Find parameters for the screen

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

Kotlin

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

Step 3 Inject custom screen

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

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.

Data customization

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.

Repositories

UIKit for Jetpack Compose provides the following repositories:

ChannelCreationScreenResourceRepository
ChannelScreenResourceRepository
ChannelSettingsScreenResourceRepository
ChannelsScreenResourceRepository
MembersScreenResourceRepository
UserInvitationScreenResourceRepository

Delegate repositories

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.

Kotlin

class CustomChannelsScreenResourceRepository :
    ChannelsScreenResourceRepository by DefaultChannelsScreenResourceRepository() {
    // Custom implementation.
}

class CustomChannelsViewModel(
    channelsViewModelContract: ChannelsViewModelContract
) : ViewModel(), ChannelsViewModelContract by channelsViewModelContract {
    // Custom implementation.

    companion object {
        val Factory: ViewModelProvider.Factory = viewModelFactory {
            initializer {
                CustomChannelsViewModel(ChannelsViewModel(
                    CustomChannelsScreenResourceRepository(),
                    createSavedStateHandle()
                ))
            }
        }
    }
}

@Composable
fun CustomChannelsScreen(
    navController: NavController
) {
    ChannelsScreen(
        navController = navController,
        viewModelContract = viewModel<CustomChannelsViewModel>(
            factory = CustomChannelsViewModel.Factory
        )
    )
}

Use customizable models

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.

Kotlin

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.

On this page

Screen customization

Step 1 Find screen to customize Step 2 Find parameters for the screen Step 3 Inject custom screen

Data customization

Repositories Delegate repositories Use customizable models

Sample app