Home
/
UIKit
/
Android

Open channel

This page explains the key functions of open channels in Sendbird UIKit for Android, demonstrating how to create a channel, chat in a channel, configure the channel settings, and list channel participants.

Open channels are a public chat that allows a massive number of users to interact with one other in a more dynamic environment. Open channels can accommodate far more users compared to group channels and don’t require an invitation for the users to enter. To learn more about different behaviors of open channels and group channels , see Channel types on how open channels and group channels work.


Create a channel

Instead of creating an open channel directly in UIKit, use one of the following three methods to create a channel instance for UIKit.

  • Sendbird Dashboard
  • Sendbird Chat SDK for Android
  • Platform API

Sendbird Dashboard

Sendbird Dashboard allows you to create an open channel through an easy-to-follow graphic-based user interface, or GUI.

  1. Login to Sendbird Dashboard and find your Application.
  2. Go to the Chat > Open channels, and click Create channel at the top-right corner.
  3. In the dialog box that appears, specify the name, unique URL, cover image, and custom type of a new channel you are about to create.

Sendbird Chat SDK for Android

To create an open channel through Android Chat SDK, see Create a channel in the Chat SDK Docs for Android.

Platform API

To create an open channel through Chat Platform API, see Create a channel in the Platform API Docs.


Chat in a channel

An open channel allows dynamic interaction among a massive number of users. Open channels can be easily managed without the need for complex implementation because the OpenChannelFragment uses the OpenChannelMessageListAdapter to manage messages in a channel.

UIKit supports plain text messages, file messages, and media content such as photos and videos. All messages in open channels are cached using memory, and messages that failed to be sent are only kept within the active channel object.

Unlike group channels, open channels in UIKit support an overlayMode. This enables you to add a semi-transparent upper layer on the top of the channel background. The overlayMode can be useful for events like live streaming that requires an open channel to display both an overlapped foreground and background.

Create a fragment

UIKit’s OpenChannelFragment class extends the Fragment class and can be freely customized on the activity. It is recommended to create this fragment using the onCreate() method of the user-generated activity. By default, the header of the channel view is invisible when using the OpenChannelFragment. If you want to display the header, you can configure the view as follows:

Light Color Skin
Copy
public class OpenChannelActivity extends AppCompatActivity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);
        OpenChannelFragment fragment = createOpenChannelFragment(CHANNEL_URL);
        // Put the Fragment in the view.
    }

    protected OpenChannelFragment createOpenChannelFragment(@NonNull String channelUrl) {
        return new OpenChannelFragment.Builder(channelUrl)
            .setUseHeader(true)
            .build();
    }
}

Note : To use the UIKit's fragments as a nested fragment, refer to the Android Developer Documentation's Nested Fragments. Addtionally, if the fragment size is small enough to be covered by the soft keyboard, it is recommended to use the keyboard display type as KeyboardDisplayType.Dialog.

Build the fragment

The OpenChannelFragment class enables you to customize the UI of your channel view. As shown below, the fragment class is composed of three regions: the header, message list, and message input field.

Open channle chat view

RegionDescription

Header

Acts as an optional ActionBar in the channel activity. By default, the activity displays the channel cover image, channel name, creator name, as well as two buttons on the top left and top right, which are all customizable. If the top left button is clicked, the finish() method of the activity is called. If the top right button is clicked, the operator is taken to the OpenChannelSettingsActivity while the participant is taken to the ParticipantsListActivity.

Message list

UIKit provides ten different types of messages listed in the table below. If the message grouping is used for your UI, messages are grouped based on a user who sent them and the time those messages were sent. For example, messages sent by each user are divided and displayed by minute.

Message input field

Enables users to either send a text message or send a file message by importing a file, image, or video stored on their devices.


  • Message types
Message typeDescription

VIEW_TYPE_USER_MESSAGE_ME (0)

A text message sent by the current user. Failed messages can be resent with a short click or deleted with a long click. Successfully sent messages can also be copied, edited, and deleted with a long click.

VIEW_TYPE_USER_MESSAGE_OTHER (1)

A text message sent by other users. The message can be copied through a long click.

VIEW_TYPE_FILE_MESSAGE_ME (2)

A file message sent by the current user. Failed messages can be resent with a short click or deleted with a long click. Successfully sent messages can be viewed through an openable app when clicked, and deleted or saved with a long click.

VIEW_TYPE_FILE_MESSAGE_OTHER (3)

A file message sent by other users. Apps that can be used to open the file message can be viewed when clicked, and the file can be saved with a long click.

VIEW_TYPE_FILE_MESSAGE_IMAGE_ME (4)

An image message sent by the current user. Failed messages can be resent with a short click, and deleted with a long click. Successfully sent messages can be previewed through the PhotoViewActivity when clicked, and deleted or saved with a long click.

VIEW_TYPE_FILE_MESSAGE_IMAGE_OTHER (5)

A file message sent by other users.The file can be previewed through the PhotoViewActivity when clicked, and saved with a long click.

VIEW_TYPE_FILE_MESSAGE_VIDEO_ME (6)

A video message sent by the current user. Failed messages can be resent when clicked, and deleted when long clicked. Successfully sent messages can be played through an openable app when clicked, and deleted and saved with a long click.

VIEW_TYPE_FILE_MESSAGE_VIDEO_OTHER (7)

A video message sent by other users. The file can be played through the app that can open it when clicked, and saved with a long click.

VIEW_TYPE_ADMIN_MESSAGE (8)

A message sent by the administrator. Typically, this message appears when users enter a channel or a channel is created.

VIEW_TYPE_TIME_LINE (9)

A message that displays the message timeline by the date sent if a day or more has passed since delivery.

Set the fragment.builder()

The OpenChannelFragment.Builder class provides APIs that enable you to customize the OpenChannelFragment fragment. Before building, the OpenChannelFragment’s settings can be configured using the builder’s setters as follows:

Light Color Skin
Copy
OpenChannelFragment fragment = new OpenChannelFragment.Builder(CHANNEL_URL)
    .setCustomOpenChannelFragment(new CustomOpenChannelFragment())
    .setUseHeader(true)
    .setHeaderTitle(channelName)
    .setHeaderDescription(participantsCount)
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_info)
    .setInputLeftButtonIconResId(R.drawable.icon_add)
    .setInputRightButtonIconResId(R.drawable.icon_send)
    .setInputHint("Type here")
    .setHeaderLeftButtonListener(leftButtonListener)
    .setHeaderRightButtonListener(rightButtonListener)
    .setOpenChannelMessageListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .showInputRightButtonAlways()
    .setInputLeftButtonListener(inputLeftButtonListener)
    .setMessageListParams(params)
    .setUseMessageGroupUI(true)
    .setOnProfileClickListener(profileClickListener)
    .setUseUserProfile(false)
    .useOverlayMode()
    .setHeaderDescription(participantsCount)
    .setKeyboardDisplayType(keyboardDisplayType)
    .setLoadingDialogHandler(loadingDialogHandler)
    .setEmptyIcon(R.drawable.icon_message)
    .setEmptyText("No messages")
    .setOnEditModeTextChangedListener(null)
    .setInputText(null)
    .setOnInputTextChangedListener(null)
    .build();
Setter methodDescription

setCustomOpenChannelFragment()

Applies CustomOpenChannelFragment to OpenChannelFragment. By inheritance, CustomOpenChannelFragment should be a subclass of OpenChannelFragment.

setUserHeader()

Determines whether the header is used. (Default: false)

setHeaderTitle()

Specifies the title of the header. (Default: channel name)

setHeaderDescription()

Specifies the description of the header. (Default: participants count)

setUseHeaderLeftButton()

Determines whether the left button of the header is used. (Default: true)

setUseHeaderRightButton()

Determines whether the right button of the header is used. (Default: true)

setHeaderLeftButtonIconResId()

Specifies the icon of the left button of the header. (Default: icon_arrow_left)

setHeaderLeftButtonIcon()

Specifies the icon and the tint on the left button of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200)

setHeaderRightButtonIconResId()

Specifies the icon of the right button of the header. (Default: icon_members (participants), icon_info (operators))

setHeaderRightButtonIcon()

Specifies the icon and the tint on the right button of the header. (Default: icon_members (participants), icon_info (operators), light mode : primary_300, dark mode : primary_200)

setInputLeftButtonIconResId()

Specifies the icon of the left button of the input. (Default: icon_add)

setInputLeftButtonIcon()

Specifies the icon and the tint on the left button of the input. (Default: icon_add, light mode : primary_300, dark mode : primary_200)

setInputRightButtonIconResId()

Specifies the icon of the right button of the input. (Default: icon_send)

setInputRightButtonIcon()

Specifies the icon and the tint on the right button of the input. (Default: icon_send, light mode : primary_300, dark mode : primary_200)

setInputHint()

Specifies an input hint for the text input field. (Default: Enter message)

setHeaderLeftButtonListener()

Specifies the action of the click listener for the left button of the header. (Default: finish the current activity)

setHeaderRightButtonListener()

Specifies the action of the click listener for the right button of the header. (Default: start the ParticipantsListActivity (participants), start the OpenChannelSettingsActivity (operators))

setOpenChannelMessageListAdapter()

Specifies the message list adapter. (Default: UIKit's OpenChannelMessageListAdapter)

setItemClickListener()

Specifies the action of the click listener for a message list item. (Default: action differs by message type)

setItemLongClickListener()

Specifies the action of the long click listener for a message list item. (Default: action differs by message type)

showInputRightButtonAlways()

Determines whether to show a button on the right-side of the input box at all times. (Default: unused)

setInputLeftButtonListener()

Specifies the action of the click listener for the left button of the input. (Default: show a dialog for opening files)

setMessageListParams()

Specifies a set of parameters to retrieve a list of matching messages in the channel by configuring MessageListParams. If specified, the fragment will get the list from Sendbird server. Note that the reverse and nextResultSize properties of MessageListParams are not used in UIKit and thus not effective even if specified.

setUseMessageGroupUI()

Determines whether the message grouping is used in the UI. (Default: true)

setOnProfileClickListener()

Specifies the action of the click listener for a user profile. (Default: displaying the user profile dialog)

setUseUserProfile()

Determines whether to show the user profile dialog. (Default: true)

useOverlayMode()

Determines whether to set overaly style.

setKeyboardDisplayType()

Specifies the keyboard display type of the message input. (Default: KeyboardDisplayType.Plane)

setLoadingDialogHandler()

Sets the custom loading dialog handler. (Default: UIKit's LoadingDialogHandler)

setEmptyIcon()

Specifies the icon when there aren't any messages in the channel. (Default: icon_message)

setEmptyIcon()

Specifies the icon when there aren't any messages in the channel. (Default: icon_message, light mode : onlight_03, dark mode : ondark_03)

setEmptyText()

Specifies the text when there aren't any messages in the channel. (Default: No messages)

setOnEditModeTextChangedListener()

Specifies the listener invoked whenever the message text in the input box is edited in an edit mode. (Default: null)

setInputText()

Specifies the text that appears the input box. (Default: null)

setOnInputTextChangedListener()

Specifies the listener invoked whenever the message text in the input box changes. (Default: null)

Overlay Mode

Open channels support the overlayMode, which allows you to put another layer of content on the top of the channel background. With a simple implementment, the additional interface can be applied along with other UI components through the overlay style.

The overlayMode can be useful when the background needs to be shown through. The overlayMode is supported for all orientations of the screen. If you'd like to change the styles of overlayMode, change the UIKIt-defined style values in the res/values/styles_overlay.xml file and you can access styles to add .Overlay to the UIKit-defined style names.

Note: You need to keep the original names of the items and parents defined by the UIKit during the process.

Overlay mode in use for a football game streaming

Light Color Skin
Copy
OpenChannelFragment fragment = new OpenChannelFragment.Builder(CHANNEL_URL)
    .useOverlayMode()
    .build();

Customize the fragment methods

You can customize the methods in the OpenChannelFragment class as follows:

  1. Create a new fragment which inherits OpenChannelFragment as a subclass.
  2. Override the methods in the fragment. The following table lists the methods that you can use.
  3. Apply the customized fragment by using the OpenChannelFragment.Builder().setCustomOpenChannelFragment() method.
MethodDescription

onBeforeSendUserMessage()

Called prior to sending a user message. You can override this method and add the data you want to use to the given parameters.

onBeforeUpdateUserMessage()

Called prior to updating a user message. You can override this method and add the data you want to use to the given parameters.

onBeforeSendFileMessage()

Called prior to sending a file message. You can override this method and add the data you want to use to the given FileMessageParams parameter.

sendUserMessage()

Sends a user message with UserMessageParams.

sendFileMessage()

Sends a file message with Uri.

updateUserMessage()

Updates a user message that was already sent in the channel.

deleteMessage()

Delete any type of message.

resendMessage()

Resends a failed message.

Add a click listener to a channel item

Click listeners can be added to channel items so that a certain item can perform a specific action when clicked. Through the listeners, the BaseMessage object is passed as an argument to a parameter, which includes the message type of the clicked message. Different click listeners can be added based on the message type.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<BaseMessage>() {
    @Override
    public void onItemClick(View view, int position, BaseMessage data) {
        MessageType type = MessageViewHolderFactory.getMessageType(message);
        // Set what action to perform when an item is clicked.
    }
}).setItemLongClickListener(new OnItemLongClickListener<BaseMessage>() {
    @Override
    public void onItemLongClick(View view, int position, BaseMessage data) {
        MessageType type = MessageViewHolderFactory.getMessageType(message);
        // Set what action to perform when an item is long-clicked.
    }
});

Customize the message list

A message list can be customized by creating a CustomOpenChannelMessageListAdapter class that inherits the OpenChannelMessageListAdapter and MessageViewHolder classes provided by UIKit, implementing the adapter, and then applying it to the fragment.

  1. Create a CustomOpenChannelMessageListAdapter class by inheriting the OpenChannelMessageListAdapter class and implement the custom adapter.
Light Color Skin
Copy
public class CustomOpenChannelMessageListAdapter extends OpenChannelMessageListAdapter {
    public CustomOpenChannelMessageListAdapter(OpenChannel channel) {
        super(channel);
    }

    @NonNull
    @Override
    public MessageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Create the custom ViewHolder and return it.
        // Create your custom ViewHolder or call super.onCreateViewHolder() if you want to use the default.
        return new CREATE_YOUR_CUSTOM_VIEWHOLDER();
    }

    @Override
    public void onBindViewHolder(@NonNull MessageViewHolder holder, int position) {
        // You must call the super. You can use methods that MessageViewHolder provides
        super.onBindViewHolder(holder, position);
        // Bind the custom ViewHolder.
    }

    @Override
    public int getItemViewType(int position) {
        BaseMessage message = getItem(position);
        // Create a message type using a BaseMessage object.
        // If you want to use holders that UIKit provides, you have to call the super.
        // If you want to implement a custom message type, set the type as a number greater than 1,000.
        return super.getItemViewType(position);
   }
}
  1. Create a CustomOpenChannelMessageListAdapter class by inheriting the MessageViewHolder class and implement a custom ViewHolder class.
Light Color Skin
Copy
public class CustomMessageViewHolder extends MessageViewHolder {
    public CustomMessageViewHolder(View view) {
        super(view);
    }

    @Override
    public void bind(BaseChannel channel, @NonNull BaseMessage message) {
        // Bind the data to the view holder.
    }

    @Override
    public View getClickableView() {
        // Return a clickable view.
        return view.findViewById(R.id.YOUR_CLICKABLE_VIEW);
    }
}
  1. Apply the custom adapter to the fragment.
Light Color Skin
Copy
builder.setOpenChannelMessageListAdapter(new CustomOpenChannelMessageListAdapter());

Customize the style of channels

To customize the style of channel items, change the UIKit-defined style values in the res/values/styles.xml file. The table below shows the style of channel items you can customize. You need to keep the original names of the items and parents defined by the UIKit during the process.

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.

Light Color Skin
Copy
<style name="Custom" parent="SendBird">
    <item name="sb_channel_message_list_style">CustomMessageList</item>
    <item name="sb_open_channel_message_user_style">CustomUserMessage</item>
    <item name="sb_open_channel_message_file_style">CustomFileMessage</item>
    <item name="sb_open_channel_message_admin_style">CustomAdminMessage</item>
    <item name="sb_message_timeline_style">CustomTimelineMessage</item>
    <item name="sb_message_input_style">CustomMessageInput</item>
</style>

<style name="CustomMessageList" parent="Widget.SendBird.RecyclerView.Message">
    <item name="sb_pager_recycler_view_use_divide_line"></item>
    <item name="sb_message_recyclerview_background"></item>
    <item name="sb_message_recyclerview_tooltip_background"></item>
    <item name="sb_message_recyclerview_tooltip_textappearance"></item>
</style>

<style name="CustomMessage" parent="Widget.SendBird.OpenChannel.Message">
    <item name="sb_message_time_text_appearance"></item>
    <item name="sb_message_sender_name_text_appearance"></item>
    <item name="sb_message_operator_name_text_appearance"></item>
</style>

<style name="CustomUserMessage" parent="Widget.SendBird.OpenChannel.Message.User">
    <item name="sb_message_time_text_appearance"></item>
    <item name="sb_message_sender_name_text_appearance"></item>
    <item name="sb_message_operator_name_text_appearance"></item>
    <item name="sb_message_background"></item>
    <item name="sb_message_text_appearance"></item>
    <item name="sb_message_ogtag_background"></item>
    <item name="sb_message_ogtag_title_appearance"></item>
    <item name="sb_message_ogtag_description_appearance"></item>
    <item name="sb_message_ogtag_url_appearance"></item>
    <item name="sb_message_link_text_color"></item>
    <item name="sb_message_edited_mark_text_appearance"></item>
</style>

<style name="CustomFileMessage" parent="Widget.SendBird.OpenChannel.Message.File">
    <item name="sb_message_text_appearance"></item>
    <item name="sb_message_background"></item>
</style>

<style name="CustomAdminMessage" parent="Widget.SendBird.OpenChannel.Message.Admin">
    <item name="sb_admin_message_text_appearance"></item>
    <item name="sb_admin_message_background"></item>
</style>

<style name="CustomTimelineMessage" parent="Widget.SendBird.Message.Timeline">
    <item name="sb_message_timeline_text_appearance"></item>
    <item name="sb_message_timeline_background"></item>
</style>

<style name="CustomMessageInput" parent="Widget.SendBird.MessageInput">
    <item name="sb_message_input_background"></item>
    <item name="sb_message_input_text_background"></item>
    <item name="sb_message_input_text_appearance"></item>
    <item name="sb_message_input_text_hint_color"></item>
    <item name="sb_message_input_text_cursor_drawable"></item>
    <item name="sb_message_input_enable"></item>
    <item name="sb_message_input_left_button_tint"></item>
    <item name="sb_message_input_left_button_background"></item>
    <item name="sb_message_input_right_button_tint"></item>
    <item name="sb_message_input_right_button_background"></item>
    <item name="sb_message_input_edit_save_button_text_appearance"></item>
    <item name="sb_message_input_edit_save_button_text_color"></item>
    <item name="sb_message_input_edit_save_button_background"></item>
    <item name="sb_message_input_edit_cancel_button_text_appearance"></item>
    <item name="sb_message_input_edit_cancel_button_text_color"></item>
    <item name="sb_message_input_edit_cancel_button_background"></item>
</style>
Widget.SendBird.RecyclerView.Message
AttributeResource typeDescription

sb_pager_recycler_view_use_divide_line

boolean

Determines whether to use line dividers between messages.

sb_message_recyclerview_background

drawable/color

The background of the entire message list.

sb_message_recyclerview_tooltip_background

drawable/color

The tooltip background that notifies users when a new message arrives.

sb_message_recyclerview_tooltip_textappearance

text appearance

The text size, color, font, and style in the tooltip when a new message arrives.

Widget.SendBird.OpenChannel.Message
AttributeResource typeDescription

sb_message_time_text_appearance

text appearance

The text size, color, font, and style of the text indicating the time a message was generated.

sb_message_sender_name_text_appearance

text appearance

The text size, color, font, and style of the text indicating a user's nickname.

sb_message_operator_name_text_appearance

text appearance

The text size, color, font, and style of the text indicating a message sender's nickname if the sender is an operator.

Widget.SendBird.OpenChannel.Message.User
AttributeResource typeDescription

sb_message_time_text_appearance

text appearance

The text size, color, font, and style of time.

sb_message_sender_name_text_appearance

text appearance

The text size, color, font, and style of a message sender's name.

sb_message_operator_name_text_appearance

text appearance

The text size, color, font, and style of operator name if the sender is an operator.

sb_message_background

drawable/color

The background of text messages.

sb_message_text_appearance

text appearance

The text size, color, font, and style of text messages.

sb_message_ogtag_background

drawable/color

The background of the open graph information.

sb_message_ogtag_title_appearance

text appearance

The text size, color, font, and style of the open graph title.

sb_message_ogtag_description_appearance

text appearance

The text size, color, font, and style of the open graph description.

sb_message_ogtag_url_appearance

text appearance

The text size, color, font, and style of the open graph URL.

sb_message_link_text_color

color

The color of link text.

sb_message_edited_mark_text_appearance

text appearance

The text size, color, font, and style of the edited marker.

Widget.SendBird.OpenChannel.Message.File
AttributeResource typeDescription

sb_message_text_appearance

text appearance

The text size, color, font, and style of file messages.

sb_message_background

drawable/color

The background of file messages.

Widget.SendBird.OpenChannel.Message.Admin
AttributeResource typeDescription

sb_admin_message_text_appearance

text appearance

The text size, color, font, and style of messages sent by administrators.

sb_admin_message_background

drawable/color

The background of messages sent by administrators.

Widget.SendBird.Timeline
AttributeResource typeDescription

sb_message_timeline_text_appearance

text appearance

The text size, color, font, style of timeline messages.

sb_message_timeline_background

drawable/color

The background of timeline messages.

To apply the declared custom styles, pass the unique URL of the channel and the R.style.Custom to the OpenChannelFragment.Builder constructor as follows:

Light Color Skin
Copy
new OpenChannelFragment.Builder(CHANNEL_URL, R.style.Custom).build();

List channel participants

A participants list is the complete list of users who are participating in a specific open channel.

Start an activity

Use the intent to move from one acivity to the ParticipantsListActivity along with the unique URL of the channel as follows:

Light Color Skin
Copy
Intent intent = ParticipantsListActivity.newIntent(context, CHANNEL_URL);
startActivity(intent);

If you want to customize the participants list activity, use CustomParticipantsListActivity as follows:

Light Color Skin
Copy
Intent intent = ParticipantsListActivity.newIntentFromCustomActivity(context, CustomParticipantsListActivity.class, CHANNEL_URL);
startActivity(intent);

Create a fragment

UIKit’s ParticipantsListFragment class extends the Fragment class and is designed to take up the whole screen of the activity. It is recommended to create this fragment in the onCreate() method of the user-generated activity. By default, the header of the channel participants list view isn’t visible when using the ParticipantsListFragment.

Light Color Skin
Copy
public class ParticipantsListActivity extends AppCompatActivity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);
        ParticipantsListFragment Fragment = createParticipantsListFragment(CHANNEL_URL);
        // Put the Fragment in the view.
    }

    protected ParticipantsListFragment createParticipantsListFragment(@NonNull String channelUrl) {
        return new ParticipantsListFragment.Builder(channelUrl)
            .setUseHeader(true)
            .setHeaderTitle(getString(R.string.sb_text_header_participants))
            .setEmptyIcon(R.drawable.icon_chat)
            .setEmptyText(R.string.sb_text_participants_list_empty)
            .build();
    }
}

Note : To use UIKit's fragments as a nested fragment, refer to the Android Developer Documentation's Nested Fragments.

Overridable method

UIKit provides methods that can be overridden so that you can customize your UI.

MethodReturn typeDescription

createParticipantsListFragment()

ParticipantsListFragment

Called when the ParticipantsListActivity is created.

Build the fragment

The ParticipantsListFragment class enables you to customize the UI of the participant list view. As shown below, the fragment class is composed of two regions: the header and participants list.

ParticipatnListFragment shows a list of participants.

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the title and one button on the top left. The button icon and title can be customized. If the left button is clicked, the finish() method of the activity is called.

Participants list

Consists of each user’s profile image and nickname. By default, You can retrieve a list of participants who are currently online and receiving all messages from an open channel.

Set the fragment.builder()

The ParticipantsListFragment.Builder class provides APIs that enable you to cutomize the ParticipantsListFragment fragment. Before building, the ParticipantsListFragment’s settings can be configured using the builder’s setters as follows:

Light Color Skin
Copy
ParticipantsListFragment Fragment = new ParticipantsListFragment.Builder(CHANNEL_URL)
    .setCustomParticipantsListFragment(new CustomParticipantsListFragment())
    .setUseHeader(true)
    .setHeaderTitle("Participants")
    .setUseHeaderLeftButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText(R.string.sb_text_participants_list_empty)
    .setParticipantsListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .setOnProfileClickListener(profileClickListener)
    .setUseUserProfile(true)
    .build();
Setter methodDescription

setCustomParticipantsListFragment()

Applies CustomParticipantsListFragment to ParticipantsListFragment. By inheritance, CustomParticipantsListFragment should be a subclass of ParticipantsListFragment.

setUserHeader()

Determines whether the header is used. (Default: calls from an activity: true, calls from a fragment: false)

setHeaderTitle()

Specifies the title of the header. (Default: Participants)

setUseHeaderLeftButton()

Determines whether the left button of the header is used. (Default: true)

setHeaderLeftButtonIconResId()

Specifies the icon of the left button of the header. (Default: icon_arrow_left)

setHeaderLeftButtonIcon()

Specifies the icon and the tint on the left button of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200)

setHeaderLeftButtonListener()

Specifies the action of the click listener for the left button of the header. (Default: finish the current activity)

setEmptyIcon()

Specifies the icon when there aren't any participants in the channel. (Default: icon_chat)

setEmptyIcon()

Specifies the icon when there aren't any participants in the channel. (Default: icon_chat, light mode : onlight_03, dark mode : ondark_03)

setEmptyText()

Specifies the text there aren't any participants in the channel. (Default: No users)

setParticipantsListAdapter()

Specifies the participant list adapter. (Default: UIKit's ParticipantsListAdapter)

setItemClickListener()

Specifies the action of the click listener for an item of the participant list. (Default: none)

setItemLongClickListener()

Specifies the action of the long click listener for an item of the participant list. (Default: none)

setOnProfileClickListener()

Specifies the action of the click listener for a user profile. (Default: displaying the user profile dialog)

setUseUserProfile()

Determines whether to show the user profile dialog. (Default: false)

Add a click listener to participants items

Click listeners can be added to participant items so that a certain item can perform a specific action when clicked. Through the listeners, the User object is passed as an argument to a parameter, which can be used to retrieve participant information.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<User>() {
    @Override
    public void onItemClick(View view, int position, User data) {
        // Set what action to perform when an item is clicked.
    }
}).setItemLongClickListener(new OnItemLongClickListener<User>() {
    @Override
    public void onItemLongClick(View view, int position, User data) {
        // Set what action to perform when an item is long-clicked.
    }
});

Customize the participant list

A participant list can be customized by creating CustomParticipantsListAdapter class that interits the UserTypeListAdapter and BaseViewHolder<User> classes provided by UIKit, implementing the adapter, and then applying it in the fragment.

  1. Create a CustomParticipantsListAdapter class by inheriting the UserTypeListAdapter class and implement the custom adapter.
Light Color Skin
Copy
public class CustomParticipantsListAdapter extends UserTypeListAdapter {
    @NonNull
    @Override
    public BaseViewHolder<User> onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Create the custom view holder and return it.
        // Create your custom viewholder or you can call super.onCreateViewHolder() if you want to use the default.
        return new CREATE_YOUR_CUSTOM_VIEWHOLDER();
    }

    @Override
    public void onBindViewHolder(@NonNull BaseViewHolder<User> holder, int position) {
        // When you call the super, the listener implemented through Builder is attached.
        // You can implement your own listener here without calling the super.
        super.onBindViewHolder(holder, position);
        // Bind the custom view holder.
    }
}
  1. Create a CustomParticipantViewHolder class by inheriting the BaseViewHolder<User> class and implement a custom ViewHolder class.
Light Color Skin
Copy
public class CustomParticipantViewHolder extends BaseViewHolder<User> {
    public CustomParticipantViewHolder(@NonNull View itemView) {
        super(itemView);
    }

    @Override
    public void bind(User item) {
        // Bind the data to the view holder.
    }
}
  1. Apply the custom adapter to the fragment.
Light Color Skin
Copy
builder.setParticipantsListAdapter(new CustomParticipantsListAdapter());

Customize the style of participant items

To customize the style of participant items, change the UIKit-defined style values in the res/values/styles.xml file. The style of participant items is the same as that of member items. The table below shows the style of member items you can customize. You need to keep the original names of the items and parents defined by UIKit during the process.

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark at the end of each UIKit-defined style name.

Light Color Skin
Copy
<style name="Custom" parent="SendBird">
    <item name="sb_member_preview_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.SendBird.MemberPreview">
    <item name="android:background"></item>
    <item name="sb_member_preview_nickname_appearance"></item>
    <item name="sb_member_preview_description_appearance"></item>
    <item name="sb_member_preview_action_menu_background"></item>
</style>
Widget.SendBird.MemberPreview
AttributeResource typeDescription

android:background

drawable/color

The user item background.

sb_user_preview_nickname_appearance

text appearance

The text size, color, font, and style of the participant nickname.

sb_member_preview_description_appearance

text appearance

The text size, color, font, and style of the descriptions of participant.

sb_member_preview_action_menu_background

drawable/color

The action menu background.

To apply the declared custom styles, pass the R.style.Custom to the ParticipantsListFragment.Builder constructor as follows:

Light Color Skin
Copy
new ParticipantsListFragment.Builder(R.style.Custom).build();

Configure the channel settings

The OpenChannelSettingsActivity or OpenChannelSettingsFragment class allows you to configure and customize the settings of each channel. These classes can be used to change the channel name, cover image, or delete the channel. They can also be used to check the number of channel participants or go to the ParticipantsListActivity.

Note : Only operators can update the channel settings.

Start an activity

Use the intent to move from one acivity to the OpenChannelSettingsActivity using the unique URL of the channel as follows:

Light Color Skin
Copy
Intent intent = OpenChannelSettingsActivity.newIntent(context, CHANNEL_URL);
startActivity(intent);

If you want to customize the channel settings activity, use CustomOpenChannelSettingsActivity as follows:

Light Color Skin
Copy
Intent intent = OpenChannelSettingsActivity.newIntentFromCustomActivity(context, CustomOpenChannelSettingsActivity.class, CHANNEL_URL);
startActivity(intent);

Create a fragment

UIKit’s OpenChannelSettingsFragment class extends the Fragment and is designed to take up the whole screen of the activity. By default, the header isn’t visible when using the OpenChannelSettingsFragment. When creating a OpenChannelSettingsFragment fragment, the unique URL of the channel must be passed as an argument.

Light Color Skin
Copy
public class OpenChannelSettingsActivity extends AppCompatActivity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);
        OpenChannelSettingsFragment fragment = createOpenChannelSettingsFragment(url);
        // Put the Fragment in the view.
    }

    protected OpenChannelSettingsFragment createOpenChannelSettingsFragment(@NonNull String channelUrl) {
        return new OpenChannelSettingsFragment.Builder(channelUrl)
            .setUseHeader(true)
            .build();
    }
}

Note : To use UIKit's fragments as a nested fragment, refer to the Android Developer Documentation's Nested Fragments.

Overridable method

UIKit provides methods that can be overridden so that you can customize your UI.

MethodReturn typeDescription

createOpenChannelSettingsFragment()

OpenChannelSettingsFragment

Called when the OpenChannelSettingsActivity is created.

Build the fragment

The OpenChannelSettingsFragment class enables you to customize the UI of your channel settings view. As shown below there are three regions of the fragment class: the header, channel information, and settings.

OpenChannelSettingsFragment shows channel information and allows you to edit it.

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the title and two buttons on the top left and top right, and only the title and the icon of the left button can be customized. If the left button is clicked, the finish() method of the activity is called. If the right button is clicked, a dialog appears asking if the user would like to change the channel’s cover image and name.

Channel information

Includes the channel's cover image and name. The channel’s cover image and name can be changed with the edit button. The change is reflected immediately but loading the new cover image may take some time.

Settings

Provides the Settings menu as shown in the following table.

Settings that this fragment supports
SettingsDescription

Channel cover image

Displays the cover image of a channel.

Channel name

Displays the name of a channel.

Change channel cover image

Changes the cover image of the channel.

Change channel name

Changes the name of the channel.

URL

Displays the url of the channel.

Participants

Takes a user to the participants list view of the ParticipantsListActivity to display the channel participants.

Delete channel

Deletes a channel.

Set the fragment.builder()

The OpenChannelSettingsFragment.Builder class provides APIs that allow you to customize the OpenChannelSettingsFragment fragment. Before building, the OpenChannelSettingsFragment can be customized using the builder’s setters as follows:

Light Color Skin
Copy
OpenChannelSettingsFragment Fragment = new OpenChannelSettingsFragment.Builder(CHANNEL_URL)
    .setCustomOpenChannelSettingsFragment(new CustomOpenChannelSettingsFragment())
    .setUseHeader(true)
    .setHeaderTitle("Settings")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setOnSettingMenuClickListener(clickListener)
    .setLoadingDialogHandler(loadingDialogHandler)
    .build();
Setter methodDescription

setCustomOpenChannelSettingsFragment()

Applies CustomOpenChannelSettingsFragment to OpenChannelSettingsFragment. By inheritance, CustomOpenChannelSettingsFragment should be a subclass of OpenChannelSettingsFragment.

setUserHeader()

Determines whether the header is used. (Default: calls from an activity: true, calls from a fragment: false)

setHeaderTitle()

Specifies the title of the header. (Default: Channel information)

setUseHeaderLeftButton()

Determines whether the left button of the header is used. (Default: true)

setUseHeaderRightButton()

Determines whether the right button of the header is used. (Default: true)

setHeaderLeftButtonIconResId()

Specifies the icon of the left button of the header. (Default: icon_arrow_left)

setHeaderLeftButtonIcon()

Specifies the icon and the tint on the left button of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200)

setHeaderLeftButtonListener()

Specifies the action of click listener for the left button of the header. (Default: finish the current activity)

setOnSettingMenuClickListener()

Specifies the action of click listener for the items of the menu.

setLoadingDialogHandler()

Sets the custom loading dialog handler. (Default: UIKit's LoadingDialogHandler)

Customize the fragment methods

You can customize the methods in the OpenChannelSettingsFragment as follows:

  1. Create a new fragment which inherits OpenChannelSettingsFragment as a subclass.
  2. Override the methods in the fragement. The following table lists the methods you can use.
  3. Apply the customized fragment by using the OpenChannelSettingsFragment.Builder().setCustomOpenChannelSettingsFragment() method.
MethodDescription

onBeforeUpdateOpenChannel()

Called prior to updating the information of an open channel. You can override this method and add the data you want to use to the given parameters.

updateOpenChannel()

Updates an open channel with OpenChannelParams.

deleteChannel()

Deletes an open channel.

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear.

Customize the style of channel settings

To customize the style of channel settings items, change the UIKit-defined style values in the res/values/styles.xml file. The table below shows the style of channel settings items you can customize. You need to keep the original names of the items and parents defined by the UIKit during the process.

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.

Light Color Skin
Copy
<style name="Custom" parent="SendBird">
    <item name="sb_open_channel_settings_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.SendBird.OpenChannel.ChannelSettings">
    <item name="sb_channel_settings_background"></item>
    <item name="sb_channel_settings_item_background"></item>
    <item name="sb_channel_settings_name_appearance"></item>
    <item name="sb_channel_settings_item_appearance"></item>
    <item name="sb_channel_settings_description_appearance"></item>
    <item name="sb_channel_information_title_appearance"></item>
    <item name="sb_channel_information_content_appearance"></item>
</style>
Widget.SendBird.OpenChannel.ChannelSettings
AttributeResource typeDescription

sb_channel_settings_background

drawable/color

The background of the channel settings.

sb_channel_settings_item_background

drawable/color

The background of the channel settings's item.

sb_channel_settings_name_appearance

text appearance

The text size, color, font, and style of the text that represents the channel name.

sb_channel_settings_item_appearance

text appearance

The text size, color, font, and style of the text that represents the channel settings's item.

sb_channel_settings_description_appearance

text appearance

The text size, color, font, and style of the item descriptions used in the channel settings.

sb_channel_information_title_appearance

text appearance

The text size, color, font, and style of the title of the channel information.

sb_channel_information_content_appearance

text appearance

The text size, color, font, and style of the content of the channel information.

To apply the declared custom styles, pass the unique URL of the channel and R.style.Custom to the OpenChannelSettingsFragment.Builder constructor as follows:

Light Color Skin
Copy
new OpenChannelSettingsFragment.Builder(CHANNEL_URL, R.style.Custom).build();