🤖
Android
🤖
Android
🤖
Android
🤖
Android
Chat SDK Android
Getting Started
Chat SDK Quickstart
Add the Chat SDK to a Firebase app
Add the Chat SDK to a non-Firebase app
Setup
Add Chat SDK to your project
Firebase Setup
Chat SDK Initialization
Set the Chat SDK Theme
Enable Location Messages
Authentication Screen
Add Additional Modules
Module Configuration
Proguard
API
Overriding Activities and Fragments
Events
Theming
Customizing the Icons
Tab Customization
Add a Chat Option
Message Customization
Integrating Chat SDK User profiles with your app
Custom Token Authentication
Firebase Schema
Overriding the Push Notification Handler
Custom file upload handler
Chat SDK v4
Development Guide
Updating from v4 to v5
Powered by GitBook

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:

API - Previous
Events
Next - API
Customizing the Icons
Last updated 2 weeks ago
Contents
Use a custom theme
Change the color scheme