Skinning & Customization

Learn about Skinning the Helpshift SDK to match the look-n-feel of your app. Customize localizable strings to support multiple languages in the SDK UI.

Introduction

If you want to customize Helpshift SDK theme as per your app's theme, see Theming and Skinning

If you want to change strings used in the SDK's UI or want to translate them as per device language, see String Customization.

Theming and Skinning

For theming of Helpshift SDK v3.12.0 and below refer theming and skinning older SDKs.

You can refer to the following HSThemeApp (sample project) which implements theme inheritance -

Helpshift Android SDK comes with three different themes -

  • Helpshift.Theme.Light.DarkActionBar (default)
  • Helpshift.Theme.Light
  • Helpshift.Theme.Dark

To make the Helpshift SDK look like your app, please follow the steps given below -

  1. Define your custom helpshift theme in your styles.xml and inherit it from one of the Helpshift themes mentioned above.
  2. Create a style named Helpshift.Theme.Base and set its parent to your custom helpshift theme.

For example:

You can give the Material look and feel of your app to Helpshift SDK by customizing very few attributes as follows:

<style name="MyCustomHelpshiftTheme" parent="Helpshift.Theme.Light.DarkActionBar">
    <item name="colorAccent">@color/your_custom_color</item>
    <item name="colorPrimary">@color/your_custom_color</item>
    <item name="colorPrimaryDark">@color/your_custom_color</item>
</style>

<style name="Helpshift.Theme.Base" parent="MyCustomHelpshiftTheme"/>

You can customize Android's styleable attributes along with Helpshift's styleable attributes.

Helpshift styleable attributes

Field Summary
colorPrimary The primary branding color for the app.
colorPrimaryDark Dark variant of the primary branding color.
colorAccent Bright complement to the primary branding color.
titleTextColor Color of the Toolbar title string.
navigationIcon Drawable to use for the navigation button located at the start of the Toolbar (back button).
homeAsUpIndicator Drawable to use for the 'home as up' (back button when SearchView is expanded) indicator.
android:windowBackground Drawable to use as the overall window background.
android:textColorPrimary The most prominent text color.
android:textColorPrimaryInverse Primary inverse text color, useful for inverted backgrounds.
android:textColorSecondary Secondary text color.
android:textColorSecondaryInverse Secondary inverse text color, useful for inverted backgrounds.
android:textColorHint Color of hint text (displayed when the field is empty).
hs__chatBubbleUserText Color of user text in conversation.
hs__chatBubbleUserLink Color of links in user's text in conversation.
hs__chatBubbleUserBackground Drawable to use as background for user content in the conversation.
hs__chatBubbleUserBackgroundColor Color applied to the drawable of hs__chatBubbleUserBackground
hs__chatBubbleAdminText Color of admin text in conversation.
hs__chatBubbleAdminLink Color of links in admin's text in conversation.
hs__chatBubbleAdminBackground Drawable to use as background for admin content in the conversation.
hs__chatBubbleAdminBackgroundColor Color applied to the drawable of hs__chatBubbleAdminBackground
hs__composeBackgroundColor Color of the active send button on conversation screen.
hs__tabletConversationContainerBackgroundColor Color used as background for Tablets
hs__attachmentBackgroundColor Color used as background for attachment meta data info while filing new issue.
hs__separatorColor Color of horizontal or vertical separators in the SDK.
hs__searchHighlightColor Color the highlighted text in search results.
hs__inboxTitleTextColor Color of title text of a message in campaigns inbox list.
hs__inboxTitleUnreadTextColor Color of title text of a message in campaign inbox list when message is unread.
hs__inboxTimeStampTextColor Color of message time stamp text in campaigns inbox list.
hs__inboxTimeStampUnreadTextColor Color of meesage time stamp text in campaign inbox list when message is unread.
hs__inboxBodyTextColor Color of body text of a message in campaign inbox list.
hs__inboxSwipeToDeleteBackgroundColor Background color of message in campaign list when it is being swiped for deletion.
hs__inboxSwipeToDeleteIconColor Color of delete icon which is displayed when user is swiping a campaign message for deletion.
hs__inboxIconBackgroundColor Background color of default icon image of a message (Displayed when icon image is not available).
hs__inboxSeparatorColor Color of horizontal or vertical separators in campaigns inbox.

Styleable attributes in action

The following illustrates use of these styleable attributes over Helpshift SDK's UI:

hs__tabletConversationContainerBackgroundColor is used only on tablets, to surround the conversation card.

Orientation support

By default, the Android SDK will obey the orientation of the device. If the device rotates to landscape mode, the SDK will update its UI to landscape orientation. Rotating back to portrait mode will bring the UI back to portrait orientation.

Lock the Helpshift SDK window to landscape/portrait mode :

Use the following solution to lock the Helpshift SDK window to landscape/portrait mode, irrespective of the app.

If you are using gradle :

Add the Helpshift activity to your app's AndroidManifest.xml file with the attribute android:screenOrientation="landscape" or android:screenOrientation="portrait" as given below.

<activity
    android:name="com.helpshift.support.activities.ParentActivity"
    android:theme="@style/Helpshift.Theme.Activity"
    android:screenOrientation="landscape" />

This will merge the screenOrientation attribute to the activity in Helpshift's AndroidManifest.xml file.

If you are using ant build / Eclipse based project:

Locate the AndroidManifest.xml file in Helpshift project and add attribute android:screenOrientation="landscape" or android:screenOrientation="portrait" to Helpshift's ParentActivity in AndroidManifest.xml file.