How to configure Android SDK Themes and Customizations in Chat? : Freshsales

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:

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 textColor, textSize etc.

Steps to customize the Text Appearance

Step 1: Define custom Text Appearance as a style

For example, MyCustomTextAppearance style is defined as

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

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

<item name="freshchatChannelNameTextStyle">@style/CustomChannelNameTextStyle</item>

</style>

<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

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.

Include Calligraphy as a dependency in your app by adding the following line to your app's build.gradle
HTML
dependencies { compile 'uk.co.chrisjenx:calligraphy:2.1.0'}
Add the font file(*.ttf) to the /assets folder of your app module.
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
XML
<style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium"> <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item></style>
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.
Java
@Overridepublic void onCreate() { super.onCreate(); CalligraphyConfig.initDefault(new CalligraphyConfig.Builder() .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf") .setFontAttrId(R.attr.fontPath) .build());}

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.

<item name="freshchatSendIcon">@drawable/freshchat_ic_send</item>

<item name="freshchatCancelIcon">@drawable/freshchat_ic_cancel</item>

<item name="freshchatAttachIcon">@drawable/freshchat_ic_attach</item>

<item name="freshchatSearchIcon">@drawable/freshchat_ic_action_search_light</item>

<item name="freshchatContactUsIcon">@drawable/freshchat_ic_action_contact_us</item>

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