Theming
How to customize the look and feel of Chat SDK for Android
The appearance of the Chat SDK can easily be customized:
Customize activities and fragments
Use a custom theme
Add a theme to your app:
In the AndroidManifest.xml
<application
android:theme="@style/YouTheme"
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:
<style name="YourTheme" parent="ChatSDKTheme">
Then:
UIModule.config().overrideTheme();
Alternatively, if you want to add a separate theme to the Chat SDK, use the following:
UIModule.config().setTheme(R.style.CustomChatSDKTheme);
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:
<resources>
<style name="CustomChatSDKTheme" parent="ChatSDKTheme">
<item name="colorPrimary">#FF0000</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="colorControlNormal">@color/text_primary</item>
// Other custom attributes
</style>
</resources>
Here is a full list of the available attributes:
<attr name="actionBarBackgroundColor" format="reference|color" />
<attr name="actionBarTextColor" format="reference|color" />
<attr name="avatarBorderColor" format="reference|color" />
<attr name="avatarBackgroundColor" format="reference|color" />
<attr name="dialogUnreadBubbleBorderColor" format="reference|color" />
<attr name="onlineIndicatorBorderColor" format="reference|color" />
<attr name="onlineIndicatorOnlineColor" format="reference|color" />
<attr name="onlineIndicatorOfflineColor" format="reference|color" />
<attr name="systemDefaultBubbleColor" format="reference|color" />
<attr name="systemDefaultBubblePressedColor" format="reference|color" />
<attr name="systemDefaultBubbleSelectedColor" format="reference|color" />
<attr name="systemMessageTextColor" format="reference|color" />
<attr name="systemMessageTextSize" format="reference|dimension" />
<attr name="systemMessageBubbleDrawable" format="reference" />
<attr name="replyBackgroundColor" format="reference|color" />
<attr name="replyDividerColor" format="reference|color" />
<attr name="replyTextSize" format="dimension|reference" />
<attr name="replyTextPadding" format="dimension|reference" />
<attr name="incomingReplyDrawable" format="reference" />
<attr name="incomingReplyImageDrawable" format="reference" />
<attr name="incomingReplyDividerColor" format="reference|color" />
<attr name="incomingReplyBackgroundColor" format="reference|color" />
<attr name="incomingReplyTextColor" format="reference|color" />
<attr name="incomingReplyTextSize" format="reference|dimension" />
<attr name="incomingUserNameTextColor" format="reference|color" />
<attr name="incomingUserNameTextFont" format="reference|string" />
<attr name="incomingUserNameTextSize" format="reference|dimension" />
<attr name="incomingIconDrawable" format="reference" />
<attr name="outcomingReplyDividerColor" format="reference|color" />
<attr name="outcomingReplyDrawable" format="reference" />
<attr name="outcomingReplyImageDrawable" format="reference" />
<attr name="outcomingReplyBackgroundColor" format="reference|color" />
<attr name="outcomingReplyTextColor" format="reference|color" />
<attr name="outcomingReplyTextSize" format="reference|dimension" />
<attr name="outcomingIconDrawable" format="reference" />
<attr name="chatViewDividerColor" format="reference|color" />
<attr name="chatViewMessageInputBackgroundColor" format="reference|color" />
<attr name="logoutButtonColor" format="reference|color" />
<attr name="loginButtonColor" format="reference|color" />
<attr name="registerButtonColor" format="reference|color" />
<attr name="anonymousButtonColor" format="reference|color" />
<attr name="resetPasswordButtonTextColor" format="reference|color" />
<attr name="resetPasswordButtonColor" format="reference|color" />
Styling the ChatView using ChatKit
Chat SDK also uses ChatKit which has its own stylable attributes: