Home
/
UIKit
/
Android

Group channel

This page explains the key funcitons of group channels in Sendbird UIKit for Android.

Group channels are a chat that allows close interactions among a limited number of users. In order to join this type of channel, an invitation from a channel member is required by default. See Channel types to learn more about how group channels work.

In UIKit for Android, users can create a group channel, list group channels, invite other users to a group channel, chat in a group channel, configure the channel settings, moderate a group channel, list channel members, and react to a message.


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 from one acivity 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 client app from the ChannelListActivity. In this case, the unique URL of the channel must be passed as an argument to a parameter when creating an intent in order to redirect to the ChannelActivity.

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

// Implement notifications.

If you want to customize the channel list activity, use CustomChannelListActivity as follows:

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

Create a fragment

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 = createChannelListFragment();

        // Put the fragment in the view.
    }

    protected ChannelListFragment createChannelListFragment() {
        return new ChannelListFragment.Builder()
            .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

createChannelListFragment()

ChannelListFragment

Called when the ChannelListActiviy is created.

createRedirectChannelActivityIntent()

Intent

Called when it needs to redirect a user from a push notification to ChannelActivity.

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.

  • Channel list view

ChannelListFragment listing user's group channels in view.

  • Channel creation view

New channel view providing two types of channel to create: Group and Supergroup.

Fragment regions

RegionDescription

Header

Acts as an optional ActionBar in the channel list 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 can determine which channel type to create. After the user selects a channel type, the user will be taken to 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()
    .setCustomChannelListFragment(new CustomChannelListFragment())
    .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)
    .setGroupChannelListQuery(query)
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText("No channels")
    .build();

List of setter methods

Setter methodDescription

setCustomChannelListFragment()

Applies CustomChannelListFragment to ChannelListFragment. By inheritance, CustomChannelListFragment should be a subclass of ChannelListFragment.

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)

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

setHeaderRightButtonIcon()

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

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)

setGroupChannelListQuery()

Specifies the query instance to get a list of group channels that the current user has joined.

setEmptyIcon()

Specifies the icon to display when there aren't any channels. (Default: icon_chat)

setEmptyIcon()

Specifies the icon and the tint to display when there aren't any channels. (Default: icon_chat, light mode : onlight_03, dark mode : ondark_03)

setEmptyText()

Specifies the text to display when there aren't any channels. (Default: No channels)

setIsIncludeEmpty()

(Deprecated) 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)

Customize the fragment methods by inheritance

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

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

List of methods

MethodParametersDescription

onSelectedChannelType()

CreateableChannelType

Receives a callback when a channel type is selected.

leaveChannel()

GroupChannel

Invoked when a user leaves a 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 an argument to 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) {
        // Implement custom executions when the item is clicked.
    }
}).setItemLongClickListener(new OnItemLongClickListener<GroupChannel>() {
    @Override
    public void onItemLongClick(View view, int position, GroupChannel data) {
        // Implement custom executions when the item is long-clicked.
    }
);

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) {
        // 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);
        // 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) {
        // 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. 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_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>

List of attributes of Widget.SendBird.ChannelPreview

AttributeResource typeDescription

android:background

drawable/color

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 R.style.Custom to the ChannelListFragment.Builder constructor as follows:

Light Color Skin
Copy
new ChannelListFragment.Builder(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 from one acivity to the CreateChannelActivity.

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

If you want to use the CreateChannelActivity for a specific channel type, refer to the following sample code.

Note : The CreatableChannelType consists of Normal and Super types.

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

If you want to customize the channel creation activity, use CustomCreateChannelActivity as follows:

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

Create a fragment

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);

        if (getIntent().hasExtra(StringSet.KEY_SELECTED_CHANNEL_TYPE)) {
            this.channelType = (CreateableChannelType) getIntent().getSerializableExtra(StringSet.KEY_SELECTED_CHANNEL_TYPE);
        }

        CreateChannelFragment Fragment = new createCreateChannelFragment();

        // Put the Fragment in the view.
    }

    protected CreateChannelFragment createCreateChannelFragment(CreateableChannelType type) {
        return new CreateChannelFragment.Builder(type)
            .setUseHeader(true)
            .setHeaderTitle(getString(R.string.sb_text_header_create_channel))
            .setCreateButtonText(getString(R.string.sb_text_button_create))
            .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

createCreateChannelFragment()

CreateChannelFragment

Called when the CreateChannelActivity is created.

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 showing how to create a new group channel in view.

Fragment regions

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 CreateChannelFragment. Before building, the CreateChannelFragment’s settings can be customized using the builder’s setters. The channel type of a new channel can be determined in the SelectChannelTypeView layout of the ChannelListActivity. Refer to the following sample code to build the CreateChannelFragment.

Light Color Skin
Copy
CreateChannelFragment Fragment = new CreateChannelFragment.Builder(CHANNEL_TYPE)  // Normal, Super
    .setCustomCreateChannelFragment(new CustomCreateChannelFragment())
    .setUseHeader(true)
    .setHeaderTitle("New channel")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setIsDistinct(false)
    .setHeaderLeftButtonLisetner(leftButtonListener)
    .setUserListAdapter(adapter)
    .setCustomUserListQueryHandler(handler)
    .build();

List of setter methods

Setter methodDescription

Builder()

Displays the channel types you can create. (Defalut : normal)

setCustomCreateChannelFragment()

Applies CustomCreateChannelFragment to CreateChannelFragment. By inheritance, CustomCreateChannelFragment should be a subclass of CreateChannelFragment.

setCreateButtonText()

Specifies the text of the Create button in the header. (Default : SELECTED)

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)

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)

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)

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)

Customize the fragment methods by inheritance

If you would like to customize the CreateChannelFragment's methods below, do the following:

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

List of methods

MethodDescription

onBeforeCreateGroupChannel()

Called prior to creating a group channel. You can override this method and add the data you want to use to the given parameters.

onNewChannelCreated()

Called after a group channel has been created. Implement this method when you need to redirect to another activity.

createGroupChannel()

Creates a group channel with GroupChannelParams.

setCreateButtonText()

Sets the text of the Create button.

setCreateButtonEnabled()

Determines whether to enable the Create button or not.

Set the custom user list query handler

In general, users and user relationships are defined in your repository or server. To customize your user list instead of retrieving the entire list from Sendbird server, CustomUserListQueryHandler should be implemented. Since the CustomUserListQueryHandler handles pagination as well, it should be explicitly implemented as follows. If not, all users registered in the application are listed.

  1. Implement the UserInfo class to a class that contains user information from either the local repository in a client app or your server.
Light Color Skin
Copy
class YOUR_USER implements UserInfo {
    private String YOUR_USER_ID;
    private String YOUR_USER_NICKNAME;
    private String YOUR_USER_PROFILE_URL;

    public SendBirdUser(String YOUR_USER_ID, String YOUR_USER_NICKNAME, String YOUR_USER_PROFILE_URL) {
        this.YOUR_USER_ID = YOUR_USER_ID;
        this.YOUR_USER_NICKNAME = YOUR_USER_NICKNAME;
        this.YOUR_USER_PROFILE_URL = YOUR_USER_PROFILE_URL;
    }

    @Override
    public String getUserId() {
        return this.YOUR_USER_ID;
    }

    @Override
    public String getNickname() {
        return this.YOUR_USER_NICKNAME;
    }

    @Override
    public String getProfileUrl() {
        return this.YOUR_USER_PROFILE_URL;
    }
}
  1. Implement the CustomUserListQueryHandler class.
Light Color Skin
Copy
CustomUserListQueryHandler handler = new CustomUserListQueryHandler() {

    // You can define your own variables. (ex. Limit, count, isError)
    @Override
    public void loadInitial(UserListResultHandler handler) {
        // You have to initialize your variables here.
        // Implement the first query.
        // You can carry the model implemented UserInfo.
        handler.onResult(userInfos, null);
    }

    @Override
    public void loadNext(UserListResultHandler handler) {
        // Implement the query.
        // You can carry the model implemented UserInfo.
        handler.onResult(userInfos, null);
    }

    @Override
    public boolean hasMore() {
        // True if a user list will be loaded, false otherwise.
        return YOUR_COUNT < YOUR_USER_LIST_SIZE;
    }
};

List of methods

MethodDescription

loadInitial()

Initializes all variables and implements a query instance that retrieves the initial list of user information. This should be implemented in your client app or the query instance will not work as expected. Through the handler parameter, List<UserInfo> is returned. If successful, pass null as an argument to a parameter in the onResult() method. If not successful, pass an error object.

loadNext()

Implements the query instance to load user information after the loadInitial() method is called. This doesn’t need to be implemented if all data is queried at once without pagination. Through the handler parameter, List<UserInfo> is returned if the query instance is set to the handler. If successful, pass null as an argument to a parameter in the onResult() method. If not successful or the scroll reaches the bottom, call this loadNext() method again.

hasMore()

Checks if there is more user information. Returns true if there is more user information. Returns false if there is no more user information.

  1. Set the handler through the fragment as below:
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) {
        // Create the custom view holder and return it.
        // Create your custom viewholder or you can the call the 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);
        // 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) {
        // 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. 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_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>

List of attributes of Widget.SendBird.UserPreview

AttributeResource typeDescription

android:background

drawable/color

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();

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 from one acivity to the ChannelActivity using the unique URL of the channel as follows:

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

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

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

Create a fragment

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(CHANNEL_URL).build();

        // Put the Fragment in the view.
    }

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

Note : To use 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.

Overridable method

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

MethodReturn typeDescription

createChannelFragment()

ChannelFragment

Called when the ChannelActiviy is created.

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 sending a message in chat view.

Fragment regions

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 ten different types of messages. Refer to the table below. If the message grouping is in use for your UI, the message list displays grouped messages based on the use who sent them and the time those messages were sent. Each message group is divided 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.

Enumerated message types

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 customize the 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(CHANNEL_URL)
    .setCustomChannelFragment(new CustomChannelFragment())
    .setUseHeader(true)
    .setHeaderTitle(channelName)
    .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)
    .showInputRightButtonAlways()
    .setInputLeftButtonListener(inputLeftButtonListener)
    .setMessageListParams(params)
    .setEmojiReactionClickListener(emojiReactionClickListener)
    .setEmojiReactionLongClickListener(emojiReactionLongClickListener)
    .setEmojiReactionMoreButtonClickListener(emojiReactionMoreButtonClickListener)
    .setUseMessageGroupUI(true)
    .setOnProfileClickListener(profileClickListener)
    .setUseUserProfile(true)
    .setKeyboardDisplayType(keyboardDisplayType)
    .setLoadingDialogHandler(loadingDialogHandler)
    .setEmptyIcon(R.drawable.icon_message)
    .setEmptyText("No messages")
    .setOnEditModeTextChangedListener(null)
    .setInputText(null)
    .setOnInputTextChangedListener(null)
    .setHightlightMessageInfo(null)
    .setStartingPoint(Long.MAX_VALUE)
    .build();

List of setter methods

Setter methodDescription

setCustomChannelFragment()

Applies CustomChannelFragment to ChannelFragment. By inheritance, CustomChannelFragment should be a subclass of ChannelFragment.

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 name)

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 when a user has last seen 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)

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

setHeaderRightButtonIcon()

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

setInputLeftButtonIconResId()

Specifies the icon on 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 on 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 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)

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 on 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.

setEmojiReactionClickListener()

Specifies the action of the click listener on an emoji reaction in the Emoji reaction box. (Default: adding or removing the emoji reaction count)

setEmojiReactionLongClickListener()

Specifies the action of the long click listener on an emoji reaction in the Emoji reaction box. (Default: displaying the reacted user list of the emoji reaction)

setEmojiReactionMoreButtonClickListener()

Specifies the action of the click listener on the Add reaction button. (Default: displaying the Emoji list)

setUseMessageGroupUI()

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

setOnProfileClickListener()

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

setUseUserProfile()

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

setKeyboardDisplayType()

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

setLoadingDialogHandler()

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

setEmptyIcon()

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

setEmptyIcon()

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

setEmptyText()

Specifies the text to display 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)

setHightlightMessageInfo()

Specifies the message to highlight. (Default: null)

setStartingPoint()

Specifies the timestamp to load the messages with. (Default: Long.MAX_VALUE)

Customize the fragment methods by inheritance

If you would like to customize the ChannelFragment's methods below, do the following:

  1. Create a new fragment which inherits ChannelFragment 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 ChannelFragment.Builder().setCustomChannelFragment() method.

List of methods

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 parameter.

sendUserMessage()

Sends a user message with UserMessageParams.

sendFileMessage()

Sends a file message with FileMessageParams.

updateUserMessage()

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

deleteMessage()

Delete any type of message.

resendMessage()

Resends a failed message.

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed. In ChannelFragment, it will be called when the fragment is created.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear. In ChannelFragment, it will be called when the message list is retreived.

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 an argument to 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);
        // Add custom implementation for an onItemClick event.
    }
}).setItemLongClickListener(new OnItemLongClickListener<BaseMessage>() {
    @Override
    public void onItemLongClick(View view, int position, BaseMessage data) {
        MessageType type = MessageViewHolderFactory.getMessageType(message);
        // Add custom implementation for an onItemLongClick event.
    }
});

Customize the message list

A customized message list can be created by inheriting the MessageListAdapter and MessageViewHolder classes provided by 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) {
        // Create the custom ViewHolder and return it.
        // Create your custom ViewHolder or call the 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 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) {
        // Bind the data to the view holder.
    }

    @Override
    public View getClickableView() {
        // 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. 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_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>

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

List of attributes of 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 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.

List of attributes of Widget.SendBird.Message

AttributeResource typeDescription

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.

List of attributes of Widget.SendBird.User

AttributeResource typeDescription

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

drawable/color

The background of text messages sent by the current user.

sb_message_other_background

drawable/color

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.

List of attributes of Widget.SendBird.File

AttributeResource typeDescription

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

drawable/color

The background of file messages sent by the current user.

sb_message_other_background

drawable/color

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

List of attributes of Widget.SendBird.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.

List of attributes of 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 ChannelFragment.Builder constructor as follows:

Light Color Skin
Copy
new ChannelFragment.Builder(CHANNEL_URL, 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.

Note : The PromoteOperatorFragment has the same behavior as the InviteChannelFragment. However, the InviteChannelFragment is to invites users, while the PromoteOperatorFragment basically lists the members of the channel who can be promoted as an operator.

Start an activity

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

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

If you want to customize the activity, use CustomInviteChannelActivity as follows:

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

Create a fragment

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 createInviteChannelFragment(CHANNEL_URL);

        // Put the Fragment in the view.
    }

    protected InviteChannelFragment createInviteChannelFragment(@NonNull String channelUrl) {
        return new InviteChannelFragment.Builder(channelUrl)
            .setUseHeader(true)
            .setHeaderTitle(getString(R.string.sb_text_header_invite_member))
            .setInviteButtonText(getString(R.string.sb_text_button_invite))
            .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

createInviteChannelFragment()

InviteChannelFragment

Called when the InviteChannelActivity is created.

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.

InviteChannelFragment, which let you list users to invite to a group channel in view.

Fragment regions

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(CHANNEL_URL)
    .setCustomInviteChannelFragment(new CustomInviteChannelFragment())
    .setInviteButtonText("Invite")
    .setHeaderTitle("Invite users")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonLisetner(leftButtonListener)
    .setUserListAdapter(adapter)
    .setCustomUserListQueryHandler(handler)
    .build();

List of setter methods

Setter methodDescription

setCustomInviteChannelFragment()

Applies CustomInviteChannelFragment to InviteChannelFragment. By inheritance, CustomInviteChannelFragment should be a subclass of InviteChannelFragment.

setInviteButtonText()

Specifies the text of the Create button in the header.(Default: SELECTED)

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)

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)

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

Customize the fragment's methods by inheritance

If you would like to customize the InviteChannelFragment's methods below, do the following:

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

List of methods

MethodDescription

onBeforeInviteUsers()

Called prior to inviting users. You can override this method and add users to the given parameters.

onNewUserInvited()

Called after users has been invited. Implement this method when you need to redirect to another activity.

inviteUser()

Invites users with id of user.

setInviteButtonText()

Sets the text of the Invite button.

setInviteButtonEnabled()

Determines whether to enable the Invite button or not.

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.

Note : The OperatorListFragment, MutedMemberListFragment, and BannedListFragment have the same behavior as the MemberListFragment. The difference among them is that the OperatorListFragment and BannedListFragment use User objects while the MutedListFragment use Member objects. For further distinction, refer to the comparison table between User and Member.

Start an activity

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

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

If you want to customize the member list activity, use CustomMemberListActivity as follows:

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

Create a fragment

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 = createMemberListFragment(CHANNEL_URL);

        // Put the Fragment in the view.
    }

    protected MemberListFragment createMemberListFragment(@NonNull String channelUrl) {
        return new MemberListFragment.Builder(channelUrl)
            .setUseHeader(true)
            .setUseHeaderRightButton(true)
            .setHeaderTitle(getString(R.string.sb_text_header_member_list))
            .setEmptyIcon(R.drawable.icon_chat)
            .setEmptyText(R.string.sb_text_user_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

createMemberListFragment()

MemberListFragment

Called when the MemberListActivity is created.

Build the fragment

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

MemberListFragment listing the operators and regular users of a group channel in view.

Fragment regions

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(CHANNEL_URL)
    .setCustomMemberListFragment(new CustomMemberFragment())
    .setUseHeader(true)
    .setHeaderTitle("Members")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_plus)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setHeaderRightButtonListener(rightButtonListener)
    .setMemberListAdapter(adapter)
    .setItemClickListener(itemClickListener)
    .setItemLongClickListener(itemLongClickListener)
    .setOnProfileClickListener(profileClickListener)
    .setUseUserProfile(true)
    .setLoadingDialogHandler(loadingDialogHandler)
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText("No users")
    .build();

List of setter methods

Setter methodDescription

setCustomMemberListFragment()

Applies CustomMemberListFragment to MemberListFragment. By inheritance, CustomMemberListFragment should be a subclass of MemberListFragment.

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)

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

setHeaderRightButtonIcon()

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

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)

setMemberListAdapter()

Specifies the member list adapter. (Default: UIKit's MemberListAdapter)

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)

setOnProfileClickListener()

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

setUseUserProfile()

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

setLoadingDialogHandler()

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

setEmptyIcon()

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

setEmptyIcon()

Specifies the icon and the tint to display when there aren't any members in the channel. (Default: icon_chat, light mode : onlight_03, dark mode : ondark_03)

setEmptyText()

Specifies the text to display when there aren't any members in the channel. (Default: No users)

Customize the fragment's methods by inheritance

If you would like to customize the MemberListFragment's methods below, do the following:

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

List of methods

MethodDescription

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear.

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 Member object is passed as an argument to 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<Member>() {
    @Override
    public void onItemClick(View view, int position, UserInfo data) {
        // Add custom implementation for an onItemClick event.
    }
}).setItemLongClickListener(new OnItemLongClickListener<Member>() {
    @Override
    public void onItemLongClick(View view, int position, UserInfo data) {
        // Add custom implementation for an onItemLongClick event.
    }
});

Customize the user list

Refer to the Create a channel section.

Customize the style of member items

To customize the style of member items, change the UIKit-defined style values in the res/values/styles.xml file. 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 the 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>

List of attributes of 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 member nickname.

sb_member_preview_description_appearance

text appearance

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

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 MemberListFragment.Builder as follows:

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

Moderate channels and members through an operator

Using UIKit, you can moderate channels and members through the ModerationActivity class. Through the class and its moderation menu, you can get the list of operators, muted members, and banned members of a channel and change the freeze state of it. In order to use this feature, a channel must have at least one operator.

Note : By default, the channel moderation menu is activated and displayed in the channel settings view for operators only.

Start the ModerationActivity

Use the intent to move from one acivity to the ModerationActivity class.

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

If you want customize the moderation activity, use CustomModerationActivity as follows:

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

Create a fragment

UIKit’s ModerationFragment 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 ModerationFragment. When creating ModerationFragment, the unique URL of the channel must be passed as an argument.

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

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

        ModerationFragment Fragment = createModerationFragment(url);

        // Put the Fragment in the view.
    }

    protected ModerationFragment createModerationFragment(@NonNull String channelUrl) {
        return new ModerationFragment.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

createModerationFragment()

ModerationFragment

Called when the ModerationActivity is created.

Build the fragment

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

ModerationFragment listing menus for moderation in view.

Fragment regions

RegionDescription

Header

An optional ActionBar. 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.

Moderation menu

A list of moderation items including Operator list, Muted members, Banned members, and Freeze channel.

Set the fragment.builder()

The ModerationFragment.Builder class provides APIs that enable you to create and customize a ModerationFragment fragment. Before building, the ModerationFragment settings can be customized with the builder’s setters as follows:

Light Color Skin
Copy
ModerationFragment Fragment = new ModerationFragment.Builder(CHANNEL_URL)
    .setCustomModerationFragment(new CustomModerationFragment())
    .setUseHeader(true)
    .setHeaderTitle("Moderations")
    .setUseHeaderLeftButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setOnMenuItemClickListener(menuItemClickListener)
    .setLoadingDialogHandler(loadingDialogHandler)
    .build();

List of setter methods

Setter methodDescription

setCustomModerationFragment()

Applies CustomModerationFragment to ModerationFragment. CustomModerationFragment should inherit and become a subclass of ModerationFragment.

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

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)

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

setOnMenuItemClickListener()

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

setLoadingDialogHandler()

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

Customize the fragment's methods by inheritance

If you would like to customize the ModerationFragment's methods below, do the following:

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

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear.

Customize the style of menu items

To customize the style of the moderation menu 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. You need to keep the original names of the items and parents defined by the UIKit during the process.

Note : To apply the 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_single_menu_item_style">@style/custom</item>
</style>
<style name="custom" parent="Widget.SendBird.SingleMenuItemView">
    <item name="sb_menu_item_background"></item>
    <item name="sb_menu_item_name_appearance"></item>
    <item name="sb_menu_item_icon_tint"></item>
</style>

List of attributes of Widget.SendBird.SingleMenuItemView

AttributeResource typeDescription

sb_menu_item_background

drawable/color

The menu item background.

sb_menu_item_name_appearance

text appearance

The text size, color, font, and style of the menu item names.

sb_menu_item_icon_tint

color

The color of the menu item icons.

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

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

Search messages

In UIKit, you can search for messages within the ChannelActivity through a Search in Channel menu in the channel settings of the ChannelSettingsActivity. This will present a MessageSearchActivity or MessageSearchFragment, which handles message search and displays the search results. Clicking one of the search results takes you to a new instance of ChannelActivity which features the message selected from the search results, with the keyword highlighted.

Start an activity

Use the intent to move from one acivity to the MessageSearchActivity. Use the unique URL of the channel in which message search will be carried out as follows:

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

If you want to customize the message search activity, use CustomMessageSearchActivity as follows:

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

Create a fragment

UIKit’s MessageSearchFragment class extends the Fragment and is designed to take up the whole screen of the activity. When creating a MessageSearchFragment fragment, the unique URL of the channel must be passed as an argument.

Light Color Skin
Copy
public class MessageSearchActivity extends AppCompatActivity {
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sb_activity);
        MessageSearchFragment Fragment = createMessageSearchFragment(url);
        // Put the Fragment in the view.
    }

    protected MessageSearchFragment createMessageSearchFragment(@NonNull String channelUrl) {
        return new MessageSearchFragment.Builder(channelUrl)
            .setUseSearchBar(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

createMessageSearchFragment()

MessageSearchFragment

Called when the MessageSearchActivity is created.

Build the fragment

The MessageSearchFragment class enables you to customize the message search view UI. As shown in the image below, the fragment class is composed of two regions: search bar and search result.

Searching messages with a keyword "Let" in the channel.

Fragment regions

RegionDescription

Search bar

Displays the search input box and the button on the right. When the right button is clicked, message search is carried out with the keyword in the search input box. The MessageSearchActivity is called to take the user to the channel of the ChannelActivity.

Search result

Displays the sender's profile image, sender name, the time the message was sent, and the message content. If one of the search results is clicked, a new ChannelActivity starts by setting the setHightlightMessageInfo() with the keword and the setStartingPoint() with the time the selected message was sent.

Set the fragment.builder()

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

Light Color Skin
Copy
MessageSearchFragment fragment = new MessageSearchFragment.Builder(CHANNEL_URL)
    .setCustomMessageSearchFragment(new CustomMessageSearchFragment())
    .setUseSearchBar(true)
    .setSearchBarButtonText("Search")
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText("No results found")
    .setOnSearchEventListener(null)
    .setMessageSearchAdapter(messageSearchAdapter)
    .setItemClickListener(clickListener)
    .setLoadingDialogHandler(loadingDialogHandler)
    .build();

List of setter methods

Setter methodDescription

setCustomMessageSearchFragment()

Applies the CustomMessageSearchFragment to the MessageSearchFragment. By inheritance, the CustomMessageSearchFragment should be a subclass of the MessageSearchFragment.

setUseSearchBar()

Determines whether the search bar is used. (Default: true)

setSearchBarButtonText()

Specifies the text of the right button of the search bar. (Default: Search)

setEmptyIcon()

Specifies the icon to display when there aren't search results matching with the keyword. (Default: icon_chat)

setEmptyIcon()

Specifies the icon and the tint to display when there aren't search results matching with the keyword. (Default: icon_chat, light mode : onlight_03, dark mode : ondark_03)

setEmptyText()

Specifies the text to display when there aren't search results matching with the keyword. (Default: No results found)

setOnSearchEventListener()

Specifies the search action event listener on the right button of the search bar. (Default: null)

setMessageSearchAdapter()

Specifies the message search result adapter. (Default: UIKit's MessageSearchAdapter)

setItemClickListener()

Specifies the action of the click listener on an item in the search results. (Default: start the ChannelActivity)

setLoadingDialogHandler()

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

Customize the fragment methods by inheritance

If you would like to customize the MessageSearchFragment's methods below, do the following:

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

List of methods

MethodDescription

search()

Called when the search request is made with a keyword.

onSearchResultReceived()

Called when the search results exist.

onItemClicked()

Called when a message item in the search results has been clicked.

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear.

Add a click listener to search result items

Click listeners can be added to search result items to perform specific actions when clicked. Through the listeners, the BaseMessage object is passed as an argument, which includes the message type of the clicked message.

Light Color Skin
Copy
builder.setItemClickListener(new OnItemClickListener<BaseMessage>() {
    @Override
    public void onItemClick(View view, int position, BaseMessage data) {
        // Add custom implementation for an onItemClick event.
    }
});

Customize the search results

Message search result can be customized through an adapter that inherits the MessageSearchAdapter and BaseViewHolder<BaseMessage>. Once the new adapter is implemented, apply it to the fragment.

  1. Create a CustomMessageSearchAdapter class by inheriting the MessageSearchAdapter class and implement a custom adapter as follows:
Light Color Skin
Copy
public class CustomMessageSearchAdapter extends MessageSearchAdapter {
    @NonNull
    @Override
    public BaseViewHolder<BaseMessage> onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 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<BaseMessage> 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);
        // Bind the custom ViewHolder.
    }
}
  1. Create a CustomSearchResultViewHolder class by inheriting the BaseViewHolder<BaseMessage> class and implement a custom ViewHolder class as follows:
Light Color Skin
Copy
public class CustomSearchResultViewHolder extends BaseViewHolder<BaseMessage> {
    public CustomSearchResultViewHolder(@NonNull View itemView) {
        super(itemView);
    }

    @Override
    public void bind(BaseMessage item) {
        // Bind the data to the ViewHolder.
    }
}
  1. Apply the custom adapter to the fragment.
Light Color Skin
Copy
builder.setMessageSearchAdapter(new CustomMessageSearchAdapter());

To customize the style of message search, change the UIKit-defined style values in the res/values/styles.xml file. The table below shows the style of message search 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_search_bar_style">CustomSearchBar</item>
    <item name="sb_message_preview_style">CustomMessagePreview</item>
</style>

<style name="CustomSearchBar" parent="Widget.SendBird.SearchBar">
    <item name="sb_search_bar_background"></item>
    <item name="sb_search_divider_color"></item>
    <item name="sb_search_bar_text_input_background"></item>
    <item name="sb_search_bar_text_appearance"></item>
    <item name="sb_search_bar_hint_text"></item>
    <item name="sb_search_bar_hint_text_color"></item>
    <item name="sb_search_bar_clear_icon"></item>
    <item name="sb_search_bar_clear_icon_tint_color"></item>
    <item name="sb_search_bar_search_text"></item>
    <item name="sb_search_bar_search_text_appearance"></item>
    <item name="sb_search_bar_search_text_color"></item>
    <item name="sb_search_bar_search_text_background"></item>
    <item name="sb_search_bar_cursor_drawable"></item>
    <item name="sb_search_bar_search_icon"></item>
    <item name="sb_search_bar_search_icon_tint_color"></item>
</style>

<style name="CustomMessagePreview" parent="Widget.SendBird.MessagePreview">
    <item name="sb_message_preview_background"></item>
    <item name="sb_message_preview_username_text_appearance"></item>
    <item name="sb_message_preview_message_text_appearance"></item>
    <item name="sb_message_preview_sent_at_text_appearance"></item>
    <item name="sb_message_preview_divider_color"></item>
    <item name="sb_message_preview_message_metaphor_background_color"></item>
    <item name="sb_message_preview_message_metaphor_icon_tint_color"></item>
</style>
AttributeResource typeDescription

sb_search_bar_background

drawable/color

The background of the search bar.

sb_search_divider_color

color

The color of the search result divider.

sb_search_bar_text_input_background

drawable/color

The text input background of the search bar.

sb_search_bar_text_appearance

text appearance

The text size, color, font, and style of the search bar.

sb_search_bar_hint_text

text appearance

The text size, color, font, and style of the search bar text input hint.

sb_search_bar_hint_text_color

color

The color of the search bar text input hint.

sb_search_bar_clear_icon

drawable/color

The icon of the search bar clear button.

sb_search_bar_clear_icon_tint_color

color

The tint color of the search bar clear button.

sb_search_bar_search_text

string

The text of the search button.

sb_search_bar_search_text_appearance

text appearance

The text size, color, font, and style of the search button.

sb_search_bar_search_text_color

color

The text color of the search button.

sb_search_bar_search_text_background

drawable/color

The background of the search button.

sb_search_bar_cursor_drawable

drawable/color

The drawable of the search text input cursor.

sb_search_bar_search_icon

drawable/color

The icon of the search text input.

sb_search_bar_search_icon_tint_color

color

The tint color of the search search text input icon.

List of attributes of Widget.SendBird.MessagePreview

AttributeResource typeDescription

sb_message_preview_background

drawable/color

The background of the message preview.

sb_message_preview_username_text_appearance

text appearance

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

sb_message_preview_message_text_appearance

text appearance

The text size, color, font, and style of the message.

sb_message_preview_sent_at_text_appearance

text appearance

The text size, color, font, and style of the time the message sent.

sb_message_preview_divider_color

color

The color of the message preview divider.

sb_message_preview_message_metaphor_background_color

color

The background color of the message icon.

sb_message_preview_message_metaphor_icon_tint_color

color

The tint color of the message icon.

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

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

Configure the channel settings

The ChannelSettingsActivity or ChannelSettingsFragment class allows each channel to configure its own customized settings. This class can be used to change the channel name, cover image, and notification setting. It can also be used to check the number of channel members, go to the MemberListActivity, search messages with a keyword, go to the MessageSearchActivity, and leave the channel.

Note: If the channel has an operator, the moderation menu is activated.

Start an activity

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

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

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

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

Create a fragment

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 unique URL of the channel 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 = createChannelSettingsFragment(url);

        // Put the Fragment in the view.
    }

    protected ChannelSettingsFragment createChannelSettingsFragment(@NonNull String channelUrl) {
        return new ChannelSettingsFragment.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

createChannelSettingsFragment()

ChannelSettingsFragment

Called when the ChannelSettingsActivity is created.

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 listing menus for moderation in view.

Fragment regions

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

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.

Moderation

Lists the moderation menu that can update channel information.

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(CHANNEL_URL)
    .setCustomChannelSettingsFragment(new CustomChannelSettingsFragment())
    .setUseHeader(true)
    .setHeaderTitle("Settings")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setMemberSettingClickListener(clickListener)
    .setLoadingDialogHandler(loadingDialogHandler)
    .build();

List of setter methods

Setter methodDescription

setCustomChannelSettingsFragment()

Applies CustomChannelSettingsFragment to ChannelSettingsFragment. By inheritance, CustomChannelSettingsFragment should be a subclass of ChannelSettingsFragment.

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

setMemberSettingClickListener()

Specifies the action of click listener on the setting for listing channel members. (Default: start the MemberListActivity)

setOnSettingMenuClickListener()

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

setLoadingDialogHandler()

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

setMemberSettingClickListener()

(Deprecated. Use setOnMenuItemClickListener() instead.)
Specifies the action of click listener on the setting for listing channel members. (Default: start the MemberListActivity)

Customize the fragment methods by inheritance

If you would like to customize the ChannelSettingsFragment's methods below, do the following:

  1. Create a new fragment which inherits ChannelSettingsFragment 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 ChannelSettingsFragment.Builder().setCustomChannelSettingsFragment() method.

List of methods

MethodDescription

onBeforeUpdateGroupChannel()

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

updateGroupChannel()

Updates the group channel with GroupChannelParams.

shouldShowLoadingDialog()

Called when the loading dialog needs to be displayed.

shouldDismissLoadingDialog()

Called when the loading dialog needs to disappear.

leaveChannel()

Leaves the group channel.

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.

List of attributes of Widget.SendBird.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.

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

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