Android
Ui Kit Key Functions

Key Functions

This page explains key functions of Sendbird UIKit for Android consisting of how to list channels, chat in a channel, configure channel settings, create a channel, invite users, and list channel members.


List channels

A channel list is the complete list of group channels that the current user is a member of. The channel list is displayed once a connection with Sendbird server is established, and can be easily managed without complex implementation because the ChannelListActivity or ChannelListFragment class handles core features such as channel pagination and real-time updates.

Start an activity

Use the intent to move to the ChannelListActivity as follows:

Light Color Skin
Copy
Intent intent = ChannelListActivity.newIntent(context);
startActivity(intent);

If push notifications are implemented, users may access your app from the ChannelListActivity. In this case, the channelUrl parameter must be added when creating intent in order to redirect to ChannelActivity.

Light Color Skin
Copy
Intent intent = ChannelListActivity.newRedirectToChannelIntent(context, channelUrl);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
PendingIntent pendingIntent = PendingIntent.getActivity(context, 0 /* Request code */, intent, PendingIntent.FLAG_UPDATE_CURRENT);

// TODO: Implement notifications

Create a fragment

The UIKit’s ChannelListFragment 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 list view isn’t visible when using the ChannelListFragment.

Light Color Skin
Copy
public class ChannelListActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_channel_list);

        ChannelListFragment Fragment = new ChannelListFragment.Builder().build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

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

ChannelListFragment

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the title, and two buttons on the left and right, which are all customizable. If the left button is clicked, the finish() method of the activity will be called to close the current activity. If the right button is clicked, the user will be taken to the CreateChannelActivity.

Channel list

Displays the channel's cover image, channel name, number of channel members, number of unread messages, last message sent as well as whether the channel is muted. If a channel is clicked, the user will be taken to the corresponding ChannelActivity. If a long click event occurs, a dialog will pop up asking if the user wants to leave the channel or change the channel’s push notification settings. Both are fully customizable.

Set the fragment.builder()

The ChannelListFragment.Builder class provides APIs that enable you to create a customized ChannelListFragment. Before building, the ChannelListFragment’s settings can be customized using the builder’s setters. The following is an example of how to build the ChannelFragment:

Light Color Skin
Copy
ChannelListFragment Fragment = new ChannelListFragment.Builder()
    .setUseHeader(true)
    .setHeaderTitle("Channels")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_create)
    .setIsIncludeEmpty(false)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setHeaderRightButtonListener(rightButtonListener)
    .setChannelListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .build();
Setter methodDescription

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: Channels)

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 on the left button of the header. (Default: icon_arrow_left)

setHeaderRightButtonIconResId()

Specifies the icon on the right button of the header. (Default: icon_create)

setIsIncludeEmpty()

Determines whether to include empty channels when retrieving the channel list. Empty channels are channels that have been created but contain no sent messages. (Default: false)

setHeaderLeftButtonListener()

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

setHeaderRightButtonListener()

Specifies the action of the click listener on the right button of the header. (Default: start the CreateChannelActivity)

setChannelListAdapter()

Specifies the channel list adapter. (Default: UIKit's ChannelListAdapter)

setItemClickListener()

Specifies the action of the click listener on an item of the channel list. (Default: start the ChannelActivity)

setItemLongClickListener()

Specifies the action of the long click listener on an item of the channel list. (Default: show a dialog for pushing on/off and leaving the channel)

Add a click listener to a channel list item

Click listeners can be added to channel list items to perform specific actions when clicked. Through the listeners, the GroupChannel instance is passed as a parameter, which includes the channel information of the clicked channel. Based on this information, click listeners can be added to perform specific actions.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<GroupChannel>() {
    @Override
    public void onItemClick(View view, int position, GroupChannel data) {
        // TODO: set onClick
    }
}).setItemLongClickListener(new OnItemLongClickListener<GroupChannel>() {
    @Override
    public void onItemLongClick(View view, int position, GroupChannel data) {
        // TODO: set onClick
    }
);

Customize the channel list

A customized channel list can be created by inheriting the ChannelListAdapter and BaseViewHolder<GroupChannel> provided by the UIKit, implementing the adapter, and applying it to the fragment.

  1. Create a CustomChannelListAdapter class by inheriting the ChannelListAdapter class and implement a custom adapter as follows:
Light Color Skin
Copy
public class CustomChannelListAdapter extends ChannelListAdapter {
    @NonNull
    @Override
    public BaseViewHolder<GroupChannel> onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // TODO: Create a custom ViewHolder and return it.
        // Create a custom ViewHolder or call the super.onCreateViewHolder() if you want to use the default ViewHolder.
        return new CREATE_YOUR_CUSTOM_VIEWHOLDER();
    }

    @Override
    public void onBindViewHolder(@NonNull BaseViewHolder<GroupChannel> holder, int position) {
        // When you call the super, the listener implemented through Builder is attached. 
        // A custom listener can be implemented instead of calling the super.
        super.onBindViewHolder(holder, position);
        // TODO: Bind the custom ViewHolder
    }
}
  1. Create a CustomChannelViewHloder class by inheriting the BaseViewHolder<GroupChannel> class and implement a custom ViewHolder class as follows:
Light Color Skin
Copy
public class CustomChannelViewHolder extends BaseViewHolder<GroupChannel> {
    public CustomChannelViewHolder(@NonNull View itemView) {
        super(itemView);
    }

    @Override
    public void bind(GroupChannel item) {
        // TODO: Bind the data to the ViewHolder
    }
}
  1. Apply the custom adapter to the fragment.
Light Color Skin
Copy
builder.setChannelListAdapter(new CustomChannelListAdapter());

Customize the style of the channel list

To customize the style of channel list items, change the UIKit-defined style values in the res/values/styles.xml file. The table below shows the style of channel list items you can customize. Do not change the names of the UIKit-defined items and parents.

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_preview_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.SendBird.ChannelPreview">
    <item name="android:background"></item>
    <item name="sb_channel_preview_title_appearance"></item>
    <item name="sb_channel_preview_member_count_appearance"></item>
    <item name="sb_channel_preview_updated_at_appearance"></item>
    <item name="sb_channel_preview_unread_count_appearance"></item>
    <item name="sb_channel_preview_last_message_appearance"></item>
</style>
Widget.SendBird.ChannelPreview
StyleTypeDescription

android:background

color/drawable

The channel item background.

sb_channel_preview_title_appearance

text appearance

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

sb_channel_preview_member_count_appearance

text appearance

The text size, color, font, and style of the number of users that have entered the channel.

sb_channel_preview_updated_at_appearance

text appearance

The text size, color, font, and style of the number indicating the time the channel was last updated at.

sb_channel_preview_unread_count_appearance

text appearance

The text size, color, font, and style, of the number indicating the number of unread messages.

sb_channel_preview_last_message_appearance

text appearance

The text size, color, font, and style of the last message sent in the channel.

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

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

Chat in a channel

A channel is a chat that allows close interaction among a limited number of users, and is displayed once a connection with Sendbird server is established. Channels can be easily managed without the need for complex implementation because the ChannelActivity or ChannelFragment uses the MessageListAdapter to display and update channel information, as well as handle core features such as pagination and real-time updates.

Plain text messages, media such as photos and videos, and files can be sent from UIKit. All messages in channels are cached using memory, and messages that fail to be sent are only kept within the active channel object.

Note : If the channel list has been implemented, additional implementation isn’t required for channels.

Start an activity

Use the intent to move to the ChannelActivity along with the channelUrl as follows:

Light Color Skin
Copy
Intent intent = ChannelActivity.newIntent(context, channelUrl);
startActivity(intent);

Create a fragment

The UIKit’s ChannelFragment 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 view isn’t visible when using the ChannelFragment.

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);

        ChannelFragment Fragment = new ChannelFragment.Builder(channelUrl).build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

The ChannelFragment 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.

ChannelFragment

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the channel cover image, channel name, which other users in the channel are currently typing a message, as well as two buttons on the left and right, which are all customizable. For 1-on-1 channels, the other user’s last seen time is also displayed. If the left button is clicked, the finish() method of the activity will be called to take the user to the channel list of the ChannelListActivity. If the right button is clicked, the user will be taken to the view of the ChannelSettingsActivity.

Message list

UIKit provides 10 different types of messages. See the table

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.

Enumerated message typeDescription

VIEW_TYPE_USER_MESSAGE_ME (0)

A text message sent by the current user. Failed messages can be resent when clicked, and deleted when long clicked. Successfully sent messages can be copied, edited and deleted when long clicked.

VIEW_TYPE_USER_MESSAGE_OTHER (1)

A text message sent by other users. The message can be copied when long clicked.

VIEW_TYPE_FILE_MESSAGE_ME (2)

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

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 when long clicked.

VIEW_TYPE_FILE_MESSAGE_IMAGE_ME (4)

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

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 when long clicked.

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 when long clicked.

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 when long clicked.

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 ChannelFragment.Builder class provides APIs that enable you to create a customized ChannelFragment fragment. The ChannelFragment’s settings can be customized using the builder’s setters before building. The following is an example of how to build the fragment:

Light Color Skin
Copy
ChannelFragment Fragment = new ChannelFragment.Builder(url)
    .setUseHeader(true)
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setUseLastSeenAt(true)
    .setUseTypingIndicator(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)
    .setMessageListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .setInputLeftButtonListener(inputLeftButtonListener)
    .build();
Setter methodDescription

setUserHeader()

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

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)

setUseLastSeenAt()

Determines whether the marker of last seen at is used. (Default: true)

setUseTypingIndicator()

Determines whether the typing indicator is used. (Default: true)

setHeaderLeftButtonIconResId()

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

setHeaderRightButtonIconResId()

Specifies the icon on the right button of the header. (Default: icon_info)

setInputLeftButtonIconResId()

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

setInputRightButtonIconResId()

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

setInputHint()

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

setHeaderLeftButtonListener()

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

setHeaderRightButtonListener()

Specifies the action of the click listener on the right button of the header. (Default: start the ChannelSettingsActivity)

setMessageListAdapter()

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

setItemClickListener()

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

setItemLongClickListener()

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

setInputLeftButtonListener()

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

Add a click listener to a channel item

Click listeners can be added to channel items to perform specific actions when clicked. Through the listeners, the BaseMessage object is passed as a parameter, which includes the message type of the clicked message. Based on this message type, click listeners can be added to perform specific actions.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<BaseMessage>() {
    @Override
    public void onItemClick(View view, int position, BaseMessage data) {
        MessageType type = MessageViewHolderFactory.getMessageType(message);
        // TODO: Add onClick
    }
}).setItemLongClickListener(new OnItemLongClickListener<BaseMessage>() {
    @Override
    public void onItemLongClick(View view, int position, BaseMessage data) {
        MessageType type = MessageViewHolderFactory.getMessageType(message);
        // TODO: Add onClick
    }
});

Customize the message list

A customized message list can be created by inheriting the MessageListAdapter and MessageViewHolder classes provided by the UIKit, implementing the adapter, and applying it to the fragment.

  1. Create a CustomMessageListAdapter class by inheriting the MessageListAdapter class and implement a custom adapter as follows;
Light Color Skin
Copy
public class CustomMessageListAdapter extends MessageListAdapter {
    public CustomMessageListAdapter(GroupChannel channel) {
        super(channel);
    }

    @NonNull
    @Override
    public MessageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // TODO: 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);
        // TODO: Bind the custom ViewHolder
    }

    @Override
    public int getItemViewType(int position) {
        BaseMessage message = getItem(position);
        // TODO: Create 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 CustomMessageViewHolder 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) {
        // TODO: Bind the data to the view holder
    }

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

Customize the style of the channel

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. Do not change the names of the UIKit-defined items and parents.

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_message_user_style">CustomUserMessage</item>
    <item name="sb_message_file_style">CustomFileMessage</item>
    <item name="sb_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.Message">
    <item name="sb_message_time_text_appearance"></item>
    <item name="sb_message_sender_name_text_appearance"></item>
</style>

<style name="CustomUserMessage" parent="Widget.SendBird.Message.User">
    <item name="sb_message_me_text_appearance"></item>
    <item name="sb_message_other_text_appearance"></item>
    <item name="sb_message_me_background"></item>
    <item name="sb_message_other_background"></item>
    <item name="sb_message_me_background_tint"></item>
    <item name="sb_message_other_background_tint"></item>
</style>

<style name="CustomFileMessage" parent="Widget.SendBird.Message.File">
    <item name="sb_message_me_text_appearance"></item>
    <item name="sb_message_other_text_appearance"></item>
    <item name="sb_message_me_background"></item>
    <item name="sb_message_other_background"></item>
    <item name="sb_message_me_background_tint"></item>
    <item name="sb_message_other_background_tint"></item>
</style>

<style name="CustomAdminMessage" parent="Widget.SendBird.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>
Widget.SendBird.RecyclerView.Message
StyleTypeDescription

sb_pager_recycler_view_use_divide_line

boolean

Determines whether to use line dividers between messages.

sb_message_recyclerview_background

color/drawable

The background of the entire message list.

sb_message_recyclerview_tooltip_background

color/drawable

The tooltip background that notifies you when new messages arrive.

sb_message_recyclerview_tooltip_textappearance

text appearance

The text size, color, font, and style in the tooltip when new messages arrive.

Widget.SendBird.Message
StyleTypeDescription

sb_message_time_text_appearance

text appearance

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

sb_message_sender_name_text_appearance

text appearance

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

Widget.SendBird.User
StyleTypeDescription

sb_message_me_text_appearance

text appearance

The text size, color, font, and style of text messages sent by the current user.

sb_message_other_text_appearance

text appearance

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

sb_message_me_background

color/drawable

The background of text messages sent by the current user.

sb_message_other_background

color/drawable

The background of text messages sent by other users.

sb_message_me_background_tint

Color

The background tint of text messages sent by the current user.

sb_message_other_background_tint

Color

The background tint of text messages sent by other users.

Widget.SendBird.File
StyleTypeDescription

sb_message_me_text_appearance

text appearance

The text size, color, font, and style of file messages sent by the current user.

sb_message_other_text_appearance

text appearance

The text size, color, font, and style of file messages sent by other users.

sb_message_me_background

color/drawable

The background of file messages sent by the current user.

sb_message_other_background

color/drawable

The background of file messages sent by other users.

sb_message_me_background_tint

Color

The background tint of file messages sent by the current user.

sb_message_other_background_tint

Color

The background tint of file messages sent by other users

Widget.SendBird.Admin
StyleTypeDescription

sb_admin_message_text_appearance

text appearance

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

sb_admin_message_background

color/drawable

The background of messages sent by administrators.

Widget.SendBird.Timeline
StyleTypeDescription

sb_message_timeline_text_appearance

text appearance

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

sb_message_timeline_background

color/drawable

The background of timeline messages.

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

Light Color Skin
Copy
new ChannelListFragment.Builder(channelUrl, R.style.Custom).build();

Configure channel settings

The ChannelSettingsActivity or ChannelSettingsFragment class enables customized settings to be configured to each channel. This class can be used to change the channel name, cover image, notification settings, or leave the channel. It can also be used to check the number of channel members or go to the MemberListActivity.

Start an activity

Use the intent to move to the ChannelSettingsActivity along with the channelUrl as follows:

Light Color Skin
Copy
Intent intent = ChannelSettingsActivity.newIntent(context, channelUrl);
startActivity(intent);

Create a fragment

The UIKit’s ChannelSettingsFragment class extends the Fragment and is designed to take up the whole screen of the activity. By default, the deader isn’t visible by default when using the ChannelSettingsFragment. When creating a ChannelSettingsFragment fragment, the channelUrl must be passed as an argument.

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);

        ChannelSettingsFragment Fragment = new ChannelSettingsFragment.Builder(channelUrl).build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

The ChannelSettingsFragment 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.

ChannelSettingsFragment

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the title and two buttons on the left and right, and only the left button’s icon and title can be customized. If the left button is clicked, the finish() method of the activity will be called to take the user to the channel of the ChannelActivity. 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 by default. Changes to the channel’s cover image and name can be made by clicking the edit button are reflected immediately, but loading the new cover image may take some time.

Settings

UIKit provides 3 settings. See the Settings that UIKit supports table below

Settings that UIKit supports
SettingDescription

Notifications

Configures whether push notifications are turned on or off for each channel. If turned off, push notifications for the channel you registered to Firebase will not be delivered.

Members

Takes a user to the member list view of the MemberListActivity to display the channel members. From there, users can go to the InviteChannelActivity to invite other users to the current channel.

Leave channel

Enables the user to leave the channel.

The ChannelSettingsFragment.Builder class provides APIs that enable you to create a ChannelSettingsFragment fragment with these kinds of content.

Set the fragment.builder()

The ChannelSettingsFragment.Builder class provides APIs that you can create a customized ChannelSettingsFragment fragment. Before building, the ChannelListFragment settings can be customized using the builder’s setters. The following is an example of how to build the fragment:

Light Color Skin
Copy
ChannelSettingsFragment Fragment = new ChannelSettingsFragment.Builder(url)
    .setUseHeader(true)
    .setHeaderTitle("Settings")
    .setUseHeaderLeftButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonListener(leftButtonListener)
    .build();
Setter methodDescription

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)

setHeaderLeftButtonIconResId()

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

setHeaderLeftButtonListener()

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

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. Do not change the names of the UIKit-defined items and parents.

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

Widget.SendBird.ChannelSettings
StyleTypeDescription

sb_channel_settings_background

color/drawable

The background of the channel settings.

sb_channel_settings_item_background

color/drawable

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.

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

Light Color Skin
Copy
new ChannelSettingsFragment.Builder(channelUrl, R.style.Custom).build();

Create a channel

New channels can be created in Sendbird UIKit through the CreateChannelActivity. Using the UserListAdapter class, users can be selected to create channels. Unless the user list has been customized, all users of your client app will be listed through pagination. By default, channel members’ nicknames and profile images are used to create the channel name and cover image. Once created, a channel is immediately moved to the ChannelActivity.

Start an activity

Use the intent to move to the CreateChannelActivity.

Light Color Skin
Copy
Intent intent = CreateChannelActivity.newIntent(context);
startActivity(intent);

Create a fragment

The UIKit’s CreateChannelFragment 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 create a channel view isn’t visible when using the CreateChannelFragment.

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_create_channel);

        CreateChannelFragment Fragment = new CreateChannelFragment.Builder().build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

The CreateChannelFragment class enables you to customize the UI of your channel view. As shown below, the fragment class is composed of two regions: the header and user list:

CreateChannelFragment

RegionDescription

Header

Acts as an optional ActionBar in the activity. By default, it displays the title and two buttons on the left and right, and only the left button’s icon and title can be customized. If the left button is clicked, the finish() method of the activity will be called. If the right button is clicked, the current user is taken to a channel that has invited the selected users. Channels composed of the same users can be duplicated because the isDistinct is set to false by default.

User list

Consists of each user’ profile image, nickname as well as a selectable checkbox. By default, all users registered to the Sendbird application are retrieved in reverse chronological order of creation. However, as previously mentioned, the user list can be customized to only include specific users.

Set the fragment.builder()

The CreateChannel.Builder class provides APIs that enable you to create a customized ChannelChannelFragment. Before building, the ChannelChannelFragment’s settings can be customized using the builder’s setters. The following is an example of how to build the CreateChannelFragment:

Light Color Skin
Copy
CreateChannelFragment Fragment = new CreateChannelFragment.Builder()
    .setUseHeader(true)
    .setHeaderTitle("New channel")
    .setUseHeaderLeftButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setIsDistinct(false)
    .setHeaderLeftButtonLisetner(leftButtonListener)
    .setUserListAdapter(adapter)
    .setCustomUserListQueryHandler(handler)
    .build();
Setter methodDescription

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: New channel)

setUseHeaderLeftButton()

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

setHeaderLeftButtonIconResId()

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

setIsDistinct()

Determines whether the distinct mode is applied. Distinct mode must be false if super mode is true. (Default: false)

setHeaderLeftButtonListener()

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

setUserListAdapter()

Specifies the user list adapter. (Default: UIKit's UserListAdapter)

setCustomUserListQueryHandler()

Specifies the handler that loads the list of users. (Default: query retrieving all users in the application)

Set the custom user list query handler

User information stored in your server can be imported to UIKit by setting the CustomUserListQuery using the builder’s setters as follows. To configure this, implement the steps 1 and 2 of the CustomUserListQueryHandler and then implement the following:

Light Color Skin
Copy
builder.setCustomUserListQueryHandler(handler);

Customize the user list

The user list can be customized by inheriting the UserListAdapter and BaseViewHolder<UserInfo> classes provided by UIKit, implementing the adapter, and applying it in the fragment.

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

    @Override
    public void onBindViewHolder(@NonNull BaseViewHolder<UserInfo> 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);
        // TODO: Bind the custom view holder
    }
}
  1. Create a CustomUserIvewHolder class by inheriting the BaseViewHolder<UserInfo> class and implement a custom ViewHolder class.
Light Color Skin
Copy
public class CustomUserViewHolder extends BaseViewHolder<UserInfo> {
    public CustomUserViewHolder(@NonNull View itemView) {
        super(itemView);
    }

    @Override
    public void bind(UserInfo item) {
        // TODO: bind the data to the view holder
    }
}
  1. Apply the custom adapter to the fragment.
Light Color Skin
Copy
builder.setUserListAdapter(new CustomUserListAdapter());

Customize the style of user items

To customize the style of user items, change the UIKit-defined style values in the res/values/styles.xml file. The table below shows the style of user items you can customize. Do not change the names of the UIKit-defined items and parents.

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_user_preview_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.SendBird.UserPreview">
    <item name="android:background"></item>
    <item name="sb_user_preview_nickname_appearance"></item>
</style>
Widget.SendBird.UserPreview
StyleTypeDescription

android:background

color/drawable

The user item background.

sb_user_preview_nickname_appearance

text appearance

Size, color, font, and style of the user nickname.

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

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

Invite users

Users can be invited to a group channel through the InviteChannelActivity or InviteChannelFragment using the UserListAdapter class. By default, all users are listed through pagination, but members that already belong to the channel are disabled and greyed out. As previously mentioned, the user list can be customized to only include specific users.

Start an activity

Use the intent to move to the InviteChannelActivity along with the channelUrl as follows:

Light Color Skin
Copy
Intent intent = InviteChannelActivity.newIntent(context, channelUrl);
startActivity(intent);

Create a fragment

The UIKit’s InviteChannelFragment 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 user-generated activity. By default, the header of the invite users view isn’t visible when using the InviteChannelFragment.

Light Color Skin
Copy
public class InviteChannelActivity extends AppCompatActivity {
    ...
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_invite_channel);

        InviteChannelFragment Fragment = new InviteChannelFragment.Builder(channelUrl).build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

The InviteChannelFragment class enables you to customize the UI of your channel view. As shown below, the fragment class is composed of two regions: the header and user list.

InviteUserFragment

RegionDescription

Header

Structurally, this is the same as the CreateChannelFragment header, except that clicking the right button invites the selected users to the channel.

User list

Structurally, this is the same as the CreateChannelFragment user list, except that members already belonging to the channel are disabled. In other words, they cannot be selected or deselected.

Set the fragment.builder()

The InviteChannel.Builder class provides APIs that enable you to create a customized InviteChannelFragment fragment. Before building, the InviteChannelFragment’s settings can be customized using the builder’s setters. The following is an example of how to build the fragment:

Light Color Skin
Copy
InviteChannelFragment Fragment = new InviteChannelFragment.Builder(channelUrl)
    .setUseHeader(true)
    .setHeaderTitle("Invite")
    .setUseHeaderLeftButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonLisetner(leftButtonListener)
    .setUserListAdapter(adapter)
    .setCustomUserListQueryHandler(handler)
    .build();
Setter methodDescription

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: Invite users)

setUseHeaderLeftButton()

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

setHeaderLeftButtonIconResId()

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

setHeaderLeftButtonListener()

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

setUserListAdapter()

Specifies the user list adapter. (Default: UIKit's UserListAdapter)

setCustomUserListQueryHandler()

Specifies the handler that loads the list of users. (Default: query retrieving all users in the application)

Set the custom user list query handler

Refer to the Create a channel section.

Customize the user list

Refer to the Create a channel section.

Custom the style of channel items

Refer to the Create a channel section.


List channel members

A member list is the complete list of users that are members of a specific group channel. The MemberListActivity or MemberListFragment class uses the UserListAdapter class to display members who belong to a specific channel.

Start an activity

Use the intent to move to the MemberListActivity along with the channelUrl as follows:

Light Color Skin
Copy
Intent intent = MemberListActivity.newIntent(context, channelUrl);
startActivity(intent);

Create a fragment

The UIKit’s MemberListFragment 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 member list view isn’t visible when using the MemberListFragment.

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_member_list);

        MemberListFragment Fragment = new MemberListFragment.Builder(channelUrl).build();

        // TODO: Put the Fragment in the view.
    }
}

Build the fragment

The MemberListFragment class enables you to customize the UI of your member list view. As shown below, the fragment class is composed of two regions: the header and user list.

MemberListFragment

RegionDescription

Header

Structurally, this is the same as the CreateChannelFragment header, except the right button is customizable.

User list

Structurally, this is the same as the CreateChannelFragment user list, except the click events are all customizable.

Set the fragment.builder()

The MemberListFragment.Builder class provides APIs that enable you to create a customized MemberListFragment fragment. Before building, the MemberListFragment’s settings can be customized using the builder’s setters. The following is an example of how to build the fragment:

Light Color Skin
Copy
MemberListFragment Fragment = new MemberListFragment.Builder(channelUrl)
    .setUseHeader(true)
    .setHeaderTitle("Members")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_plus)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setHeaderRightButtonListener(rightButtonListener)
    .setUserListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .build();
Setter methodDescription

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: Members)

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 on the left button of the header. (Default: icon_arrow_left)

setHeaderRightButtonIconResId()

Specifies the icon on the right button of the header. (Default: icon_plus)

setHeaderLeftButtonListener()

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

setHeaderRightButtonListener()

Specifies the action of the click listener on the right button of the header. (Default: start the InviteChannelActivity)

setChannelListAdapter()

Specifies the channel list adapter. (Default: UIKitChannelListAdapter)

setItemClickListener()

Specifies the action of the click listener on an item of the channel list. (Default: none)

setItemLongClickListener()

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

Add a click listener to member items

Click listeners can be added to member items to perform specific actions when clicked. Through the listeners, the UserInfo object is passed as a parameter, which can be used to retrieve member information. Based on this, click listeners can be added to perform specific actions.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<UserInfo>() {
    @Override
    public void onItemClick(View view, int position, UserInfo data) {
        // TODO: set onClick
    }
}).setItemLongClickListener(new OnItemLongClickListener<UserInfo>() {
    @Override
    public void onItemLongClick(View view, int position, UserInfo data) {
        // TODO: set onClick
    }
});

Customize the user list

Refer to the Create a channel section.

Customize the style of member items

Refer to the Create a channel section.