{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Custom Theming","type":"basic","slug":"custom-theming-the-pulsate-sdk-1","excerpt":"","body":"You can very easily customise the appearance of all  Pulsate SDK's UI so it fits your needs. You can change colors of all elements and the content of texts.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Color Configuration\"\n}\n[/block]\nYou can change colors by using the the Android *color.xml*.\n\nList of all changeable colors:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!--   Used for the status bar -->\\n<color name=\\\"colorPrimaryDark\\\">#303F9F</color>\\n<!--   A secondary color for fabs, progress bars -->\\n<color name=\\\"colorAccent\\\">#007aff</color>\\n\\n<color name=\\\"pulsate_toolbar_ripple\\\">#88007aff</color>\\n<color name=\\\"pulsate_card_ripple\\\">#88007aff</color>\\n<color name=\\\"pulsate_in_app_ripple\\\">#88007aff</color>\\n<color name=\\\"pulsate_back_card_ripple\\\">#88E5E5E5</color>\\n<color name=\\\"pulsate_fab_ripple\\\">#88E5E5E5</color>\\n<color name=\\\"pulsate_top_nav_bar_background_color\\\">#FAFAFA</color>\\n<color name=\\\"pulsate_top_nav_bar_title_color\\\">#4b4b4b</color>\\n<color name=\\\"pulsate_back_button_color\\\">#00000000</color>\\n<color name=\\\"pulsate_close_button_color\\\">#00000000</color>\\n<color name=\\\"pulsate_no_internet_text_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_no_internet_background_color\\\">#ff303030</color>\\n\\n<color name=\\\"pulsate_feed_empty_title_text_color\\\">#ff000000</color>\\n<color name=\\\"pulsate_feed_empty_message_text_color\\\">#88000000</color>\\n\\n<color name=\\\"pulsate_new_cards_background_color\\\">#167efb</color>\\n<color name=\\\"pulsate_new_cards_text_color\\\">#FFFFFF</color>\\n\\n<color name=\\\"pulsate_feed_pencil_color\\\">#00000000</color>\\n<color name=\\\"pulsate_feed_background_color\\\">#EEEEEE</color>\\n\\n<color name=\\\"pulsate_date_card_background_color\\\">#f7f7fa</color>\\n\\n<color name=\\\"pulsate_card_delete_icon_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_card_delete_icon_background_color\\\">#bbbbbb</color>\\n\\n<color name=\\\"pulsate_card_text_color\\\">#303030</color>\\n<color name=\\\"pulsate_card_background_color\\\">#ffffff</color>\\n<color name=\\\"pulsate_card_admin_name_text_color\\\">#4b4b4b</color>\\n<color name=\\\"pulsate_card_admin_title_text_color\\\">#cccccc</color>\\n<color name=\\\"pulsate_card_active_right_button_text_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_card_inactive_right_button_text_color\\\">#acacac</color>\\n<color name=\\\"pulsate_card_button_border_color\\\">#eeeeee</color>\\n<color name=\\\"pulsate_card_personal_message_border_color\\\">#88e0e0e0</color>\\n\\n<color name=\\\"pulsate_card_reply_text_color\\\">#acacac</color>\\n<color name=\\\"pulsate_thread_card_new_message_text_color\\\">#0c7aff</color>\\n\\n<color name=\\\"pulsate_thread_card_user_bubble_color\\\">#00000000</color>\\n<color name=\\\"pulsate_thread_card_user_bubble_text_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_thread_card_user_bubble_date_color\\\">#a5c7ff</color>\\n\\n<color name=\\\"pulsate_thread_card_admin_bubble_color\\\">#00000000</color>\\n<color name=\\\"pulsate_thread_card_admin_bubble_text_color\\\">#000000</color>\\n<color name=\\\"pulsate_thread_card_admin_bubble_date_color\\\">#9f9f9f</color>\\n\\n<color name=\\\"pulsate_thread_bottom_bar_divider_color\\\">#E0E0E0</color>\\n<color name=\\\"pulsate_thread_send_button_color\\\">#00000000</color>\\n<color name=\\\"pulsate_thread_select_subject_icon_color\\\">#FAFAFA</color>\\n<color name=\\\"pulsate_thread_select_subject_toolbar_text_color\\\">#4b4b4b</color>\\n<color name=\\\"pulsate_thread_select_subject_toolbar_background_color\\\">#FAFAFA</color>\\n<color name=\\\"pulsate_thread_select_subject_dropdown_text_color\\\">#4b4b4b</color>\\n<color name=\\\"pulsate_thread_select_subject_dropdown_background_color\\\">#FAFAFA</color>\\n\\n<color name=\\\"pulsate_thread_message_other_subject_toolbar_color\\\">#FAFAFA</color>\\n<color name=\\\"pulsate_thread_message_other_subject_text_color\\\">#4b4b4b</color>\\n<color name=\\\"pulsate_thread_message_other_subject_hint_color\\\">#4b4b4b</color>\\n\\n<color name=\\\"pulsate_thread_background_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_thread_message_background_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_thread_message_text_color\\\">#000000</color>\\n<color name=\\\"pulsate_thread_message_hint_color\\\">#88000000</color>\\n<color name=\\\"pulsate_thread_sending_background_color\\\">#fffcfcfc</color>\\n<color name=\\\"pulsate_thread_sending_text_color\\\">#4b4b4b</color>\\n\\n<color name=\\\"pulsate_user_no_image_background_color\\\">#cccccc</color>\\n<color name=\\\"pulsate_user_no_image_text_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_admin_no_image_background_color\\\">#03a9f4</color>\\n<color name=\\\"pulsate_admin_no_image_text_color\\\">#FFFFFF</color>\\n\\n<color name=\\\"pulsate_card_back_reply_icon_color\\\">#007aff</color>\\n<color name=\\\"pulsate_card_back_button_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_card_back_button_text_color\\\">#FAFAFA</color>\\n<color name=\\\"pulsate_card_back_text_color\\\">#000000</color>\\n<color name=\\\"pulsate_card_back_table_label_text_color\\\">#888888</color>\\n<color name=\\\"pulsate_card_back_table_value_text_color\\\">#000000</color>\\n<color name=\\\"pulsate_card_back_background_color\\\">#FFFFFF</color>\\n\\n<color name=\\\"pulsate_small_in_app_message_background_color\\\">#EEEEEE</color>\\n<color name=\\\"pulsate_small_in_app_message_text_color\\\">#000000</color>\\n\\n<color name=\\\"pulsate_big_in_app_message_background_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_big_in_app_message_text_color\\\">#000000</color>\\n<color name=\\\"pulsate_big_in_app_left_button_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_big_in_app_left_button_text_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_big_in_app_right_button_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_big_in_app_right_button_text_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_big_in_app_single_button_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_big_in_app_single_button_text_color\\\">#FFFFFF</color>\\n\\n<color name=\\\"pulsate_anonymous_inbox_stroke_color\\\">#000000</color>\\n<color name=\\\"pulsate_anonymous_inbox_background_color\\\">#EEEEEE</color>\\n<color name=\\\"pulsate_anonymous_inbox_icon_color\\\">#000000</color>\\n\\n<color name=\\\"pulsate_anonymous_talk_background_color\\\">#0d7aff</color>\\n<color name=\\\"pulsate_anonymous_talk_icon_color\\\">#FFFFFF</color>\",\n      \"language\": \"xml\"\n    }\n  ]\n}\n[/block]\nTo 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\"*.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<color name=\\\"pulsate_top_nav_bar_background_color\\\">#000000</color>\",\n      \"language\": \"xml\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Font Customization\"\n}\n[/block]\nTo change the fonts that are used in the Pulsate Inbox Developers need to take 3 steps. \n1. Add your fonts to the res/font directory. \n2. In your styles.xml override the PulsateInboxTheme style\n3. Add \"*android:fontFamily*\" and \"*fontFamily*\" and set the fonts you want to use\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// 1. Add your fonts to res/font\\n// 2. Create new style called PulsateInboxTheme\\n// 3. Replace \\\"font_name\\\" with the real name of your font\\n<style name=\\\"PulsateInboxTheme\\\" parent=\\\"Theme.AppCompat.Light.NoActionBar\\\">\\n        <item name=\\\"colorPrimary\\\">:::at:::color/colorPrimary</item>\\n        <item name=\\\"colorPrimaryDark\\\">@color/colorPrimaryDark</item>\\n        <item name=\\\"colorAccent\\\">@color/colorAccent</item>\\n        <item name=\\\"colorControlHighlight\\\">@color/pulsate_toolbar_ripple</item>\\n        <item name=\\\"android:fontFamily\\\">@font/font_name</item>\\n        <item name=\\\"fontFamily\\\">@font/font_name</item>\\n</style>\",\n      \"language\": \"xml\",\n      \"name\": \"styles.xml\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Customising the Push Notification Icon\"\n}\n[/block]\nIf you want to set a new icon for notifications you will need to create two drawable called - \"*ic_notification*\" and \"*ic_notification_large*\". Add these drawables later to your drawable folders in your project. Make sure to add all drawable folders - drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi. drawable-xxxhdpi.\n\nRecommended icon size:\nMDPI - 24 x 24  (drawable-mdpi)\nHDPI - 36 x 36  (drawable-hdpi)\nXHDPI - 48 x 48  (drawable-xhdpi)\nXXHDPI - 72 x 72  (drawable-xxhdpi)\nXXXHDPI - 96 x 96  (drawable-xxxhdpi)","updates":[],"order":5,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5f2ab37baed3cc06e426e3f3","createdAt":"2020-08-05T13:26:19.983Z","user":"57bc3654b9c7f0220009c77b","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"SDK Basic","slug":"sdk-basic","order":2,"from_sync":false,"reference":false,"_id":"5f2ab1e9448d87068b348f9c","createdAt":"2020-08-05T13:19:37.517Z","version":"5e5019b49e8f240011cc6ade","project":"54aa7f773b56130b0056c86e","__v":0},"version":{"version":"2.8","version_clean":"2.8.0","codename":"Android SDK","is_stable":false,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5e5019b49e8f240011cc6a47","55781fe35129590d003ff4f9","55781fe35129590d003ff4fa","5e5019b49e8f240011cc6a48","5e5019b49e8f240011cc6a49","5e5019b49e8f240011cc6a4a","5e5019b49e8f240011cc6a4b","5e5019b49e8f240011cc6a4c","565b66c446118c0d00dcb0bb","56898269f8dc340d00308c13","5e5019b49e8f240011cc6a4d","5e5019b49e8f240011cc6a4e","5c73dd27e8fdc000572a206a","5e5019b49e8f240011cc6a4f","5e501b7e7c8bdc00450ea66a","5e53daa9884b750025b5cad4","5f2ab0dfbf70f7063ad0c4f3","5f2ab1e9448d87068b348f9c","5f2ab1f9c1644603559149ac","5f2ab205bc35e507e8cead35"],"_id":"5e5019b49e8f240011cc6ade","project":"54aa7f773b56130b0056c86e","forked_from":"5e4fbbbda8fb41028f1861fe","__v":6,"createdAt":"2015-06-10T11:30:42.700Z","releaseDate":"2015-06-10T11:30:42.700Z"},"project":"54aa7f773b56130b0056c86e","__v":0,"parentDoc":null}
You can very easily customise the appearance of all Pulsate SDK's UI so it fits your needs. You can change colors of all elements and the content of texts. [block:api-header] { "type": "basic", "title": "Color Configuration" } [/block] You can change colors by using the the Android *color.xml*. List of all changeable colors: [block:code] { "codes": [ { "code": "<!-- Used for the status bar -->\n<color name=\"colorPrimaryDark\">#303F9F</color>\n<!-- A secondary color for fabs, progress bars -->\n<color name=\"colorAccent\">#007aff</color>\n\n<color name=\"pulsate_toolbar_ripple\">#88007aff</color>\n<color name=\"pulsate_card_ripple\">#88007aff</color>\n<color name=\"pulsate_in_app_ripple\">#88007aff</color>\n<color name=\"pulsate_back_card_ripple\">#88E5E5E5</color>\n<color name=\"pulsate_fab_ripple\">#88E5E5E5</color>\n<color name=\"pulsate_top_nav_bar_background_color\">#FAFAFA</color>\n<color name=\"pulsate_top_nav_bar_title_color\">#4b4b4b</color>\n<color name=\"pulsate_back_button_color\">#00000000</color>\n<color name=\"pulsate_close_button_color\">#00000000</color>\n<color name=\"pulsate_no_internet_text_color\">#FFFFFF</color>\n<color name=\"pulsate_no_internet_background_color\">#ff303030</color>\n\n<color name=\"pulsate_feed_empty_title_text_color\">#ff000000</color>\n<color name=\"pulsate_feed_empty_message_text_color\">#88000000</color>\n\n<color name=\"pulsate_new_cards_background_color\">#167efb</color>\n<color name=\"pulsate_new_cards_text_color\">#FFFFFF</color>\n\n<color name=\"pulsate_feed_pencil_color\">#00000000</color>\n<color name=\"pulsate_feed_background_color\">#EEEEEE</color>\n\n<color name=\"pulsate_date_card_background_color\">#f7f7fa</color>\n\n<color name=\"pulsate_card_delete_icon_color\">#FFFFFF</color>\n<color name=\"pulsate_card_delete_icon_background_color\">#bbbbbb</color>\n\n<color name=\"pulsate_card_text_color\">#303030</color>\n<color name=\"pulsate_card_background_color\">#ffffff</color>\n<color name=\"pulsate_card_admin_name_text_color\">#4b4b4b</color>\n<color name=\"pulsate_card_admin_title_text_color\">#cccccc</color>\n<color name=\"pulsate_card_active_right_button_text_color\">#0d7aff</color>\n<color name=\"pulsate_card_inactive_right_button_text_color\">#acacac</color>\n<color name=\"pulsate_card_button_border_color\">#eeeeee</color>\n<color name=\"pulsate_card_personal_message_border_color\">#88e0e0e0</color>\n\n<color name=\"pulsate_card_reply_text_color\">#acacac</color>\n<color name=\"pulsate_thread_card_new_message_text_color\">#0c7aff</color>\n\n<color name=\"pulsate_thread_card_user_bubble_color\">#00000000</color>\n<color name=\"pulsate_thread_card_user_bubble_text_color\">#FFFFFF</color>\n<color name=\"pulsate_thread_card_user_bubble_date_color\">#a5c7ff</color>\n\n<color name=\"pulsate_thread_card_admin_bubble_color\">#00000000</color>\n<color name=\"pulsate_thread_card_admin_bubble_text_color\">#000000</color>\n<color name=\"pulsate_thread_card_admin_bubble_date_color\">#9f9f9f</color>\n\n<color name=\"pulsate_thread_bottom_bar_divider_color\">#E0E0E0</color>\n<color name=\"pulsate_thread_send_button_color\">#00000000</color>\n<color name=\"pulsate_thread_select_subject_icon_color\">#FAFAFA</color>\n<color name=\"pulsate_thread_select_subject_toolbar_text_color\">#4b4b4b</color>\n<color name=\"pulsate_thread_select_subject_toolbar_background_color\">#FAFAFA</color>\n<color name=\"pulsate_thread_select_subject_dropdown_text_color\">#4b4b4b</color>\n<color name=\"pulsate_thread_select_subject_dropdown_background_color\">#FAFAFA</color>\n\n<color name=\"pulsate_thread_message_other_subject_toolbar_color\">#FAFAFA</color>\n<color name=\"pulsate_thread_message_other_subject_text_color\">#4b4b4b</color>\n<color name=\"pulsate_thread_message_other_subject_hint_color\">#4b4b4b</color>\n\n<color name=\"pulsate_thread_background_color\">#FFFFFF</color>\n<color name=\"pulsate_thread_message_background_color\">#FFFFFF</color>\n<color name=\"pulsate_thread_message_text_color\">#000000</color>\n<color name=\"pulsate_thread_message_hint_color\">#88000000</color>\n<color name=\"pulsate_thread_sending_background_color\">#fffcfcfc</color>\n<color name=\"pulsate_thread_sending_text_color\">#4b4b4b</color>\n\n<color name=\"pulsate_user_no_image_background_color\">#cccccc</color>\n<color name=\"pulsate_user_no_image_text_color\">#FFFFFF</color>\n<color name=\"pulsate_admin_no_image_background_color\">#03a9f4</color>\n<color name=\"pulsate_admin_no_image_text_color\">#FFFFFF</color>\n\n<color name=\"pulsate_card_back_reply_icon_color\">#007aff</color>\n<color name=\"pulsate_card_back_button_color\">#0d7aff</color>\n<color name=\"pulsate_card_back_button_text_color\">#FAFAFA</color>\n<color name=\"pulsate_card_back_text_color\">#000000</color>\n<color name=\"pulsate_card_back_table_label_text_color\">#888888</color>\n<color name=\"pulsate_card_back_table_value_text_color\">#000000</color>\n<color name=\"pulsate_card_back_background_color\">#FFFFFF</color>\n\n<color name=\"pulsate_small_in_app_message_background_color\">#EEEEEE</color>\n<color name=\"pulsate_small_in_app_message_text_color\">#000000</color>\n\n<color name=\"pulsate_big_in_app_message_background_color\">#FFFFFF</color>\n<color name=\"pulsate_big_in_app_message_text_color\">#000000</color>\n<color name=\"pulsate_big_in_app_left_button_color\">#0d7aff</color>\n<color name=\"pulsate_big_in_app_left_button_text_color\">#FFFFFF</color>\n<color name=\"pulsate_big_in_app_right_button_color\">#0d7aff</color>\n<color name=\"pulsate_big_in_app_right_button_text_color\">#FFFFFF</color>\n<color name=\"pulsate_big_in_app_single_button_color\">#0d7aff</color>\n<color name=\"pulsate_big_in_app_single_button_text_color\">#FFFFFF</color>\n\n<color name=\"pulsate_anonymous_inbox_stroke_color\">#000000</color>\n<color name=\"pulsate_anonymous_inbox_background_color\">#EEEEEE</color>\n<color name=\"pulsate_anonymous_inbox_icon_color\">#000000</color>\n\n<color name=\"pulsate_anonymous_talk_background_color\">#0d7aff</color>\n<color name=\"pulsate_anonymous_talk_icon_color\">#FFFFFF</color>", "language": "xml" } ] } [/block] 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"*. [block:code] { "codes": [ { "code": "<color name=\"pulsate_top_nav_bar_background_color\">#000000</color>", "language": "xml" } ] } [/block] [block:api-header] { "title": "Font Customization" } [/block] 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 [block:code] { "codes": [ { "code": "// 1. Add your fonts to res/font\n// 2. Create new style called PulsateInboxTheme\n// 3. Replace \"font_name\" with the real name of your font\n<style name=\"PulsateInboxTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">\n <item name=\"colorPrimary\">@color/colorPrimary</item>\n <item name=\"colorPrimaryDark\">@color/colorPrimaryDark</item>\n <item name=\"colorAccent\">@color/colorAccent</item>\n <item name=\"colorControlHighlight\">@color/pulsate_toolbar_ripple</item>\n <item name=\"android:fontFamily\">@font/font_name</item>\n <item name=\"fontFamily\">@font/font_name</item>\n</style>", "language": "xml", "name": "styles.xml" } ] } [/block] [block:api-header] { "type": "basic", "title": "Customising the Push Notification Icon" } [/block] If you want to set a new icon for notifications you will need to create two drawable called - "*ic_notification*" and "*ic_notification_large*". Add these drawables later to your drawable folders in your project. Make sure to add all drawable folders - drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi. drawable-xxxhdpi. Recommended icon size: MDPI - 24 x 24 (drawable-mdpi) HDPI - 36 x 36 (drawable-hdpi) XHDPI - 48 x 48 (drawable-xhdpi) XXHDPI - 72 x 72 (drawable-xxhdpi) XXXHDPI - 96 x 96 (drawable-xxxhdpi)