1. Select one from existing themes

Freshchat SDK depends on appcompat-v7 for providing backward compatibility, hence all the Freshchat Themes are inherited from Theme.AppCompat.* themes. To switch the theme applied to Freshchat SDK components, change the parent of Theme.Freshchat.SelectedTheme to one of the variants of Theme.Freshchat.* in your app's styles.xml

Eg :  

<style name="Theme.Freshchat.SelectedTheme" parent="@style/Theme.Freshchat.Light.DarkActionBar" />


Freshchat SDK ships with Theme.Freshchat.Light and Theme.Freshchat.Light.DarkActionBar

2. Create and apply a custom theme

Freshchat SDK's theming is built on top of Android theming system, and as such supports the standard android theming attributes for items like ActionBar background colour, ActionBar text color, status bar colour etc. Refer Android Design Guide: Android Material Theme Attributes

Eg: To customize colorPrimary, include the following. 

    <item name="colorPrimary">@color/my_awesome_color</item>

Following is a list of Freschat SDK specific customisations.

2.1 Text Appearance 

Freshchat SDK supports changing text appearance for several elements in the SDK. You can refer to the default text appearance implementation here : Default Styles

Note : *TextStyles listed are standard android view styles, typically for text views, and hence textAppearance can include any of the customizations like textColor, textSize etc. 

Steps to customize the Text  Appearance

Step 1. Define custom Text Appearance as a style 

Eg: MyCustomTextAppearance style is defined as 

<style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium">
<item name="android:textColor">@color/textColorPrimary</item>
<item name="android:textColorHighlight">@color/textColorHighlight</item>
<item name="android:textColorHint">@color/textColorHint</item>
<item name="android:textColorLink">@color/textColorLink</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>


Step 2. Map the Text Appearance style to a predefined Freshchat textAppearance custom attribute. 

For Eg : MyCustomTextAppearance style defined above is text appearance of the style freshchatChannelNameTextStyle 

<style name="MyCustomTheme" parent="Theme.Freshchat.Light.DarkActionBar">
<item name="freshchatChannelNameTextStyle">@style/CustomChannelNameTextStyle</item>

<style name="CustomChannelNameTextStyle" parent="Widget.Freshchat.ChannelName">
    <item name="android:textAppearance">@style/MyCustomTextAppearance</item>


Step 3. Set the custom theme for the all the Freshchat SDK Activities. The simplest way to do it is to override and set the parent of Theme.Freshchat.SelectedTheme in your app's styles.xml / themes.xml


<style name="Theme.Freshchat.SelectedTheme" parent="MyCustomTheme" />


Alternately if you want to apply different themes for each activity , then include the activity entries in your app's AndroidManifest.xml and override the theme from there.

Eg : Include the custom theme as android:theme and tools:replace attribute to allow replacement of theme by manifest merger.

For a list of Freshchat SDK Activities, refer : Freshchat Android SDK Manifest


        tools:replace="android:theme" />

        tools:replace="android:theme" />


2.2 View Appearance Customization 

Freshchat SDK allows customizing the appearance of the following views. If the view is a text container view, the text apperance can also be customized as part of the style


  • freshchatChannelNameTextStyle -> Style for channel name view
  • freshchatChannelDescriptionTextStyle -> Style for channel description view
  • freshchatChannelLastUpdatedAtTextStyle -> Style for channel last updated at view
  • freshchatChannelUnreadCountTextStyle -> Style for channel unread count view
  • freshchatChannelListStyle -> Channel List View Style
  • freshchatChannelListItemStyle -> Style for each Channel in the list
  • freshchatChannelAltIconStyle -> Style for alternate view for channel icon when icon is not present

  • freshchatTeamMemberNameTextStyle -> Style for team member name view
  • freshchatUserMessageTextStyle -> Style for user message view
  • freshchatTeamMemberMessageTextStyle -> Style for team member message view
  • freshchatUserMessageTimeTextStyle -> Style for user message time view
  • freshchatTeamMemberMessageTimeTextStyle -> Style for team member message time view
  • freshchatMessageListStyle -> Message List View Style
  • freshchatMessageListItemStyle -> Style for each item in the message list
  • freshchatMessageButtonStyle -> Style for the Button in the messages
  • freshchatMessageReplyInputViewStyle -> Style for the Message Input Edittext Field for the user
  • freshchatConversationBannerMessageStyle -> Style for the banner view on top of conversation detail/message list screen

  • freshchatFAQCategoryListStyle -> FAQ Category List View Style
  • freshchatFAQCategoryListItemStyle -> Style for each FAQ Category in the list
  • freshchatFAQCategoryAltIconStyle -> Style for alternate view for category icon when icon is not configured 
  • freshchatFAQCategoryNameTextStyle -> Style for FAQ category name view
  • freshchatFAQCategoryDescriptionTextStyle -> Style for FAQ category description view
  • freshchatFAQListEmptyTextStyle -> Style for FAQ list empty view

  • freshchatFAQListStyle -> FAQ / Article List View Style
  • freshchatFAQListItemStyle -> Style for each item in the FAQ /  Article List

  • freshchatFAQVotingPromptTextStyle -> FAQ Voting Prompt Textview's style
  • freshchatFAQVotingPromptViewStyle -> FAQ Voting Prompt View's style
  • freshchatFAQUpvoteButtonStyle -> Style for the upvote button in the voting prompt for FAQ
  • freshchatFAQDownvoteButtonStyle -> Style for the downvote button in the voting prompt fo FAQ

2.3 Custom Font 

Freshchat supports custom font through Calligraphy

  1. Include Calligraphy as a dependency in your app by adding the following line to your app's build.gradle
    dependencies {
        compile 'uk.co.chrisjenx:calligraphy:2.1.0'


  2. Add the font file(*.ttf) to the /assets folder of your app module.
  3. If you want to apply different fonts for each view,  specify the fontPath attribute as part of the Hotline textAppearance attributes described in section 2.1

    For Eg. MyCustomTextAppearance style defined in 2.1 Step 1 will also have the fontPath attribute as part of it


    <style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium">
        <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>


    Alternately If you want to apply a single font globally across all of Freshchat UI, initialize and define your default font using CalligraphyConfig, in your Application class in the onCreate() method.


    public void onCreate() {
        CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()


2.4 Drawable and Icons

The following icons can be replaced by overriding the theme attribute and specifying a different drawable for the same in your custom theme. 


<!-- Action Icons -->
<item name="freshchatSendIcon">@drawable/freshchat_ic_send</item>
<item name="freshchatCancelIcon">@drawable/freshchat_ic_cancel</item>
<item name="freshchatAttachIcon">@drawable/freshchat_ic_attach</item>

<!-- ActionBar Menu Icons -->
<item name="freshchatSearchIcon">@drawable/freshchat_ic_action_search_light</item>

<!-- Misc Icons-->
<item name="freshchatTeamMemberAvatarIcon">@null</item>
<item name="freshchatContactUsIcon">@drawable/freshchat_ic_action_contact_us</item>

<!-- Chat Bubbles -->
<item name="freshchatChatBubbleLeft">@drawable/freshchat_chat_bubble_left</item>
<item name="freshchatChatBubbleRight">@drawable/freshchat_chat_bubble_right</item>



2.5 SDK String Customization

Freshchat SDK supports customising strings in the UI components visible to user. For a list of all strings that can be customised check here

Copy the key value pair from the strings.xml linked above and add it to your app's strings.xml and update the value as necessary. 

Eg. To change title for message channels list page, include the following string in strings.xml


<string name="freshchat_activity_title_channel_list">Conversations</string>


2.6 Notification Icons

To change your notification icons, please see the section "Customizing Notifications" under the Integration Steps document here.

2.7 Customizing the Channel Name and Welcome Message


The title of the conversation interface and the default message can be customized from the admin portal Admin Settings-> Channels interface here.