Android
UIKit Common Resources

Common Resources

Customizing strings, icons, and style resources is straightforward: Simply overwrite the resources files by changing the 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.


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.

Light Color Skin
Copy
<resources>
    <string name="app_name">uikit</string>

    <!-- Header Title -->
    <string name="sb_text_header_channel_list">Channels</string>
    <string name="sb_text_header_channel_settings">Channel information</string>
    <string name="sb_text_header_member_list">Members</string>
    <string name="sb_text_header_invite_member">Invite users</string>
    <string name="sb_text_header_create_channel">New channel</string>

    <!-- Channel List -->
    <string name="sb_text_channel_list_title_no_members">(No members)</string>
    <string name="sb_text_channel_list_title_unknown">(No name)</string>
    <string name="sb_text_channel_list_unread_count_max">99+</string>
    <string name="sb_text_channel_list_last_message_file">%1$s sent a file.</string>
    <string name="sb_text_channel_list_last_message_file_unknown">Unknown</string>
    <string name="sb_text_channel_list_push_on">Turn on notifications</string>
    <string name="sb_text_channel_list_push_off">Turn off notifications</string>
    <string name="sb_text_channel_list_leave">Leave channel</string>
    <string name="sb_text_channel_list_empty">No channels</string>

    <!-- Channel -->
    <string name="sb_text_channel_message_badge_edited">&#160;(edited)</string>
    <string name="sb_text_channel_tooltip">%d new message</string>
    <string name="sb_text_channel_tooltip_with_count">%d new messages</string>
    <string name="sb_text_channel_anchor_copy">Copy</string>
    <string name="sb_text_channel_anchor_save">Save</string>
    <string name="sb_text_channel_anchor_edit">Edit</string>
    <string name="sb_text_channel_anchor_delete">Delete</string>
    <string name="sb_text_channel_input_text_hint">Enter message</string>
    <string name="sb_text_channel_input_camera">Camera</string>
    <string name="sb_text_channel_input_gallery">Photo library</string>
    <string name="sb_text_channel_input_document">Files</string>
    <string name="sb_text_channel_typing_indicator_single">%s is typing&#8230;</string>
    <string name="sb_text_channel_typing_indicator_double">%s and %s are typing&#8230;</string>
    <string name="sb_text_channel_typing_indicator_multiple">Several people are typing&#8230;</string>
    <string name="sb_text_channel_last_seen_at">Last seen %s</string>
    <string name="sb_text_channel_unknown_type_text">(Unknown message type)\nCannot read this message.</string>
    <string name="sb_text_channel_reaction_count_max">99</string>

    <!-- Channel Settings -->
    <string name="sb_text_channel_settings_notification">Notifications</string>
    <string name="sb_text_channel_settings_members">%d Members</string>
    <string name="sb_text_channel_settings_leave_channel">Leave channel</string>
    <string name="sb_text_channel_settings_change_channel_name">Change name</string>
    <string name="sb_text_channel_settings_change_channel_name_hint">Enter name</string>
    <string name="sb_text_channel_settings_change_channel_image">Change channel image</string>
    <string name="sb_text_channel_settings_change_channel_image_camera">Take photo</string>
    <string name="sb_text_channel_settings_change_channel_image_gallery">Choose photo</string>

    <!-- User List -->
    <string name="sb_text_user_list_badge_me">&#160;(You)</string>
    <string name="sb_text_user_list_empty">No users</string>

    <!-- Views -->
    <string name="sb_text_yesterday">Yesterday</string>
    <string name="sb_text_permission_yes">Yes</string>
    <string name="sb_text_permission_no">No</string>
    <string name="sb_text_dialog_delete_file_message">Delete this file?</string>
    <string name="sb_text_dialog_delete_message">Delete this message?</string>
    <string name="sb_text_toast_success_push_on">Notifications turned on</string>
    <string name="sb_text_toast_success_push_off">Notifications turned off</string>
    <string name="sb_text_toast_success_copy">Copied</string>
    <string name="sb_text_toast_success_start_upload_file">Uploading&#8230;</string>
    <string name="sb_text_toast_success_start_download_file">Downloading&#8230;</string>
    <string name="sb_text_toast_success_download_file">File saved</string>
    <string name="sb_text_button_edit">Edit</string>
    <string name="sb_text_button_invite">Invite</string>
    <string name="sb_text_button_invite_with_count">%d Invite</string>
    <string name="sb_text_button_cancel">Cancel</string>
    <string name="sb_text_button_create">Create</string>
    <string name="sb_text_button_create_with_count">%d Create</string>
    <string name="sb_text_button_save">Save</string>
    <string name="sb_text_button_delete">Delete</string>
    <string name="sb_text_button_retry">Retry</string>

    <string name="sb_text_comma">,&#160;</string>

    <!-- Error Messages -->
    <!-- Connection Error -->
    <string name="sb_text_error_connect_server">Couldn\&#39;t connect to server.</string>
    <string name="sb_text_error_retry_request">Check your connection and try again.</string>

    <!-- Channel Error -->
    <string name="sb_text_error_get_channel_list">Couldn\&#39;t retrieve channel list.</string>
    <string name="sb_text_error_get_channel">Couldn\&#39;t retrieve channel.</string>
    <string name="sb_text_error_create_channel">Couldn\&#39;t create channel.</string>
    <string name="sb_text_error_update_channel">Couldn\&#39;t update channel.</string>
    <string name="sb_text_error_leave_channel">Couldn\&#39;t leave channel.</string>
    <string name="sb_text_error_push_notification_on">Couldn\&#39;t turn on notifications.</string>
    <string name="sb_text_error_push_notification_off">Couldn\&#39;t turn off notifications.</string>
    <string name="sb_text_error_invite_member">Couldn\&#39;t invite users.</string>
    <string name="sb_text_error_get_user_list">Couldn\&#39;t retrieve user list.</string>
    <string name="sb_text_error_add_reaction">Couldn\&#39;t add reaction.</string>
    <string name="sb_text_error_delete_reaction">Couldn\&#39;t delete reaction.</string>

    <!-- Message Error -->
    <string name="sb_text_error_resend_message">Couldn\&#39;t send message. Try again.</string>
    <string name="sb_text_error_update_user_message">Couldn\&#39;t edit message.</string>
    <string name="sb_text_error_delete_message">Couldn\&#39;t delete message.</string>
    <string name="sb_text_error_copy_message">Couldn\&#39;t copy message.</string>
    <string name="sb_text_error_send_message">Couldn\&#39;t send message. Try again.</string>

    <!-- File Error -->
    <string name="sb_text_error_open_camera">Couldn\&#39;t open camera.</string>
    <string name="sb_text_error_open_gallery">Couldn\&#39;t open photo library.</string>
    <string name="sb_text_error_open_file">Couldn\&#39;t open file.</string>
    <string name="sb_text_error_download_file">Couldn\&#39;t download file.</string>

    <string name="sb_text_error_unknown">Something went wrong.</string>

    <string name="sb_text_dialog_permission_title">Allow permission</string>
    <string name="sb_text_go_to_settings">Settings</string>
    <string name="sb_text_need_to_allow_permission_camera">%s\nneeds to access your camera to take photos and videos. Allow in Settings.</string>
    <string name="sb_text_need_to_allow_permission_storage">%s\nneeds to access your device storage to share photos, media, and files. Allow in Settings.</string>

    <string name="sb_text_channel_input_text_hint_frozen">Chat is unavailable in this channel</string>
</resources>

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 nameImageDescription

icon_add

icon_add

Add a file.

icon_arrow_left

icon_arrow_left

Finish an activity

icon_avatar_dark

icon_avatar_dark

The default profile image with the Dark theme

icon_avatar_light

icon_avatar_light

The default profile image with the Light theme

icon_camera

icon_camera

A camera app

icon_chat

icon_chat

No channels

icon_checkbox

icon_checkbox

An unchecked box

icon_checkbox_on

icon_checkbox_on

A checked box

icon_close

icon_close

Close the PhotoViewActivity

icon_copy

icon_copy

Copy a message

icon_create

icon_create

Create a channel

icon_delivered

icon_delivered

A delivered message

icon_document

icon_document

Files

icon_download

icon_download

Download

icon_edit

icon_edit

Edit a message

icon_error

icon_error

A StatusFrame error

icon_error_filled

icon_error_filled

A Toast error

icon_file_audio

icon_file_audio

An audio file

icon_file_document

icon_file_document

A document file

icon_gif

icon_gif

A GIF file

icon_info

icon_info

Channel information

icon_leave

icon_leave

Leave channel

icon_members

icon_members

Channel members

icon_mute

icon_mute

Mute notifications in a chanenl for the Light theme

icon_mute_dark

icon_mute_dark

Mute notifications in a channel for the Dark theme

icon_new_message

icon_new_message

A new message tooltip

icon_no_thumbnail_dark

icon_no_thumbnail_dark

The default thumbnail with the Dark theme for a video file

icon_no_thumbnail_light

icon_no_thumbnail_light

The default thumbnail with the Light theme for a video file

icon_notifications

icon_notifications

Notifications

icon_photo

icon_photo

Photo library

icon_play

icon_play

Play a video

icon_plus

icon_plus

Invite a member

icon_read

icon_read

Message read

icon_refresh

icon_refresh

Retry connection

icon_send

icon_send

Send a message

icon_sent

icon_sent

Message sent

icon_shevron_right

icon_shevron_right

Go to the MemberListActivity

icon_spinner

icon_spinner

Loading a message

icon_spinner_large

icon_spinner_large

Loading a screen

icon_success

icon_success

Success


StyleSet

The StyleSet is a collection of styles applied to UIKit items by default.

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

Header

The header acts as an optional ActionBar used in every style. Header

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

<style name="custom" parent="Widget.SendBird.AppBar">
    <item name="android:background"></item>
    <item name="sb_appbar_title_appearance"></item>
    <item name="sb_appbar_description_appearance"></item>
    <item name="sb_appbar_button_tint"></item>
    <item name="sb_appbar_divider_color"></item>
    <item name="sb_appbar_left_button_text_appearance"></item>
    <item name="sb_appbar_left_button_text_color"></item>
    <item name="sb_appbar_left_button_tint"></item>
    <item name="sb_appbar_left_button_background"></item>
    <item name="sb_appbar_right_button_text_appearance"></item>
    <item name="sb_appbar_right_button_text_color"></item>
    <item name="sb_appbar_right_button_tint"></item>
    <item name="sb_appbar_right_button_background"></item>
</style>
Widget.SendBird.AppBar
AttributeResource typeDescription

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 last seen at.

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.

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

<style name="custom" parent="Widget.SendBird.RecyclerView">
    <item name="android:background"></item>
    <item name="sb_pager_recycler_view_use_divide_line"></item>
    <item name="sb_pager_recycler_view_divide_line_color"></item>
    <item name="sb_pager_recycler_view_divide_line_height"></item>
    <item name="sb_pager_recycler_view_divide_margin_left"></item>
    <item name="sb_pager_recycler_view_divide_margin_right"></item>
</style>
Widget.SendBird.RecyclerView
AttributeResource typeDescription

android:background

drawable/color

The background of the RecyclerView.

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

Below are the dialog styles that appear in UIKit.

Resource typeAttribute

List

List dialog

Confirm

Confirm dialog

Warning

Warning dialog

Edit text

Edit text dialog

Bottom

Bottom dialog

Anchor

Anchor dialog

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

<style name="custom" parent="Widget.SendBird.DialogView">
    <item name="sb_dialog_view_background"></item>
    <item name="sb_dialog_view_background_bottom"></item>
    <item name="sb_dialog_view_background_anchor"></item>
    <item name="sb_dialog_view_title_appearance"></item>
    <item name="sb_dialog_view_message_appearance"></item>
    <item name="sb_dialog_view_list_item_appearance"></item>
    <item name="sb_dialog_view_list_item_background"></item>
    <item name="sb_dialog_view_edit_text_appearance"></item>
    <item name="sb_dialog_view_edit_text_tint"></item>
    <item name="sb_dialog_view_edit_text_cursor_drawable"></item>
    <item name="sb_dialog_view_edit_text_hint_color"></item>
    <item name="sb_dialog_view_icon_tint"></item>
    <item name="sb_dialog_view_left_button_text_appearance"></item>
    <item name="sb_dialog_view_left_button_text_color"></item>
    <item name="sb_dialog_view_left_button_background"></item>
    <item name="sb_dialog_view_right_button_text_appearance"></item>
    <item name="sb_dialog_view_right_button_text_color"></item>
    <item name="sb_dialog_view_right_button_background"></item>
    <item name="sb_dialog_view_alert_button_text_appearance"></item>
    <item name="sb_dialog_view_alert_button_text_color"></item>
    <item name="sb_dialog_view_alert_button_background"></item>
    <item name="sb_dialog_view_cancel_button_text_appearance"></item>
    <item name="sb_dialog_view_cancel_button_text_color"></item>
    <item name="sb_dialog_view_cancel_button_background"></item>
</style>
Widget.SendBird.DialogView
AttributeResource typeDescription

sb_dialog_view_background_bottom

drawable/color

The background of the bottom dialog.

sb_dialog_view_background_anchor

drawable/color

The background of the anchor 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_left_button_text_appearance

text appearance

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

sb_dialog_view_left_button_text_color

color

The text color of the left button.

sb_dialog_view_left_button_background

drawable/color

The background of the left button.

sb_dialog_view_right_button_text_appearance

text appearance

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

sb_dialog_view_right_button_text_color

color

The text color of the right button.

sb_dialog_view_right_button_background

drawable/color

The background of the right button.

sb_dialog_view_alert_button_text_appearance

text appearance

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

sb_dialog_view_alert_button_text_color

color

The text color of the alert button.

sb_dialog_view_alert_button_background

drawable/color

The background of the alert button.

sb_dialog_view_cancel_button_text_appearance

text appearance

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

sb_dialog_view_cancel_button_text_color

color

The text color of the cancel button.

sb_dialog_view_cancel_button_background

drawable/color

The background of the cancel button.

StatusFrame

StatusFrame displays the current state when data is loading and data loading failed.

Status frame

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

<style name="custom" parent="Widget.SendBird.StatusFrame">
    <item name="sb_status_frame_background">@color/background_100</item>
    <item name="sb_status_frame_text_appearance">@style/SendbirdBody2OnLight03</item>
    <item name="sb_status_frame_icon_tint">@color/onlight_03</item>
    <item name="sb_status_frame_action_text_appearance">@style/SendbirdButtonPrimary300</item>
    <item name="sb_status_frame_action_background">@drawable/selector_button_retry_light</item>
</style>
Widget.SendBird.StatusFrame
AttributeResource typeDescription

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.

Toast

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

<style name="custom" parent="Widget.SendBird.ToastView">
    <item name="sb_toast_background">@drawable/sb_toast_background_light</item>
    <item name="sb_toast_text_appearance">@style/SendbirdBody1OnDark01</item>
</style>
Widget.SendBird.ToastView
AttributeResource typeDescription

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.

Buttons

A button consists of text or an icon that communicates what action occurs when the user clicks it.

Buttons

Light Color Skin
Copy
<style name="custom" parent="Widget.SendBird.Button">
    <item name="android:textSize">@dimen/sb_text_size_14</item>
    <item name="android:textStyle">bold</item>
</style>
Widget.SendBird.Button
AttributeResource typeDescription

android:textSize

size

The text size of the button.

android:textStyle

text style

The text style of the button.

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

<style name="custom" parent="Widget.SendBird.Button.Contained">
    <item name="android:background">@drawable/sb_button_contained_background_light</item>
    <item name="android:textColor">@color/sb_button_contained_text_color_light</item>
</style>
Widget.SendBird.Button.Contained
AttributeResource typeDescription

android:background

drawable/color

The background of the button.

android:textColor

color

The color of the button text.

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

<style name="custom" parent="Widget.SendBird.Button.Uncontained">
    <item name="android:background"></item>
    <item name="android:textColor"></item>
</style>
Widget.SendBird.Button.Uncontained
AttributeResource typeDescription

android:background

drawable/color

The background of the button.

android:textColor

color

The color of the button text.

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

<style name="custom" parent="Widget.SendBird.Button.Alert">
    <item name="android:background"></item>
    <item name="android:textColor"></item>
</style>
Widget.SendBird.Button.Alert
AttributeResource typeDescription

android:background

drawable/color

The background of the button.

android:textColor

color

The color of the button text.

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

<style name="custom" parent="Widget.SendBird.Button.Cancel">
    <item name="android:background"></item>
    <item name="android:textColor"></item>
</style>
Widget.SendBird.Button.Cancel
AttributeResource typeDescription

android:background

drawable/color

The background of the button.

android:textColor

color

The color of the button text.

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

<style name="custom" parent="Widget.SendBird.IconButton">
    <item name="android:tint"></item>
    <item name="android:background"></item>
</style>
Widget.SendBird.IconButton
AttributeResource typeDescription

android:tint

color

The color of the icon.

android:background

drawable/color

The background of the button.

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

<style name="custom" parent="Widget.SendBird.Emoji">
    <item name="sb_emoji_background"></item>
    <item name="sb_emoji_more_button_src"></item>
    <item name="sb_emoji_reaction_background"></item>
    <item name="sb_emoji_reaction_text_appearance"></item>
    <item name="sb_emoji_reaction_more_button_src"></item>
    <item name="sb_emoji_reaction_count_text_appearance"></item>
    <item name="sb_emoji_reaction_count_tab_layout_background"></item>
    <item name="sb_emoji_reaction_count_tab_indicator_color"></item>
    <item name="sb_emoji_reaction_user_nickname_appearance"></item>
</style>
Widget.SendBird.Emoji
AttributeResource typeDescription

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