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
ofChannelSettingsFragment
:- 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:
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.
Change font
Use styles.xml
file and a custom component to apply a custom font style to the header buttons or title text.
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:
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
.
Learn more
To learn more about fragments and modules in the UIKit, you an refer to the following pages: