/ UIKit / Android View
UIKit
Chat UIKit Android View v3
Chat UIKit Android View
Chat UIKit
Android View
Version 3

Themes

Copy link

A theme is style that's applied to your entire app, activity, or view hierarchy rather than an individual view. It's composed of different styles used in modules and components. By default, Sendbird UIKit for Android provides two themes: Light and Dark. But you can customize these themes to create your own brand identity by changing the value of resources.


Setup the default theme

Copy link

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


Light theme

Copy link

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

KotlinJava
SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Light)

Background color

Copy link

The background color of each component in Light theme ranges from Background-50 to Background-300.

Texts and other element colors

Copy link

The following image shows the color scheme used for texts and other elements on light backgrounds.

UI elements and status colors

Copy link

Primary-main and Secondary-main colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-main is used for warnings and Information-light is currently used for a status banner indicating frozen channels.


Dark theme

Copy link

A dark theme is a user interface designed for low-light environments, featuring primarily dark surfaces. It serves as an alternative option to the default light theme, presenting dark-colored surfaces throughout much of the interface.

The Dark theme can be applied as below:

KotlinJava
SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Dark)

Background color

Copy link

The background color of each component in Dark theme ranges from Background-400 to Background-700.

Texts and other element colors

Copy link

The following image shows the color scheme used for texts and other elements on dark backgrounds.

UI elements and status colors

Copy link

Primary-light and Secondary-light colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-light is used for warnings and Information-light is currently used for a status banner indicating frozen channels.


Theme anatomy

Copy link

The images below show the combination of background and text colors used in the Light and Dark themes.

Light theme

Copy link

Dark theme

Copy link


States

Copy link

The images below show the various colors used to indicate different states in the Light and Dark themes. For Pressed and Selected states, the background color is either Primary-light or one level higher than that of the Enabled state.

Light theme

Copy link

Dark theme

Copy link


Customize theme

Copy link

A theme in UIKit is composed of various styles used in modules and components. To change them, you must inherit the style of the module you wish to customize and create a custom style first. Then, you can apply the new style to the theme. You can also set and customize individual component themes for when you want to use components outside of the set module. To learn more about style, go to the Style resource page.

Note : For dark theme, use AppTheme.Dark.Sendbird in the code. You can see all the different styles that are applied to the dark theme in the res/values/styles_dark.xml file.

<style name="AppTheme.Sendbird">
    <item name="sb_module_banned_user_list">@style/Module.BannedUserList</item>
    <item name="sb_module_channel_list">@style/Module.ChannelList</item>
    <item name="sb_module_channel">@style/Module.Channel</item>
    <item name="sb_module_channel_settings">@style/Module.ChannelSettings</item>
    <item name="sb_module_create_channel">@style/Module.CreateChannel</item>
    <item name="sb_module_invite_user">@style/Module.InviteUser</item>
    <item name="sb_module_member_list">@style/Module.MemberList</item>
    <item name="sb_module_message_search">@style/Module.MessageSearch</item>
    <item name="sb_module_moderation">@style/Module.Moderation</item>
    <item name="sb_module_muted_member_list">@style/Module.MutedMemberList</item>
    <item name="sb_module_open_channel">@style/Module.OpenChannel</item>
    <item name="sb_module_open_channel_settings">@style/Module.OpenChannelSettings</item>
    <item name="sb_module_operator_list">@style/Module.OperatorList</item>
    <item name="sb_module_participant_list">@style/Module.ParticipantList</item>
    <item name="sb_module_register_operator_list">@style/Module.RegisterOperator</item>

    <item name="sb_component_channel_message_input">@style/Component.ChannelMessageInput</item>
    <item name="sb_component_channel_settings_info">@style/Component.ChannelSettingsInfo</item>
    <item name="sb_component_channel_settings_menu">@style/Component.ChannelSettingsMenu</item>
    <item name="sb_component_message_search_header">@style/Component.MessageSearchHeader</item>
    <item name="sb_component_moderation_list">@style/Component.ModerationList</item>
    <item name="sb_component_open_channel_message_input">@style/Component.OpenChannelMessageInput</item>
    <item name="sb_component_open_channel_settings_info">@style/Component.OpenChannelSettingsInfo</item>
    <item name="sb_component_open_channel_settings_menu">@style/Component.OpenChannelSettingsMenu</item>
    <item name="sb_component_header">@style/Component.Header</item>
    <item name="sb_component_state_header">@style/Component.Header.State</item>
    <item name="sb_component_list">@style/Component.List</item>
    <item name="sb_component_status">@style/Component.Status</item>
</style>

For an in-depth practical demonstration, see our sample code.