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

Customize the channel settings screen

Copy link

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

Copy link

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

Copy link

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

Copy link

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.

// 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

Copy link

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

// 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>

Menu items

Copy link

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.

Member list view

Copy link

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 buttons

Copy link

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.

// 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

Copy link

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