Customize modules and components

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.

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.

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.

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.

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

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)

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>

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.

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.

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())
            }
        }
    }
}

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.