Chat UIKit Android View v3
Chat UIKit Android View
Chat UIKit
Android View
Version 3

Customize modules and components

Copy link

Sendbird UIKit for Android allows you to customize its modules and components. In this documentation, we will guide you on how to customize and apply these modules and components within the Sendbird UIKit framework.


Understanding modules and components

Copy link

In the context of Sendbird UIKit, modules organize the UI of an Activity, and components are parts of these modules. For instance, a ChannelModule organizes and manages the UI of a channel screen, while a component such as the ChannelHeaderComponent represents the visual header of a channel.

This separation allows for the following:

  • Flexibility: Customize specific parts without affecting the entire module.
  • Reusability: Use the same component across different modules.
  • Efficiency: Apply common styles or functionalities at the module or component level.

Module vs. Fragment

Copy link

A module is responsible for assembling and rendering the UI that a Fragment needs to display. Fragments not only provide data to the module (UI) but also handle additional functionalities of the Android platform such as permissions and lifecycle.

When to customize

Copy link

The following are some example cases of when to consider customization:

  • To modify the methods of pre-existing modules or components.
  • To pass data or events defined in a custom ViewModel to a Component.
  • To modify fragment-specific options or data through the provided Builder for each Fragment.
  • To modify the fragment's layout or the view of a component.

Customizations

Copy link

The following section further explains how to customize modules and components.

Customize a module

Copy link

To customize a module or its components, you can inherit from the module of component class and override its methods. In the sample code, a custom class CustomChannelModule is defined that inherits from ChannelModule. It doesn't add any new functionality but serves as a placeholder for potential customization.

class CustomChannelModule(context: Context) : ChannelModule(context)

Customize a component

Copy link

In the sample code below, another custom class CustomHeaderComponent is defined, which inherits from ChannelHeaderComponent. This class customizes the way the channel header view is created by overriding the onCreateView method.

class CustomHeaderComponent : ChannelHeaderComponent() {
    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        return ViewCustomHeaderBinding.inflate(inflater, parent, false).root
    }
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/secondary_300"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="MissingDefaultResource">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_custom_header"
        android:textAppearance="@style/SendbirdH1OnLight01"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/description"/>

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:textAppearance="@style/SendbirdCaption1OnLight02"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

List of modules and components

Copy link

The following table shows a list of UIKit's modules and its components. When customizing all modules and components, they should be provided in the correct form for each type.

ModuleComponents

ChannelListModule

HeaderComponentChannel
ListComponent
StatusComponent

ChannelModule

ChannelHeaderComponent
MessageListComponent
MessageInputComponent
StatusComponent

OpenChannelModule

OpenChannelHeaderComponent
OpenChannelMessageListComponent
OpenChannelMessageInputComponent
StatusComponent

CreateChannelModule

SelectUserHeaderComponent
CreateChannelUserListComponent
StatusComponent

ChannelSettingsModule

ChannelSettingsHeaderComponent
ChannelSettingsInfoComponent
ChannelSettingsMenuComponent

OpenChannelSettingsModule

OpenChannelSettingsHeaderComponent
OpenChannelSettingsInfoComponent
OpenChannelSettingsMenuComponent

InviteUserModule

SelectUserHeaderComponent
InviteUserListComponent
StatusComponent

RegisterOperatorModule

SelectUserHeaderComponent
RegisterOperatorListComponent
StatusComponent

OpenChannelRegisterOperatorModule

SelectUserHeaderComponent
OpenChannelRegisterOperatorListComponent
StatusComponent

ModerationModule

HeaderComponent
ModerationListComponent

OpenChannelModerationModule

HeaderComponent
OpenChannelModerationListComponent

MemberListModule

HeaderComponent
MemberListComponent
StatusComponent

BannedUserListModule

HeaderComponent
BannedUserListComponent
StatusComponent

OpenChannelBannedUserListModule

HeaderComponent
OpenChannelBannedUserListComponent
StatusComponent

MutedMemberListModule

HeaderComponent
MutedMemberListComponent
StatusComponent

OpenChannelMutedParticipantListModule

HeaderComponent
OpenChannelMutedParticipantListComponent
StatusComponent

OperatorListModule

HeaderComponent
OperatorListComponent
StatusComponent

OpenChannelOperatorListModule

HeaderComponent
OpenChannelOperatorListComponent
StatusComponent

MessageSearchModule

MessageSearchHeaderComponent
MessageSearchListComponent
StatusComponent

MessageThreadModule

MessageThreadHeaderComponent
ThreadListComponent
MessageThreadInputComponent
StatusComponent

ParticipantListModule

HeaderComponent
ParticipantListComponent
StatusComponent



Apply custom modules and components

Copy link

You can set customized modules and components globally within the UIKit framework using the ModuleProviders. See the full list of Modules provided in the Sendbird UIKit.

Set globally across the application

Copy link

Each time a module for the same screen is created, it uses the same Module class. Additionally, each ModuleProvider for the module provides the arguments needed. It's recommended to set this up within the onCreate() method of your Application as shown in the code below.

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        ModuleProviders.channel = ChannelModuleProvider { context, _ ->
            CustomChannelModule(context).apply {
                setHeaderComponent(CustomChannelHeaderComponent())
                setMessageListComponent(CustomMessageListComponent())
                setInputComponent(CustomInputComponent())
                setStatusComponent(CustomStatusComponent())
            }
        }
    }
}

Set in a specific fragment

Copy link

If you wish to configure a different UI for each fragment, you can use customize as shown in the code below.

class CustomChannelFragment : ChannelFragment() {
    override fun onCreateModule(args: Bundle): ChannelModule {
        return CustomChannelModule(requireContext()).apply {
            setHeaderComponent(CustomChannelHeaderComponent())
            setMessageListComponent(CustomMessageListComponent())
            setInputComponent(CustomInputComponent())
            setStatusComponent(CustomStatusComponent())
        }
    }
}

For an in-depth practical demonstration, see our sample code.