Home
/
UIKit
/
Android

Themes

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.


Setup the default theme

UIKit for Android's Light or Dark theme can be applied using the SendBirdUIKit.setDefaultThemeMode() method.

Light theme

This is the default theme for UIKit if another theme hasn’t been specified.

Light Color Skin
Copy
SendBirdUIKit.setDefaultThemeMode(SendBirdUIKit.ThemeMode.Light);

Three UIKit views in Light theme are shown.

Dark theme

The Dark theme can be applied as below:

Light Color Skin
Copy
SendBirdUIKit.setDefaultThemeMode(SendBirdUIKit.ThemeMode.Dark);

Three UIKit views in Dark theme are shown.


StyleSet

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.

Light Color Skin
Copy
<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>

GroupChannel

The following table lists the style components of each Activity or Fragment used for group channels.

Activity or FragmentStyle 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

OpenChannel

The following table lists the style components of each Activity or Fragment used for open channels.

Activity or FragmentStyle 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


ColorSet

The ColorSet is the set of colors provided by UIKit for Android and is fully customizable.

Light Color Skin
Copy
<?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>