1. Hotline - Use Existing Themes

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

Eg : 

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

 

Hotline SDK ships with Theme.Hotline.Light.DarkActionBar (since v1.0.0) and Theme.Hotline.Light  (since version 1.0.1)


2. Hotline - Custom Theme


Hotline 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


If you are migrating from older versions of appcomapt-v7 or just getting started, the standard theme attributes needs to be used without the "android:" prefix in the styles. For more information refer : Material Design Reference

Eg: To customize colorPrimary, include the following. Note the missing android: namespace prefix

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

Incorrect/Old Implementation :

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




Following is a list of Hotline SDK specific customisations.


2.1 Text Appearance 

Hotline supports changing text appearance for several elements in the SDK. Some elements allow full view level customizations including text appearance, those aren't listed here. Please check view customization section for the same. The following are the list of theme attributes that can be overridden and set to some custom text appearance. You can refer to the default text appearance implementation here : Default Styles

     

<!-- Contact Us in FAQ Cateogry List & FAQ List -->
hotlineContactUsTextAppearance

<!-- Article List Customizations -->
hotlineArticleTitleTextAppearance
hotlineArticleListEmptyWarningTextAppearance

<!-- FAQ Category List Item Customizations -->
hotlineCategoryNameTextAppearance
hotlineCategoryDescriptionTextAppearance
hotlineCategoryListEmptyWarningTextAppearance

<!-- Message Channel Item Customizations -->
hotlineChannelNameTextAppearance
hotlineChannelDescriptionTextAppearance
hotlineChannelLastUpdatedTextAppearance
hotlineChannelUnreadCountTextAppearance

<!-- Message List Item Customizations -->
hotlineAgentNameTextAppearance
hotlineUserMessageTextAppearance
hotlineAgentMessageTextAppearance
hotlineUserMessageTimeTextAppearance
hotlineAgentMessageTimeTextAppearance
hotlineVoiceMessageDurationTextAppearance

     


Note : Text Appearance is the standard android textAppearance style and 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>
</style>

 

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

For Eg : MyCustomTextAppearance style defined above is mapped to hotlineChannelNameTextAppearance theme attribute  

<style name="MyCustomTheme" parent="Theme.Hotline.Light.DarkActionBar">
	<item name="hotlineChannelNameTextAppearance">@style/MyCustomTextAppearance</item>
</style> 

    

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

 

<style name="Theme.Hotline.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 Hotline SDK Activities, refer : Hotline Android SDK Manifest

   

<activity
	android:name="com.freshdesk.hotline.activity.ChannelListActivity"
	android:theme="@style/MyCustomTheme"
	tools:replace="android:theme" />

<activity
	android:name="com.freshdesk.hotline.activity.ConversationDetailActivity"
	android:theme="@style/MyAlternateTheme"
	tools:replace="android:theme" />

   


2.2 View Appearance Customization 

Hotline 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

  • For customizing the background of the Contact Us footer view in the FAQ section, please include a Color State List drawable with the name hotline_contact_us_btn_bg.xml 
  • hotlineChannelListItemStyle -> Channel List View Style
  • hotlineChannelAltIconStyle -> Style for alternate view for channel icon when icon is not present
  • hotlineMessageListStyle -> Message List View Style
  • hotlineMessageListItemStyle -> Style for each item in the message list
  • hotlineMessageDeepLinkStyle -> Style for the Message Deeplink Button
  • hotlineMessageReplyEditTextViewStyle -> Style for the Message Input Edittext Field for the user
  • hotlineConversationBannerMessageStyle -> Style for the banner view on top of Message List Screen
  • hotlineCategoryListItemStyle -> FAQ Category List View Style
  • hotlineCategoryAltIconStyle -> Style for alternate view for category icon when icon is not present
  • hotlineArticleListStyle -> FAQ / Article List View Style
  • hotlineArticleListItemStyle -> Style for each item in the FAQ /  Article List
  • hotlineArticleVotingPromptTextStyle -> FAQ Voting Prompt Textview's style
  • hotlineArticleUpvoteStyle -> Style fo the upvote button in the voting prompt for FAQ
  • hotlineArticleDownvoteStyle -> Style for the downvote button in the voting prompt fo FAQ












2.3 Custom Font 

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

        

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

      

    @Override
    public 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. 

     

<!-- Action Icons -->
<item name="hotlinePlayIcon">@drawable/hotline_ic_play</item>
<item name="hotlineStopIcon">@drawable/hotline_ic_stop</item>
<item name="hotlineSendIcon">@drawable/hotline_ic_send</item>
<item name="hotlineCancelIcon">@drawable/hotline_ic_cancel</item>
<item name="hotlineAttachIcon">@drawable/hotline_ic_attach</item>
<item name="hotlineRecordIcon">@drawable/hotline_ic_record</item>

<!-- Menu Icons -->
<item name="hotlineSearchIcon">@drawable/hotline_ic_action_search_dark</item>
<item name="hotlineSpeakerIcon">@drawable/hotline_ic_speaker</item>
<item name="hotlineEarpieceIcon">@drawable/hotline_ic_earpiece</item>
<item name="hotlineContactUsIcon">@drawable/hotline_ic_action_contact_us</item>

<!-- Misc Icons-->
<item name="hotlineAvatarIcon">@null</item>
<item name="hotlineUnreadCountIcon">@drawable/hotline_ic_unread_count</item>
<item name="hotlineVoiceMessageSeekbarThumb">@drawable/hotline_voice_message_seekbar_thumb</item>

<!-- Chat Bubbles -->
<item name="hotlineChatBubbleLeft">@drawable/hotline_chat_bubble_left</item>
<item name="hotlineChatBubbleRight">@drawable/hotline_chat_bubble_right</item>

     

The following attributes are for layer-list drawables and can be replaced by overriding the theme attribute and specifying a new layer-list xml for the same.

 

<item name="hotlineVoiceVisualizer">@drawable/hotline_voice_visualizer_drawable</item>
<item name="hotlineVoiceMessageSeekbar">@drawable/hotline_voice_message_seekbar</item>

  

2.5 SDK String Customization

Hotline 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="hotline_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 are customized dynamically from our Admin Settings->Channels interface here.