Theming
How to customize the look and feel of Chat SDK for Android
The appearance of the Chat SDK can easily be customized:
Use a custom theme
Change the color scheme
Change the icons
Customize activities and fragments
Add a theme to your app:
In the AndroidManifest.xml
<applicationandroid: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.
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" />
Chat SDK also uses ChatKit which has its own stylable attributes:
ChatView
Last updated 3 months ago