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

Customize chat header

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

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.