Chat UIKit Android View v2
Chat UIKit Android View
Chat UIKit
Android View
Version 2
Sendbird Chat UIKit v2 for Android View is no longer supported as a new version is released. Check out our latest Chat UIKit v3
here A theme is style that’s applied to your entire app, activity or view hierarchy rather than an individual view. By default, Sendbird UIKit for Android provides two themes: Light and Dark. Customized themes that fit your brand identity can also be created by changing the style and color set.
UIKit for Android's Light or Dark theme can be applied using the SendBirdUIKit.setDefaultThemeMode() method.
This is the default theme for UIKit if another theme hasn’t been specified.
SendBirdUIKit.setDefaultThemeMode(SendBirdUIKit.ThemeMode.Light);
To view the image in full screen, click on the
The Dark theme can be applied as below:
SendBirdUIKit.setDefaultThemeMode(SendBirdUIKit.ThemeMode.Dark);
To view the image in full screen, click on the
StyleSet is the list of styles provided by UIKit. Customizing the style of channel list items is straightforward: Simply inherit the UIKit-defined styles, then override the res/values/styles.xml file from the list below. For example, the ChannelPreview theme can be changed by overriding the Widget.SendBird.ChannelPreview.
Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.
<style name="SendBird" parent="AppTheme">
<item name="sb_channel_preview_style">@style/Widget.SendBird.ChannelPreview</item>
<item name="sb_user_preview_style">@style/Widget.SendBird.UserPreview</item>
<item name="sb_member_preview_style">@style/Widget.SendBird.MemberPreview</item>
<item name="sb_channel_settings_style">@style/Widget.SendBird.ChannelSettings</item>
<item name="sb_channel_message_list_style">@style/Widget.SendBird.RecyclerView.Message</item>
<item name="sb_message_user_style">@style/Widget.SendBird.Message.User</item>
<item name="sb_message_file_style">@style/Widget.SendBird.Message.File</item>
<item name="sb_message_admin_style">@style/Widget.SendBird.Message.Admin</item>
<item name="sb_message_timeline_style">@style/Widget.SendBird.Message.Timeline</item>
<item name="sb_message_input_style">@style/Widget.SendBird.MessageInput</item>
<item name="sb_select_channel_type_style">@style/Widget.SendBird.SelectChannelTypeView</item>
<item name="sb_appbar_style">@style/Widget.SendBird.AppBar</item>
<item name="sb_recycler_view_style">@style/Widget.SendBird.RecyclerView</item>
<item name="sb_dialog_view_style">@style/Widget.SendBird.DialogView</item>
<item name="sb_status_frame_style">@style/Widget.SendBird.StatusFrame</item>
<item name="sb_toast_view_style">@style/Widget.SendBird.ToastView</item>
<item name="sb_emoji_reaction_style">@style/Widget.SendBird.Emoji</item>
<item name="sb_single_menu_item_style">@style/Widget.SendBird.SingleMenuItemView</item>
<item name="sb_user_profile_style">@style/Widget.SendBird.UserProfile</item>
<!-- OpenChannel -->
<item name="sb_open_channel_message_user_style">@style/Widget.SendBird.OpenChannel.Message.User</item>
<item name="sb_open_channel_message_file_style">@style/Widget.SendBird.OpenChannel.Message.File</item>
<item name="sb_open_channel_message_admin_style">@style/Widget.SendBird.OpenChannel.Message.Admin</item>
<item name="sb_open_channel_settings_style">@style/Widget.SendBird.OpenChannel.ChannelSettings</item>
</style>
The following table lists the style components of each Activity or Fragment used for group channels.
Activity or Fragment Style components ChannelList
Widget.SendBird.ChannelPreview, Widget.SendBird.RecyclerView, Widget.SendBird.SelectChannelTypeView
GroupChannel
Widget.SendBird.RecyclerView.Message, Widget.SendBird.Message.User, Widget.SendBird.Message.File, Widget.SendBird.Message.Admin, Widget.SendBird.Message.Timeline, Widget.SendBird.MessageInput, Widget.SendBird.Emoji, Widget.SendBird.UserProfile
CreateChannel, InviteChannel, AddOperator,
Widget.SendBird.UserPreview, Widget.SendBird.RecyclerView
MemberList, MutedMemberList, OperatorList, BannedMemberList
Widget.SendBird.MemberPreview, Widget.SendBird.RecyclerView, Widget.SendBird.UserProfile
Moderations
Widget.SendBird.SingleMenuItemView, Widget.SendBird.RecyclerView
ChannelSettings
Widget.SendBird.ChannelSettings
CommonComponents
Widget.SendBird.AppBar, Widget.SendBird.RecyclerView, Widget.SendBird.DialogView, Widget.SendBird.StatusFrame, Widget.SendBird.ToastView, Widget.SendBird.UserProfile
The following table lists the style components of each Activity or Fragment used for open channels.
Activity or Fragment Style components OpenChannel
Widget.SendBird.RecyclerView.Message, Widget.SendBird.OpenChannel.Message.User, Widget.SendBird.OpenChannel.Message.File, Widget.SendBird.OpenChannel.Message.Admin, Widget.SendBird.Message.Timeline, Widget.SendBird.MessageInput,Widget.SendBird.UserProfile
ParticipantsList
Widget.SendBird.UserPreview, Widget.SendBird.RecyclerView, Widget.SendBird.UserProfile
OpenChannelSettings
Widget.SendBird.OpenChannelChannelSettings
CommonComponents
Widget.SendBird.AppBar, Widget.SendBird.RecyclerView, Widget.SendBird.DialogView, Widget.SendBird.StatusFrame, Widget.SendBird.ToastView, Widget.SendBird.UserProfile
The ColorSet is the set of colors provided by UIKit for Android and is fully customizable.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_500">#491389</color>
<color name="primary_400">#6211c8</color>
<color name="primary_300">#742ddd</color>
<color name="primary_200">#c2a9fa</color>
<color name="primary_100">#dbd1ff</color>
<color name="secondary_500">#066858</color>
<color name="secondary_400">#027d69</color>
<color name="secondary_300">#259c72</color>
<color name="secondary_200">#69c085</color>
<color name="secondary_100">#a8e2ab</color>
<color name="error_500">#9d091e</color>
<color name="error_400">#bf0711</color>
<color name="error_300">#de360b</color>
<color name="error_200">#f66161</color>
<color name="error_100">#fdaaaa</color>
<color name="background_700">#000000</color>
<color name="background_600">#161616</color>
<color name="background_500">#2c2c2c</color>
<color name="background_400">#393939</color>
<color name="background_300">#bdbdbd</color>
<color name="background_200">#e0e0e0</color>
<color name="background_100">#eeeeee</color>
<color name="background_50">#ffffff</color>
<color name="overlay_01">#8c000000</color>
<color name="overlay_02">#51000000</color>
<color name="onlight_01">#e1000000</color>
<color name="onlight_02">#80000000</color>
<color name="onlight_03">#61000000</color>
<color name="onlight_04">#1e000000</color>
<color name="ondark_01">#e1ffffff</color>
<color name="ondark_02">#80ffffff</color>
<color name="ondark_03">#61ffffff</color>
<color name="ondark_04">#1effffff</color>
<color name="information">#adc9ff</color>
</resources>