Customize the channel settings screen

This tutorial walks you through the process of customizing the channel settings screen in your Android app. In this tutorial, you will be able to:

Understanding the channel settings view

UI customization for Sendbird UIKit for Android involves declaring your custom components such as the following:

HeaderComponent of ChannelSettingsFragment:
- Left and right buttons
- Title
ChannelSettingsMenuComponent:
- Channel information
- Menu items

Header

The channel settings view can be largely divided into to sections: a header with a title and buttons and a body that contains menu items. Here, we will focus on customizing the header through FragmentProviders.channelSettings in BaseApplication.kt. Through its setters, you can customize the header to show or hide the buttons and change the icon, color, or header text string by overriding the default configurations.

If you wish to change the font, color, or size, you can do so in the styles.xml file.

The following code snippets show how to:

Show or hide buttons

To show or hide buttons in the header, first determine whether to use the buttons in the BaseApplication.kt file. Then, set the button icon and color in the BaseApplication.kt file.

BaseApplication.kt

// Determine whether to use the buttons and set their icon resources and color.
class BaseApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // Implement init codes here.

        FragmentProviders.channelSettings = ChannelSettingsFragmentProvider { channelUrl, args ->
            ChannelSettingsFragment.Builder(channelUrl)
                .withArguments(args)
                .setUseHeaderLeftButton(true)   // Shows the left button
                .setUseHeaderRightButton(true)  // Shows the right button
                .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)   // Sets the left button icon
                .setHeaderLeftButtonIcon(
                    com.sendbird.uikit.R.drawable.icon_arrow_left,
                    ColorStateList.valueOf(Color.BLUE)  // Sets the left button color
                )
                .setRightButtonText("Text") // If the text is empty, the right button will be hidden
                .build()
        }
    }
}

Change font

Use styles.xml file and a custom component to apply a custom font style to the header buttons or title text.

styles.xml

// styles.xml file to change the button text style
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomFont">
        <item name="android:fontFamily">@font/chancery</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">18sp</item>
        <item name="android:letterSpacing">-0.01</item>
        <item name="android:lineSpacingExtra">4sp</item>
        <item name="android:textColor">@color/error_500</item>
    </style>

    <style name="Component.Header.State.ChannelSettings.Custom">
        // Set custom font for button
        <item name="sb_appbar_right_button_text_appearance">@style/CustomFont</item>
        // Set custom font for title
        <item name="sb_appbar_title_appearance">@style/CustomFont</item>
    </style>

        <style name="Module.ChannelSettings">
        <item name="sb_component_state_header">@style/Component.Header.State.ChannelSettings.Custom</item>
        <item name="sb_component_channel_settings_info">@style/Component.ChannelSettingsInfo</item>
        <item name="sb_component_channel_settings_menu">@style/Component.ChannelSettingsMenu</item>
    </style>

</resources>

In channel settings, the menu items are displayed in a list view. This may include the following items:

Channel information
Moderation
Notifications
Members

This tutorial demonstrates how to customize the members view.

One of the main features of the channel settings view is the members or member list view. You can customize the member list view by adding or removing the Invite users button.

The following code snippets show how to:

Show or hide the buttons.

Show or hide buttons

The Invite users button appears in the top-right corner of the member list screen. To show or hide the buttons, set setUseHeaderRightButton() of MemberListFragment to false in the BaseApplication class. To re-enable it, set true.

BaseApplication.kt

// Show or hide "Invite users" button
class BaseApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
       // Implement init codes here.

        FragmentProviders.memberList = MemberListFragmentProvider { channelUrl, args ->
            MemberListFragment.Builder(channelUrl)
                .withArguments(args)
                .setUseHeaderRightButton(false)
                .build()
        }
    }
}

Learn more

To learn more about fragments and modules in the UIKit, you an refer to the following pages:

On this page

Header

Show or hide buttons Change font

Menu items

Member list view

Learn more

Sample app