iOS SDKAndroid SDKPulsate APISDK API

Theming

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.

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>

    <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_card_reply_text_color">#acacac</color>
    <color name="pulsate_thread_card_new_message_text_color">#0c7aff</color>

    <color name="pulsate_thread_card_user_bubble_color">#00000000</color>
    <color name="pulsate_thread_card_user_bubble_text_color">#FFFFFF</color>
    <color name="pulsate_thread_card_user_bubble_date_color">#a5c7ff</color>

    <color name="pulsate_thread_card_admin_bubble_color">#00000000</color>
    <color name="pulsate_thread_card_admin_bubble_text_color">#000000</color>
    <color name="pulsate_thread_card_admin_bubble_date_color">#9f9f9f</color>

    <color name="pulsate_thread_bottom_bar_divider_color">#E0E0E0</color>
    <color name="pulsate_thread_send_button_color">#00000000</color>
    <color name="pulsate_thread_select_subject_icon_color">#FAFAFA</color>
    <color name="pulsate_thread_select_subject_toolbar_text_color">#4b4b4b</color>
    <color name="pulsate_thread_select_subject_toolbar_background_color">#FAFAFA</color>
    <color name="pulsate_thread_select_subject_dropdown_text_color">#4b4b4b</color>
    <color name="pulsate_thread_select_subject_dropdown_background_color">#FAFAFA</color>

    <color name="pulsate_thread_message_other_subject_toolbar_color">#FAFAFA</color>
    <color name="pulsate_thread_message_other_subject_text_color">#4b4b4b</color>
    <color name="pulsate_thread_message_other_subject_hint_color">#4b4b4b</color>

    <color name="pulsate_thread_background_color">#FFFFFF</color>
    <color name="pulsate_thread_message_background_color">#FFFFFF</color>
    <color name="pulsate_thread_message_text_color">#000000</color>
    <color name="pulsate_thread_message_hint_color">#88000000</color>
    <color name="pulsate_thread_sending_background_color">#fffcfcfc</color>
    <color name="pulsate_thread_sending_text_color">#4b4b4b</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_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>


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

    <color name="pulsate_anonymous_talk_background_color">#0d7aff</color>
    <color name="pulsate_anonymous_talk_icon_color">#FFFFFF</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.

  1. Add your fonts to the res/font directory.
  2. In your styles.xml override the PulsateInboxTheme style
  3. 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>