1. Select one from existing themes

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

 

Example: 

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

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

 

2. Create and apply a custom theme

 

Chat 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

 

For example, to customize colorPrimary, include the following. 

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

 

 

Following is a list of Freschat SDK specific customizations.

 

2.1 Text Appearance 

Chat 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 textColortextSize etc.

Steps to customize the Text  Appearance

Step 1:  Define custom Text Appearance as a style 


For example, 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>

</style>

 

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

 

For example, 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>


<style name="CustomChannelNameTextStyle" parent="Widget.Freshchat.ChannelName">

    <item name="android:textAppearance">@style/MyCustomTextAppearance</item>

</style>

    

Step 3: Set the custom theme for the all the chat 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.

 

For example, include the custom theme as android:theme and tools:replace attribute to allow replacement of theme by manifest merger.

 

For a list of chat SDK Activities, refer : Chat Android SDK Manifest

<activity

        android:name="com.freshchat.consumer.sdk.activity.ChannelListActivity"

        android:theme="@style/MyCustomTheme"

        tools:replace="android:theme" />


<activity

        android:name="com.freshchat.consumer.sdk.activity.ConversationDetailActivity"

        android:theme="@style/MyAlternateTheme"

        tools:replace="android:theme" />

   

2.2 View Appearance Customization

Chat 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 

Chat 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

  2. HTML

  3. dependencies {    compile 'uk.co.chrisjenx:calligraphy:2.1.0'}

  4.  

  5. Add the font file(*.ttf) to the /assets folder of your app module.
     

  6. 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 example,
    MyCustomTextAppearance style defined in 2.1 Step 1 will also have the fontPath attribute as part of it

  7. XML

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

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

  10. Java

  11. @Overridepublic void onCreate() {    super.onCreate();    CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()        .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf")        .setFontAttrId(R.attr.fontPath)        .build());}

  12.   

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

Chat SDK supports customizing strings in the UI components visible to the user. For a list of all strings that can be customized 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. 

 

For example, to change title for message channels list page, include the following string in strings.xml

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.