{"_id":"56333cab9c607719001b85e4","user":"54aa7f3f9bb00c0b00cb899b","githubsync":"","version":{"_id":"55781fe25129590d003ff4f7","project":"54aa7f773b56130b0056c86e","forked_from":"54aa7f773b56130b0056c871","__v":6,"createdAt":"2015-06-10T11:30:42.700Z","releaseDate":"2015-06-10T11:30:42.700Z","categories":["55781fe35129590d003ff4f8","55781fe35129590d003ff4f9","55781fe35129590d003ff4fa","55781fe35129590d003ff4fb","55781fe35129590d003ff4fc","55781fe35129590d003ff4fd","55781fe35129590d003ff4fe","564bbc7e8841060d00abb2ee","565b66c446118c0d00dcb0bb","56898269f8dc340d00308c13","582318b23b961a0f009516a1","594a848c9f4771001a43c959"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Developers","version_clean":"2.0.0","version":"2.0"},"category":{"_id":"55781fe35129590d003ff4fc","pages":["55781fe45129590d003ff50d","55781fe45129590d003ff50e","55781fe45129590d003ff50f","55781fe45129590d003ff510","55781fe45129590d003ff511","55781fe45129590d003ff512","55781fe45129590d003ff513","55781fe45129590d003ff514","55781fe45129590d003ff515","55781fe45129590d003ff516","55f692b4fe4cce21005c78b0","55f7e91e60cc850d008a7a45","56333cab9c607719001b85e4","564462ed9ce94c0d00068ce9","564f54fa48a1df1700836653","565ee9e7413e06170093dde0","5661a8fdb401c70d00dde6fa","5671348860c8e70d006c96a1","568ce9707d3bf02300aa7734"],"version":"55781fe25129590d003ff4f7","__v":10,"project":"54aa7f773b56130b0056c86e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-01-05T12:44:00.338Z","from_sync":false,"order":4,"slug":"android-sdk","title":"Android SDK"},"parentDoc":null,"project":"54aa7f773b56130b0056c86e","__v":12,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-30T09:47:23.374Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":17,"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\": \"<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_dropdown_background_color\\\">#FFFFFF</color>\\n<color name=\\\"pulsate_thread_message_subject_hint_color\\\">#4b4b4b</color>\\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\\\">#ff303030</color>\\n<color name=\\\"pulsate_small_in_app_message_text_color\\\">#FFFFFF</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]\nChanging *\"<color name=\"colorAccent\">#007aff</color>\"* changes the color of the progress bars and floating action buttons in the SDK.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Fragments\"\n}\n[/block]\nIf you are using fragments changing  *\"<color name=\"colorAccent\">#007aff</color>\"* wont change the color of the progress bars and floating action buttons in the SDK. To change the colors you must also create a new style in your \"*styles.xml*\" and assign the style to your \"*PulsateInboxActivity*\". \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<style name=\\\"AppTheme\\\" parent=\\\"Theme.AppCompat\\\">\\n    <item name=\\\"colorAccent\\\">:::at:::color/colorAccent</item>\\n</style>\",\n      \"language\": \"xml\",\n      \"name\": \"styles.xml\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<activity\\n    android:theme=\\\"@style/AppTheme\\\"\\n    android:name=\\\".activities.PulsateInboxActivity\\\" />\",\n      \"language\": \"xml\",\n      \"name\": \"androidManifest.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)","excerpt":"","slug":"custom-theming-the-pulsate-sdk","type":"basic","title":"Custom Theming the Pulsate SDK"}

Custom Theming the Pulsate SDK


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": "<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_dropdown_background_color\">#FFFFFF</color>\n<color name=\"pulsate_thread_message_subject_hint_color\">#4b4b4b</color>\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\">#ff303030</color>\n<color name=\"pulsate_small_in_app_message_text_color\">#FFFFFF</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] Changing *"<color name="colorAccent">#007aff</color>"* changes the color of the progress bars and floating action buttons in the SDK. [block:api-header] { "type": "basic", "title": "Fragments" } [/block] If you are using fragments changing *"<color name="colorAccent">#007aff</color>"* wont change the color of the progress bars and floating action buttons in the SDK. To change the colors you must also create a new style in your "*styles.xml*" and assign the style to your "*PulsateInboxActivity*". [block:code] { "codes": [ { "code": "<style name=\"AppTheme\" parent=\"Theme.AppCompat\">\n <item name=\"colorAccent\">@color/colorAccent</item>\n</style>", "language": "xml", "name": "styles.xml" } ] } [/block] [block:code] { "codes": [ { "code": "<activity\n android:theme=\"@style/AppTheme\"\n android:name=\".activities.PulsateInboxActivity\" />", "language": "xml", "name": "androidManifest.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)