Theming

Search…
Theming
How to customize the look and feel of Chat SDK for Android
The appearance of the Chat SDK can easily be customized:
1.Use a custom theme
2.Change the color scheme
3.Change the icons
4.Customize activities and fragments
Use a custom theme
Add a theme to your app:
In the AndroidManifest.xml
1
<application
2
    android:theme="@style/YouTheme"
Copied!
To force the Chat SDK to use your app's theme you first need to make sure your theme inherits from the Chat SDK theme:
1
<style name="YourTheme" parent="ChatSDKTheme">
Copied!
Then:
1
UIModule.config().overrideTheme();
Copied!
Alternatively, if you want to add a separate theme to the Chat SDK, use the following:
1
UIModule.config().setTheme(R.style.CustomChatSDKTheme);
Copied!
Make sure this theme also uses ChatSDKTheme as it's parent.
Change the color scheme
Chat SDK comes with a number of attributes that you can override to customize the color scheme:
In your theme add:
1
<resources>
2
    <style name="CustomChatSDKTheme" parent="ChatSDKTheme">
3
        <item name="colorPrimary">#FF0000</item>
4
        <item name="colorPrimaryDark">@color/primary_dark</item>
5
        <item name="colorAccent">@color/accent</item>
6
        <item name="colorControlNormal">@color/text_primary</item>
7
        // Other custom attributes
8
    </style>
9
</resources>
Copied!
Here is a full list of the available attributes:
1
<attr name="actionBarBackgroundColor" format="reference|color" />
2
<attr name="actionBarTextColor" format="reference|color" />
3
​
4
<attr name="avatarBorderColor" format="reference|color" />
5
<attr name="avatarBackgroundColor" format="reference|color" />
6
<attr name="dialogUnreadBubbleBorderColor" format="reference|color" />
7
<attr name="onlineIndicatorBorderColor" format="reference|color" />
8
<attr name="onlineIndicatorOnlineColor" format="reference|color" />
9
<attr name="onlineIndicatorOfflineColor" format="reference|color" />
10
​
11
<attr name="systemDefaultBubbleColor" format="reference|color" />
12
<attr name="systemDefaultBubblePressedColor" format="reference|color" />
13
<attr name="systemDefaultBubbleSelectedColor" format="reference|color" />
14
​
15
<attr name="systemMessageTextColor" format="reference|color" />
16
<attr name="systemMessageTextSize" format="reference|dimension" />
17
<attr name="systemMessageBubbleDrawable" format="reference" />
18
​
19
<attr name="replyBackgroundColor" format="reference|color" />
20
<attr name="replyDividerColor" format="reference|color" />
21
<attr name="replyTextSize" format="dimension|reference" />
22
<attr name="replyTextPadding" format="dimension|reference" />
23
​
24
<attr name="incomingReplyDrawable" format="reference" />
25
<attr name="incomingReplyImageDrawable" format="reference" />
26
<attr name="incomingReplyDividerColor" format="reference|color" />
27
<attr name="incomingReplyBackgroundColor" format="reference|color" />
28
<attr name="incomingReplyTextColor" format="reference|color" />
29
<attr name="incomingReplyTextSize" format="reference|dimension" />
30
​
31
<attr name="incomingUserNameTextColor" format="reference|color" />
32
<attr name="incomingUserNameTextFont" format="reference|string" />
33
<attr name="incomingUserNameTextSize" format="reference|dimension" />
34
<attr name="incomingIconDrawable" format="reference" />
35
​
36
<attr name="outcomingReplyDividerColor" format="reference|color" />
37
<attr name="outcomingReplyDrawable" format="reference" />
38
<attr name="outcomingReplyImageDrawable" format="reference" />
39
<attr name="outcomingReplyBackgroundColor" format="reference|color" />
40
<attr name="outcomingReplyTextColor" format="reference|color" />
41
<attr name="outcomingReplyTextSize" format="reference|dimension" />
42
​
43
<attr name="outcomingIconDrawable" format="reference" />
44
​
45
<attr name="chatViewDividerColor" format="reference|color" />
46
<attr name="chatViewMessageInputBackgroundColor" format="reference|color" />
47
​
48
<attr name="logoutButtonColor" format="reference|color" />
49
<attr name="loginButtonColor" format="reference|color" />
50
<attr name="registerButtonColor" format="reference|color" />
51
<attr name="anonymousButtonColor" format="reference|color" />
52
<attr name="resetPasswordButtonTextColor" format="reference|color" />
53
<attr name="resetPasswordButtonColor" format="reference|color" />
Copied!
Styling the ChatView using ChatKit
Chat SDK also uses ChatKit which has its own stylable attributes:
​ChatView​
​MessageInput​
​ThreadsFragment​
API - Previous
Events
Next - API
Customizing the Icons
Last modified 1yr ago
Copy link
Contents
Use a custom theme
Change the color scheme