Common resources
Customizing strings, icons, and style resources is straightforward: Simply overwrite the resources files by changing the UIKit-defined style values in them. The xml
elements and tables below show the supported sets of components you can customize.
Note: Do not change the names of the UIKit-defined items and parents when customizing.
Available
This is a list of Available
methods that allows you to check if your Sendbird application supports a specific feature.
Method | Description |
---|---|
isSupportSuper() | Determines whether Supergroup channels will be supported for this application. |
isSupportReaction() | Determines whether reactions will be supported for this application. |
isSupportOgTag() | Determines whether the display of OG tags will be supported for this application. |
StringSet
String customization is identical to style customization: change the UIKit-defined style values in the res/strings.xml
file which consists of the following xml
elements.
IconSet
Listed below are all the icons used in UIKit for Android. Icons can be changed by overwriting the res/drawable
files with the same name.
Icon name | Image | Description |
---|---|---|
icon_add | Used to select files to send | |
icon_arrow_left | Go to the backstack | |
icon_ban | The icon of ban | |
icon_camera | An icon of camera | |
icon_chat | An icon of channel | |
icon_chevron_down | An icon of expanding view | |
icon_chevron_right | An icon of going to the next step | |
icon_close | An icon of close current page | |
icon_copy | An icon of copy | |
icon_create | An icon of creating a new channel | |
icon_delete | An icon of deleting something | |
icon_document | An icon of files of document type | |
icon_done_all | A delivered message | |
icon_done | A sent message | |
icon_download | An icon of download | |
icon_edit | An icon of editing | |
icon_emoji_more | An icon of adding another emoji | |
icon_error | An icon of error state | |
icon_file_audio | An icon of message of audio type | |
icon_file_document | An icon of message of document type | |
icon_freeze | An icon of frozen channel | |
icon_gif | An icon of | |
icon_info | An icon of channel's information | |
icon_leave | An icon of leaving the channel | |
icon_members | An icon of channel members | |
icon_message | An icon of chatting | |
icon_moderations | An icon of channel moderation | |
icon_more | An icon of displaying someting more | |
icon_mute | An icon of mute state | |
icon_notifications_off_filled | An icon of notification of off state | |
icon_notifications | An icon of notification of on state | |
icon_operator | An icon of operator of the channel | |
icon_photo | An icon of photo library | |
icon_play | An icon of | |
icon_plus | An icon of adding something | |
icon_question | An icon to display unknown state | |
icon_refresh | An icon of refreshing | |
icon_remove | An icon of removing something | |
icon_reply | An icon used to indicate Reply | |
icon_reply_filled | An icon indicating that a user replied to another user's message | |
icon_search | An icon of searching messages | |
icon_send | An icon of sending message | |
icon_spinner | An icon of loading state | |
icon_supergroup | An icon of the channel of supergroup type | |
icon_thumbnail_none | An icon that failed to load image | |
icon_user | An icon of user profile |
StyleSet
The StyleSet is a collection of styles applied to UIKit items by default.
Note : To apply our
Dark
theme, create ares/values/styles_dark.xml
file and then add.Dark
to the UIKit-defined style names. As for an open channel, you can use theoverlay_mode
style. Just like changing to theDark
theme, you can apply theoverlay_mode
style by creating ares/values/styles_overlay.xml
file and then adding.Overlay
to the UIKit-defind style names.
Header
The header acts as an optional ActionBar
used in every style.
List of attributes of Widget.SendBird.AppBar
Attribute | Resource type | Description |
---|---|---|
android:background | drawable/color | The background of the header. |
sb_appbar_title_appearance | text appearance | The text size, color, font, and style of the header title. |
sb_appbar_description_appearance | text appearance | The text size, color, font, and style of the header description. The header description is used to show the typing indicator and the time of when a user has last seen. |
sb_appbar_button_tint | color | The color of the buttons. |
sb_appbar_divider_color | color | The color of the line divider located at the bottom. |
sb_appbar_left_button_text_appearance | text appearance | The text size, color, font, and style of the left button. |
sb_appbar_left_button_text_color | color | The text color of the left button. |
sb_appbar_left_button_tint | color | The color of the left button. |
sb_appbar_left_button_background | drawable/color | The background of the left button. |
sb_appbar_right_button_text_appearance | text appearance | The text size, color, font, and style of the right button. |
sb_appbar_right_button_text_color | color | The text color of the right button. |
sb_appbar_right_button_tint | color | The color of the right button. |
sb_appbar_right_button_background | drawable/color | The background of the right button. |
RecyclerView
RecyclerView
is used to show the channel list, user list, and message list.
List of attributes of Widget.SendBird.RecyclerView
Attribute | Resource type | Description |
---|---|---|
android:background | drawable/color | The background of the |
sb_pager_recycler_view_use_divide_line | boolean | Determines whether to use line dividers between messages. |
sb_pager_recycler_view_divide_line_color | color | The color of the line divider. |
sb_pager_recycler_view_divide_line_height | size | The height of the line divider. |
sb_pager_recycler_view_divide_margin_left | size | The width of the empty space to the left of the line divider. |
sb_pager_recycler_view_divide_margin_right | size | The width of the empty space to the right of the line divider. |
Dialog
UIKit provides dialog through the SendBirdDialogFragment
. This dialog includes a list type, an edit text type, a content view type, up to three buttons, and more. The following table lists the dialog styles that appear in UIKit.
Dialog styles
Resource type | Attribute |
---|---|
List | |
Confirm | |
Warning | |
Edit text | |
List bottom | |
Anchor |
Note: The
Anchor
doesn't use theSendBirdDialogFragment
.
List of attributes of Widget.SendBird.DialogView
Attribute | Resource type | Description |
---|---|---|
sb_dialog_view_background | drawable/color | The background of the dialog. |
sb_dialog_view_background_bottom | drawable | The background of the bottom dialog. |
sb_dialog_view_title_appearance | text appearance | The text size, color, font, and style of the title. |
sb_dialog_view_message_appearance | text appearance | The text size, color, font, and style of the message. |
sb_dialog_view_list_item_appearance | text apperance | The text size, color, font, and style of the items in the list. |
sb_dialog_view_list_item_background | drawable/color | The background of the items in the list. |
sb_dialog_view_edit_text_appearance | text apperance | The text size, color, font, and style of the edit text. |
sb_dialog_view_edit_text_tint | color | The color of the bottom of the edit text. |
sb_dialog_view_edit_text_cursor_drawable | drawable | The drawable of the cursor of the edit text. |
sb_dialog_view_edit_text_hint_color | color | The color of the edit text hint. |
sb_dialog_view_icon_tint | color | The color of the icons. |
sb_dialog_view_positive_button_text_appearance | text appearance | The text size, color, font, and style of the positive button. |
sb_dialog_view_positive_button_text_color | color | The text color of the positive button. |
sb_dialog_view_positive_button_background | drawable/color | The background of the positive button. |
sb_dialog_view_negative_button_text_appearance | text appearance | The text size, color, font, and style of the negative button. |
sb_dialog_view_negative_button_text_color | color | The text color of the negative button. |
sb_dialog_view_negative_button_background | drawable/color | The background of the negative button. |
sb_dialog_view_neutral_button_text_appearance | text appearance | The text size, color, font, and style of the neutral button. |
sb_dialog_view_neutral_button_text_color | color | The text color of the neutral button. |
sb_dialog_view_neutral_button_background | drawable/color | The background of the neutral button. |
StatusFrame
StatusFrame
displays the current state when data is loading and data loading failed.
List of attributes of Widget.SendBird.StatusFrame
Attribute | Resource type | Description |
---|---|---|
sb_status_frame_background | drawable/color | The background of the status frame. |
sb_status_frame_text_appearance | text appearance | The text size, color, font, and style of the text on the status frame. |
sb_status_frame_icon_tint | color | The color of the icons. |
sb_status_frame_action_text_appearance | text appearance | The text size, color, font, and style of the action. |
sb_status_frame_action_background | drawable/color | The background of the action. |
Toast
A toast message is a message that shows up and disappears on its own after a few seconds.
List of attributes of Widget.SendBird.ToastView
Attribute | Resource type | Description |
---|---|---|
sb_toast_background | drawable/color | The background of the toast message. |
sb_toast_text_appearance | text appearance | The text size, color, font, and style of the toast message. |
Emoji
List of attributes of Widget.SendBird.Emoji
Attribute | Resource type | Description |
---|---|---|
sb_emoji_background | drawable/color | The background color of emoji reactions in the Emoji reaction box |
sb_emoji_more_button_src | drawable | The image of the Add reaction button on the Emoji reaction bar |
sb_emoji_more_button_src_tint | drawable/color | The color of the More button for emojis. |
sb_emoji_reaction_background | drawable/color | The background color of an emoji reaction in the Emoji reaction box |
sb_emoji_reaction_text_appearance | text appearance | The text size, color, font, and style of the emoji reaction count in the Emoji reaction box |
sb_emoji_reaction_more_button_src | drawable | The image of the Add reaction button in the Emoji reaction box |
sb_emoji_reaction_more_button_src_tint | drawable/color | The color of the More button for emoji reaction. |
sb_emoji_reaction_count_tab_layout_background | drawable/color | The background color of the emoji reaction tabs in the Reacted user list |
sb_emoji_reaction_count_tab_indicator_color | color | The color of the underline for a selected emoji reaction tab in the Reacted user list |
sb_emoji_reaction_user_nickname_appearance | text appearance | The text size, color, font, and style of the user nickname in the Reacted user list |
sb_emoji_failed_src | drawable/color | The image to be displayed when the emoji loads fail. |
sb_emoji_failed_src_tint | drawable/color | The color of the failed icon. |
SelectChannelTypeView
If your application is supporting a Supergroup channel, this style will be used when you create a channel.
List of attributes of Widget.SendBird.SelectChannelTypeView
Attribute | Resource type | Description |
---|---|---|
android:background | drawable/color | The background of component. |
sb_select_channel_type_menu_background | drawable | The background of each menu item. |
sb_select_channel_type_menu_title_appearance | text appearance | The text size, color, font, and style of the menu title. |
sb_select_channel_type_menu_name_appearance | text appearance | The text size, color, font, and style of the menu name. |
sb_select_channel_type_menu_icon_tint | color | The color of the icons. |
A SingleMenuItemView is used at the Moderations Fragment.
Attribute | Resource type | Description |
---|---|---|
sb_menu_item_background | drawable/color | The background of the menu. |
sb_menu_item_name_appearance | text appearance | The text size, color, font, and style of the item name. |
sb_menu_item_icon_tint | color | The color of the icons. |
UserProfile
A UserProfile is the user information that appears when clicking user profile.
List of attributes of Widget.SendBird.UserProfile
Attribute | Resource type | Description |
---|---|---|
sb_user_profile_background | drawable/color | The background of the user profile. |
sb_user_profile_user_name_text_appearance | text appearance | The text size, color, font, and style of the user name. |
sb_user_profile_button_background | drawable/color | The background of the button. |
sb_user_profile_button_text_appearance | text appearance | The text size, color, font, and style of the button. |
sb_user_profile_divider_color | color | The color of the divider. |
sb_user_profile_information_title_text_appearance | text appearance | The text size, color, font, and style of the information title. |
sb_user_profile_information_text_appearance | text appearance | The text size, color, font, and style of the information. |