1. Selecting an existing theme
2. Create and apply a custom theme
Steps to customize the Text Appearance
2.2 View Appearance Customization
2.6 Customizing the Topic Name and Welcome Message
1. Selecting an existing theme
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
Example:
<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 the Android theming system, and as such supports the standard android theming attributes for items like ActionBar background color, ActionBar text color, status bar color, 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>
Here is a list of Freschat SDK-specific customizations:
2.1 Text Appearance
Freshchat SDK supports changing text appearance for several elements in the SDK. You can refer to the default styles of text appearance implementation here.
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
<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 Freshchat 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 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.
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 Freshchat SDK Activities, you can refer to this Freshchat 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
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 Topic name view
- freshchatChannelDescriptionTextStyle -> Style for the Topic description view
- freshchatChannelLastUpdatedAtTextStyle -> Style for the Topic last updated at view
- freshchatChannelUnreadCountTextStyle -> Style for the Topic unread count view
- freshchatChannelListStyle -> Topics List View Style
- freshchatChannelListItemStyle -> Style for each Topic in the list
- freshchatChannelAltIconStyle -> Style for alternate view for the Topic 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 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.4 SDK String Customization
With the Freshchat SDK, you can customize strings in the UI components that are visible to an end-user. Here's a list of all the strings that can be customized. 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 the title for the message Topics list page, include the following string in strings.xml
<string name="freshchat_activity_title_channel_list">Conversations</string>2.5 Notification Icons
To change your notification icons, please refer to the “Customizing Notifications” section in the Integration Steps document here.
2.6 Customizing the Topic Name and Welcome Message
Navigate to Admin > Topics to customize the title of the conversation interface and the default message.