Customize chat header

This guide provides step-by-step instructions on customizing ChannelHeaderComponent. All components of Sendbird UIKit for Android can be also customized in a similar manner.

Create a custom component

Create a new component by inhering from ChannelHeaderComponent and build the UI in the onCreateView method as shown in the code below.

KotlinJava

class CustomChannelHeaderComponent : ChannelHeaderComponent() {
    var binding: ViewCustomHeaderBinding? = null

    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        binding = ViewCustomHeaderBinding.inflate(inflater, parent, false)
        return requireNotNull(binding).root
    }
}

Configure custom component in module

Reflect the newly created component within the Module. It's recommended to set up the Module changes using the Provider in the Application's onCreate() method.

KotlinJava

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

Bind channel data to UI

You can receive the latest channel data through the notifyChannelChanged method. Then, use this received data to render the UI.

KotlinJava

class CustomChannelHeaderComponent : ChannelHeaderComponent() {
    var binding: ViewCustomHeaderBinding? = null

    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        binding = ViewCustomHeaderBinding.inflate(inflater, parent, false)
        return requireNotNull(binding).root
    }

    override fun notifyChannelChanged(channel: GroupChannel) {
        binding?.title?.text = channel.name
    }
}

Bind description data to UI

If using a typing indicator, the description will contain information regarding the typing status. To pass additional information, call the notifyHeaderDescriptionChanged method.

KotlinJava

class CustomChannelHeaderComponent : ChannelHeaderComponent() {
    var binding: ViewCustomHeaderBinding? = null

    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        binding = ViewCustomHeaderBinding.inflate(inflater, parent, false)
        return requireNotNull(binding).root
    }

    override fun notifyChannelChanged(channel: GroupChannel) {
        binding?.title?.text = channel.name
    }

    override fun notifyHeaderDescriptionChanged(description: String?) {
        binding?.description?.visibility = if (description.isNullOrEmpty()) View.GONE else View.VISIBLE
        binding?.description?.text = description
    }
}

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

On this page

Create a custom component Configure custom component in module Bind channel data to UI Bind description data to UI

Sample app