🤖
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
    • Overriding the Push Notification Handler
    • Handling Structured Meta Data
  • Chat SDK v4
    • Development Guide
    • Updating from v4 to v5
Powered by GitBook
On this page
  • Use a custom theme
  • Change the color scheme

Was this helpful?

  1. API

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

PreviousEventsNextCustomizing the Icons

Last updated 4 years ago

Was this helpful?

Here is a of the available attributes:

Chat SDK also uses which has its own stylable attributes:

full list
ChatKit
ChatView
MessageInput
ThreadsFragment