You can very easily customise the appearance of all Pulsate SDK's UI so it fits your needs.
You can change colors, the displayed text and fonts.
Pulsate SDK 4.7.0
Pulsate SDK 4.7.0 now uses a Web Feed, Custom Theming is no longer available on the App side. When creating campaigns in the Campaign Builder you can specify the color of the buttons and text in Feed Posts. We do plan to add more Custom Theming in future releases if there is demand for it.
In Apps can still have custom themed directly from the SDK using the colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="pulsate_small_in_app_message_background_color">#EEEEEE</color>
<color name="pulsate_small_in_app_message_text_color">#000000</color>
<color name="pulsate_big_in_app_message_background_color">#FFFFFF</color>
<color name="pulsate_big_in_app_message_text_color">#000000</color>
<color name="pulsate_big_in_app_left_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_left_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_right_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_right_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_single_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_single_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_location_text_color">#8a000000</color>
<color name="pulsate_big_in_app_location_opt_in_btn_background">#0d7aff</color>
<color name="pulsate_big_in_app_location_not_now_btn_background">#FFFFFF</color>
<color name="pulsate_big_in_app_location_opt_in_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_location_not_now_text_color">#BBBBBB</color>
<color name="pulsate_big_in_app_location_opt_in_ripple">#BBBBBB</color>
<color name="pulsate_big_in_app_location_not_now_ripple">#BBBBBB</color>
</resources>
Color Configuration
You can change colors by using the the Android color.xml.
List of all changeable colors:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#007aff</color>
<!-- START NOT AVAILABLE IN SDKS ABOVE 4.7.+ -->
<color name="pulsate_toolbar_ripple">#88007aff</color>
<color name="pulsate_card_ripple">#88007aff</color>
<color name="pulsate_in_app_ripple">#88007aff</color>
<color name="pulsate_back_card_ripple">#88E5E5E5</color>
<color name="pulsate_fab_ripple">#88E5E5E5</color>
<color name="pulsate_top_nav_bar_background_color">#FAFAFA</color>
<color name="pulsate_top_nav_bar_title_color">#4b4b4b</color>
<color name="pulsate_back_button_color">#00000000</color>
<color name="pulsate_close_button_color">#00000000</color>
<color name="pulsate_no_internet_text_color">#FFFFFF</color>
<color name="pulsate_no_internet_background_color">#ff303030</color>
<color name="pulsate_feed_empty_title_text_color">#ff000000</color>
<color name="pulsate_feed_empty_message_text_color">#88000000</color>
<color name="pulsate_new_cards_background_color">#167efb</color>
<color name="pulsate_new_cards_text_color">#FFFFFF</color>
<color name="pulsate_feed_pencil_color">#00000000</color>
<color name="pulsate_feed_background_color">#EEEEEE</color>
<color name="pulsate_date_card_background_color">#f7f7fa</color>
<color name="pulsate_card_delete_icon_color">#FFFFFF</color>
<color name="pulsate_card_delete_icon_background_color">#bbbbbb</color>
<color name="pulsate_card_text_color">#303030</color>
<color name="pulsate_card_background_color">#ffffff</color>
<color name="pulsate_card_admin_name_text_color">#4b4b4b</color>
<color name="pulsate_card_admin_title_text_color">#cccccc</color>
<color name="pulsate_card_active_right_button_text_color">#0d7aff</color>
<color name="pulsate_card_inactive_right_button_text_color">#acacac</color>
<color name="pulsate_card_personal_message_border_color">#88e0e0e0</color>
<color name="pulsate_card_left_btn_color">#ffffff</color>
<color name="pulsate_card_right_btn_color">#ffffff</color>
<color name="pulsate_card_single_btn_color">#ffffff</color>
<color name="pulsate_card_button_border_color">#eeeeee</color>
<color name="pulsate_user_no_image_background_color">#cccccc</color>
<color name="pulsate_user_no_image_text_color">#FFFFFF</color>
<color name="pulsate_admin_no_image_background_color">#03a9f4</color>
<color name="pulsate_admin_no_image_text_color">#FFFFFF</color>
<color name="pulsate_card_back_reply_icon_color">#007aff</color>
<color name="pulsate_card_back_button_color">#0d7aff</color>
<color name="pulsate_card_back_button_text_color">#FAFAFA</color>
<color name="pulsate_card_back_text_color">#000000</color>
<color name="pulsate_card_back_table_label_text_color">#888888</color>
<color name="pulsate_card_back_table_value_text_color">#000000</color>
<color name="pulsate_card_back_background_color">#FFFFFF</color>
<color name="pulsate_anonymous_inbox_stroke_color">#000000</color>
<color name="pulsate_anonymous_inbox_background_color">#EEEEEE</color>
<color name="pulsate_anonymous_inbox_icon_color">#000000</color>
<!-- END NOT AVAILABLE IN SDKS ABOVE 4.7.+ -->
<color name="pulsate_small_in_app_message_background_color">#EEEEEE</color>
<color name="pulsate_small_in_app_message_text_color">#000000</color>
<color name="pulsate_big_in_app_message_background_color">#FFFFFF</color>
<color name="pulsate_big_in_app_message_text_color">#000000</color>
<color name="pulsate_big_in_app_left_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_left_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_right_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_right_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_single_button_color">#0d7aff</color>
<color name="pulsate_big_in_app_single_button_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_location_text_color">#8a000000</color>
<color name="pulsate_big_in_app_location_opt_in_btn_background">#0d7aff</color>
<color name="pulsate_big_in_app_location_not_now_btn_background">#FFFFFF</color>
<color name="pulsate_big_in_app_location_opt_in_text_color">#FFFFFF</color>
<color name="pulsate_big_in_app_location_not_now_text_color">#BBBBBB</color>
<color name="pulsate_big_in_app_location_opt_in_ripple">#BBBBBB</color>
<color name="pulsate_big_in_app_location_not_now_ripple">#BBBBBB</color>
</resources>
To change the Inbox nav bar color to black all you need to do is find the "pulsate_top_nav_bar_background_color" and change it's value to "#000000".
<color name="pulsate_top_nav_bar_background_color">#000000</color>
Font Customization
To change the font size of the Title in the Toolbar add "20sp" in your dimens.xml file. The default size is "20sp".
To change the fonts that are used in the Pulsate Inbox Developers need to take 3 steps.
- Add your fonts to the res/font directory.
- In your styles.xml override the PulsateInboxTheme style
- Add "android:fontFamily" and "fontFamily" and set the fonts you want to use
// 1. Add your fonts to res/font
// 2. Create new style called PulsateInboxTheme
// 3. Replace "font_name" with the real name of your font
<style name="PulsateInboxTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorControlHighlight">@color/pulsate_toolbar_ripple</item>
<item name="android:fontFamily">@font/font_name</item>
<item name="fontFamily">@font/font_name</item>
</style>