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 in a most simple way.
- Login to Sendbird Dashboard and find your Application.
- Go to the Chat > Open channels, and click Create channel at the top-right corner.
- 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 allows 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 while running a client app.
Note: To quickly build an Android messaging UI, see this tutorial.
Create a fragment
UIKit’s OpenChannelFragment
class extends the Fragment
class and can freely customize 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:
Note : To use the UIKit's fragments as a nested fragment, refer to the Android Developer Documentation's Nested Fragments. Additionally, 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 allows 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.
Fragment regions
Region | Description |
---|---|
Header | Acts as an optional |
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 | Allows 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 type | Description |
---|---|
VIEW_TYPE_USER_MESSAGE_ME (0) | A text message sent by the current user. If the message fails to send, tap the message again to re-send it. Also, the failed message can be deleted by pressing and holding the message. Successfully sent messages can also be copied, edited, and deleted with a long press. |
VIEW_TYPE_USER_MESSAGE_OTHER (1) | A text message sent by other users. The message can be copied with a long press. |
VIEW_TYPE_FILE_MESSAGE_ME (2) | A file message sent by the current user. If the message fails to send, tap the message again to re-send it. Also, the failed message can be deleted by pressing and holding the message. Successfully sent file messages will open in a new window when tapped, and can be deleted or saved with a long press. |
VIEW_TYPE_FILE_MESSAGE_OTHER (3) | A file message sent by other users. The file message will open in a new window when tapped, and the attached file can be saved with a long press. |
VIEW_TYPE_FILE_MESSAGE_IMAGE_ME (4) | An image message sent by the current user. If the message fails to send, tap the message again to re-send it. Also, the failed message can be deleted by pressing and holding the message. Images can be previewed through the |
VIEW_TYPE_FILE_MESSAGE_IMAGE_OTHER (5) | A file message sent by other users. The file can be previewed through the |
VIEW_TYPE_FILE_MESSAGE_VIDEO_ME (6) | A video message sent by the current user. If the message fails to send, tap the message again to re-send it. Also, the failed message can be deleted by pressing and holding the message. Successfully sent video messages will play in a new window when tapped, and can be deleted and saved with a long press. |
VIEW_TYPE_FILE_MESSAGE_VIDEO_OTHER (7) | A video message sent by other users. The video will play in a new window when tapped, and saved with a long press. |
VIEW_TYPE_ADMIN_MESSAGE (8) | A message sent by the admin. 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 allow you to customize the OpenChannelFragment
fragment. Before building, the OpenChannelFragment
’s settings can be configured using the builder’s setters as shown below:
List of setter methods
Setter method | Description |
---|---|
setCustomOpenChannelFragment() | Applies |
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-side button of the header is used. (Default: true) |
setUseHeaderRightButton() | Determines whether the right-side button of the header is used. (Default: true) |
setHeaderLeftButtonIconResId() | Specifies the icon of the left-side button of the header. (Default: icon_arrow_left) |
setHeaderLeftButtonIcon() | Specifies the icon and the tint on the left-side button of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200) |
setHeaderRightButtonIconResId() | Specifies the icon of the right-side button of the header. (Default: icon_members (participants), icon_info (operators)) |
setHeaderRightButtonIcon() | Specifies the icon and the tint on the right-side 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-side button of the input box. (Default: icon_add) |
setInputLeftButtonIcon() | Specifies the icon and the tint on the left-side button of the input box. (Default: icon_add, light mode : primary_300, dark mode : primary_200) |
setInputRightButtonIconResId() | Specifies the icon of the right-side button of the input box. (Default: icon_send) |
setInputRightButtonIcon() | Specifies the icon and the tint on the right-side button of the input box. (Default: icon_send, light mode : primary_300, dark mode : primary_200) |
setInputHint() | Specifies a placeholder for the text input field. (Default: Enter message) |
setHeaderLeftButtonListener() | Specifies the action of the listener for the left-side button of the header. (Default: finish the current activity) |
setHeaderRightButtonListener() | Specifies the action of the listener for the right-side button of the header. (Default: start the ParticipantsListActivity (participants), start the OpenChannelSettingsActivity (operators)) |
setOpenChannelMessageListAdapter() | Specifies the message list adapter. (Default: UIKit's OpenChannelMessageListAdapter) |
setListItemClickListener() | Specifies the action of the click listener for a message list item. (Default: action differs by message type) |
setListItemLongClickListener() | 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 listener for the left-side button of the input box. (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 |
setUseMessageGroupUI() | Determines whether the message grouping is used in the UI. (Default: true) |
| (Deprecated. Use |
setUseUserProfile() | Determines whether to show the user profile dialog. (Default: true) |
useOverlayMode() | Determines whether to set overlay style. |
setKeyboardDisplayType() | Specifies the keyboard display type for 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 has changed. (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 implement, 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.
Customize the fragment methods
You can customize the methods in the OpenChannelFragment
class as follows:
- Create a new fragment which inherits
OpenChannelFragment
as a subclass. - Override the methods in the fragment. The following table lists the methods that you can use.
- Apply the customized fragment by using the
OpenChannelFragment.Builder().setCustomOpenChannelFragment()
method.
List of methods
Method | Description |
---|---|
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 FileMessageParams parameter. |
sendUserMessage() | Sends a user message with |
sendFileMessage() | Sends a file message with |
updateUserMessage() | Updates a user message that was already sent in the channel. |
deleteMessage() | Delete any type of message. |
resendMessage() | Re-sends 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 tapped on the screen of a mobile device. Through the listeners, the BaseMessage
object is passed as an argument to a parameter, which includes the message type of the tapped message. Different click listeners can be added based on the message type.
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.
- Create a
CustomOpenChannelMessageListAdapter
class by inheriting theOpenChannelMessageListAdapter
class and implement the custom adapter.
- Create a
CustomOpenChannelMessageListAdapter
class by inheriting theMessageViewHolder
class and implement a customViewHolder
class.
- Apply the custom adapter to the fragment.
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 ares/values/styles_dark.xml
file and then add.Dark
to the UIKit-defined style names.
List of attributes of Widget.SendBird.RecyclerView.Message
Attribute | Resource type | Description |
---|---|---|
sb_pager_recycler_view_use_divide_line | boolean | Determines whether to use line dividers between messages. |
sb_message_recyclerview_background | drawable/color | The background image or color of the entire message list. |
sb_message_recyclerview_tooltip_background | drawable/color | The shape or color of the banner that notifies users when a new message arrives. |
sb_message_recyclerview_tooltip_textappearance | text appearance | The size, color, font, and style of text in the banner when a new message arrives. |
List of attributes of Widget.SendBird.OpenChannel.Message
Attribute | Resource type | Description |
---|---|---|
sb_message_time_text_appearance | text appearance | The size, color, font, and style of the text indicating the time a message was sent. |
sb_message_sender_name_text_appearance | text appearance | The size, color, font, and style of the text indicating a user's nickname. |
sb_message_operator_name_text_appearance | text appearance | The size, color, font, and style of the text indicating an operator. |
List of attributes of Widget.SendBird.OpenChannel.Message.User
Attribute | Resource type | Description |
---|---|---|
sb_message_time_text_appearance | text appearance | The size, color, font, and style of text of the timestamp. |
sb_message_sender_name_text_appearance | text appearance | The size, color, font, and style of text for the message sender's name. |
sb_message_operator_name_text_appearance | text appearance | The size, color, font, and style of text for the operator name. |
sb_message_background | drawable/color | The shape and color of message bubbles containing text messages. |
sb_message_text_appearance | text appearance | The size, color, font, and style of text messages. |
sb_message_ogtag_background | drawable/color | The shape and color of the open graph. |
sb_message_ogtag_title_appearance | text appearance | The size, color, font, and style of text for the open graph title. |
sb_message_ogtag_description_appearance | text appearance | The size, color, font, and style of text for the open graph description. |
sb_message_ogtag_url_appearance | text appearance | The size, color, font, and style of text for the open graph URL. |
sb_message_link_text_color | color | The color of text shown as a link. |
sb_message_edited_mark_text_appearance | text appearance | The size, color, font, and style of text for the edited marker. |
List of attributes of Widget.SendBird.OpenChannel.Message.File
Attribute | Resource type | Description |
---|---|---|
sb_message_text_appearance | text appearance | The size, color, font, and style of text in file messages. |
sb_message_background | drawable/color | The shape and color of message bubbles containing file messages. |
List of attributes of Widget.SendBird.OpenChannel.Message.Admin
Attribute | Resource type | Description |
---|---|---|
sb_admin_message_text_appearance | text appearance | The size, color, font, and style of text in messages sent by admins. |
sb_admin_message_background | drawable/color | The shape or color of message bubbles containing messages sent by admins. |
List of attributes of Widget.SendBird.Timeline
Attribute | Resource type | Description |
---|---|---|
sb_message_timeline_text_appearance | text appearance | The size, color, font, and style of text in message timeline. |
sb_message_timeline_background | drawable/color | The background image or color of the message timeline. |
To apply the declared custom styles, pass the unique URL of the channel and the R.style.Custom
to the OpenChannelFragment.Builder
constructor as shown below:
List channel participants
A participant 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 activity to the ParticipantsListActivity
along with the unique URL of the channel as shown below:
If you want to customize the participant list activity, use CustomParticipantsListActivity
as shown below:
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
.
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.
Method | Return type | Description |
---|---|---|
createParticipantsListFragment() | ParticipantsListFragment | Called when the |
Build the fragment
The ParticipantsListFragment
class allows you to customize the UI of the participant list view. As shown below, the fragment class is composed of two regions: the header and participant list.
Fragment regions
Region | Description |
---|---|
Header | Acts as an optional |
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 allow you to customize the ParticipantsListFragment
fragment. Before building, the ParticipantsListFragment
’s settings can be configured using the builder’s setters as shown below:
List of setter methods
Setter method | Description |
---|---|
setCustomParticipantsListFragment() | Applies |
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-side button of the header is used. (Default: true) |
setHeaderLeftButtonIconResId() | Specifies the icon of the left-side button of the header. (Default: icon_arrow_left) |
setHeaderLeftButtonIcon() | Specifies the icon and the tint for the button on the left side of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200) |
setHeaderLeftButtonListener() | Specifies the action of the listener for the left-side 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, light mode : onlight_03, dark mode : ondark_03) |
setEmptyText() | Specifies the text when 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) |
| (Deprecated. Use |
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.
Customize the participant list
A participant list can be customized by creating CustomParticipantsListAdapter
class that inherits the UserTypeListAdapter
and BaseViewHolder<User>
classes provided by UIKit, implementing the adapter, and then applying it in the fragment.
- Create a
CustomParticipantsListAdapter
class by inheriting theUserTypeListAdapter
class and implement the custom adapter.
- Create a
CustomParticipantViewHolder
class by inheriting theBaseViewHolder<User>
class and implement a customViewHolder
class.
- Apply the custom adapter to the fragment.
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 ares/values/styles_dark.xml
file and then add.Dark
at the end of each UIKit-defined style name.
List of attributes of Widget.SendBird.MemberPreview
Attribute | Resource type | Description |
---|---|---|
android:background | drawable/color | The user item background. |
sb_user_preview_nickname_appearance | text appearance | The size, color, font, and style of text for the participant nickname. |
sb_member_preview_description_appearance | text appearance | The size, color, font, and style of text for the description of a 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 shown below:
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 an activity to the OpenChannelSettingsActivity
by using the unique URL of the channel as shown below:
If you want to customize the channel settings activity, use the CustomOpenChannelSettingsActivity
as shown below:
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.
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.
Method | Return type | Description |
---|---|---|
createOpenChannelSettingsFragment() | OpenChannelSettingsFragment | Called when the |
Build the fragment
The OpenChannelSettingsFragment
class allows 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.
Fragment regions
Region | Description |
---|---|
Header | Acts as an optional |
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
Settings | Description |
---|---|
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 participant list view of the |
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 shown below:
List of setter methods
Setter method | Description |
---|---|
setCustomOpenChannelSettingsFragment() | Applies |
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-side button of the header is used. (Default: true) |
setUseHeaderRightButton() | Determines whether the right-side button of the header is used. (Default: true) |
setHeaderLeftButtonIconResId() | Specifies the icon of the button on the left side of the header. (Default: icon_arrow_left) |
setHeaderLeftButtonIcon() | Specifies the icon and the tint for the button that's on the left side of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200) |
setHeaderLeftButtonListener() | Specifies the action of listener for the left-side 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:
- Create a new fragment which inherits
OpenChannelSettingsFragment
as a subclass. - Override the methods in the fragment. The following table lists the methods you can use.
- Apply the customized fragment by using the
OpenChannelSettingsFragment.Builder().setCustomOpenChannelSettingsFragment()
method.
List of methods
Method | Description |
---|---|
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 |
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 ares/values/styles_dark.xml
file and then add.Dark
to the UIKit-defined style names.
List of attributes of Widget.SendBird.OpenChannel.ChannelSettings
Attribute | Resource type | Description |
---|---|---|
sb_channel_settings_background | drawable/color | The background color of the channel settings. |
sb_channel_settings_item_background | drawable/color | The shape or color of the items in the channel settings. |
sb_channel_settings_name_appearance | text appearance | The size, color, font, and style of the text that represents the channel name. |
sb_channel_settings_item_appearance | text appearance | The size, color, font, and style of the text that represents the items in the channel settings. |
sb_channel_settings_description_appearance | text appearance | The text size, color, font, and style of the item descriptions in the channel settings. |
sb_channel_information_title_appearance | text appearance | The text size, color, font, and style of the title in the channel information. |
sb_channel_information_content_appearance | text appearance | The text size, color, font, and style of the content in 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 shown below: