Customize the channel list screen

Customize a user's channel list view to suit your service's needs. You can customize the channel list screen by adding or removing buttons, changing the layout, or modifying the UI components.

This tutorial demonstrates how to:

Customize the header

Header

This guide demonstrates how to customize the header of the channel list screen. The header consists of a title and two buttons on the left and right sides. You can customize the header by showing or hiding the buttons, changing the button icons, changing the button text, and changing the font.

Show or hide buttons

The channel list header can be customized on the global level. These settings will apply to all channel list views.

By setting up the ChannelListFragment.Builder() within the ChannelListFragmentProvider in the BaseApplication.kt, you're defining global settings that apply to all instances of ChannelListFragment across the app. This approach ensures that your preference will be uniformly applied across all users and instances where a ChannelListFragment is used.

Global settings in BaseApplication.kt

class BaseApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // Implement init code here.

        FragmentProviders.channelList = ChannelListFragmentProvider {
            ChannelListFragment.Builder()
                .setUseHeaderLeftButton(true)
                .setUseHeaderRightButton(true)
                .build()
        }
    }
}

Change the button icon

You can also change the header button icon or its color by setting its resource to the headerLeftButtonIcon and headerRightButtonIcon attributes.

BaseApplication.kt

// Set the button icon and its color
class BaseApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // Implement init code here.

        FragmentProviders.channelList = 
        ChannelListFragmentProvider {
            ChannelListFragment.Builder()
                .setUseHeaderLeftButton(true)
                .setHeaderLeftButtonIcon(
                    com.sendbird.uikit.R.drawable.icon_arrow_left,
                    ColorStateList.valueOf(Color.BLUE)
                )
                .setUseHeaderRightButton(true)
                .setHeaderRightButtonIcon(
                    com.sendbird.uikit.R.drawable.icon_create,
                    ColorStateList.valueOf(Color.RED)
                )
                .build()
        }
    }
}

Change the button text

To change the button text, use view_channel_list_header.xml.

view_channel_list_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/root"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/background_50"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="@dimen/sb_size_56"
        android:paddingLeft="@dimen/sb_size_8"
        android:paddingRight="@dimen/sb_size_8">

        <TextView
            android:id="@+id/title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/sb_size_8"
            android:layout_marginEnd="@dimen/sb_size_8"
            android:maxLines="1"
            android:ellipsize="end"
            android:text="Channel List"
            android:textAppearance="@style/SendbirdH2OnLight01"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/leftButton"
            app:layout_constraintEnd_toStartOf="@id/rightButton">
        </TextView>

        <TextView
            android:id="@+id/rightButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/sb_size_8"
            android:layout_marginEnd="@dimen/sb_size_8"
            android:scaleType="centerCrop"
            android:layout_gravity="center"
            android:text="Add channel"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/title"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:id="@+id/elevationView"
        android:layout_width="match_parent"
        android:layout_height="@dimen/sb_size_1"
        android:background="@color/onlight_04"/>

</LinearLayout>

Once you change the button from being an icon to text, reset onClickListener. To do so, create a custom header component by extending the HeaderComponent class and override the onCreateView method. Then set it to the BaseApplication class.

ChannelListHeaderComponentBaseApplication.kt

class ChannelListHeaderComponent : HeaderComponent() {
    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        val headerView = inflater.inflate(R.layout.view_channel_list_header, parent, false)
        // TODO : headerView initialization
        val rightButton = headerView.findViewById<TextView>(R.id.rightButton)
        rightButton.setOnClickListener { onRightButtonClicked(rightButton) }
        return headerView
    }
}

Change background color

Use styles.xml file and a custom component to apply a different color to the header background.

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Module.ChannelList">
        <item name="sb_component_header">@style/Component.Header.ChannelList.Custom</item>
        <item name="sb_component_list">@style/Component.List.ChannelList</item>
        <item name="sb_component_status">@style/Component.Status.ChannelList</item>
    </style>

    <style name="Component.Header.ChannelList.Custom">
        <item name="sb_appbar_background">@color/primary_200</item>
    </style>
</resources>

On this page

Header

Show or hide buttons Change the button icon Change the button text Change background color

Sample app