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

<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:

• ChatView

• MessageInput

• ThreadsFragment