[GUIDE][THEME] Theming 3rd party apps

Introduction:
Hey guys,
In this thread I'd like to teach you how to theme third party apps. I show you the basic stuff as Statusbar, Icons and so on.
I will add more app with the time. I don't show you how to decompile apps, how they are build or other stuff. For these things, we have other threads.
Moreover, I won't add pictures because everbody should understand which colors/icons I mean. If you're confused, just ask in this thread.
These apps are just examples, so you should get a overview of theming 3rd pary apps. :)

General:
Theming 3rd party apps works actually the same way as theming system apps.

1. Download your apk


2. Decompile it


3. Create a folder with the app's package name in assets/overlays


4. Add your xml, png etc. files into this folder

Apps to theme:

• WhatsApp


• Google+


• Tapatalk


• Soundcloud


• Twitter


• Google Inbox

Theming:

WhatsApp

Actionbar color:

Code:

---

<color name="primary">Your_Color</color>

---

Statusbar color:

Code:

---

<color name="primary_dark">Your_Color</color>

---

Group admin color:

Code:

---

<color name="group_admin">Your_Color</color>

---

"Send" icon bg color:

Code:

---

<color name="accent">Your_Color</color>

---

"Read" icons in drawable-xxhdpi:

Code:

---

message_got_read_receipt_from_target.png
message_got_read_receipt_from_target_onmedia.png
message_got_receipt_from_server.png
message_got_receipt_from_server_onmedia.png
message_got_receipt_from_target.png
message_got_receipt_from_target_onmedia.png
msg_status_client_read.png
msg_status_client_received.png
msg_status_server_receive.png

---

Icons in the header section in drawable-xxhdpi:

Code:

---

abc_ic_menu_moreoverflow_mtrl_alpha.png
ic_action_more.png
ic_drawer_24dp.png
ic_menu_moreoverflow.png
ic_menu_moreoverflow_mtrl_alpha.png
ic_more_shadow.png
ic_action_add_person.png
ic_action_call.png
ic_action_new_call.png
ic_action_attach.png
ic_action_compose.png
ic_action_search.png

---

Unread message icon in the chat overview in drawable-xxhdpi:

Code:

---

input_circle_normal.png
input_circle_pressed.png

---

"Send" icon inside a chat in drawable-xxhdpi:

Code:

---

input_send.png

---

Google+

Actionbar color:

Code:

---

<color name="action_bar_background">Your_Color</color>

---

Statusbar color:

Code:

---

<color name="status_bar_background">Your_Color</color>

---

Compose button bg:

Code:

---

<color name="quantum_googred500">Your_Color</color>

---

Icons in the header section in drawable-xxhdpi:

Code:

---

ic_people_outline_white_20.png
quantum_ic_notifications_none_white_24.png

---

"Compose" icon in drawable-xxhdpi:

Code:

---

quantum_ic_create_white_24.png

---

"Comment/Share" icons on posts in drawable-xxhdpi:

Code:

---

quantum_ic_share_black_24.png
quantum_ic_insert_comment_black_24.png

---

Tapatalk

Actionbar color:

Code:

---

<color name="primary_dark_material_light">Your_Color</color>
<color name="primary_material_light">Your_Color</color>
<color name="primary_color">Your_Color</color>

actionbar_bg.9.png
actionbar_dark.png
actionbar_dark_bg.9.png
actionbar_orange.9.png

---

Statusbarcolor:

Code:

---

<color name="primary_dark_material_dark">Your_Color</color>
<color name="primary_material_dark">Your_Color</color>
<color name="primary_color_dark">Your_Color</color>

---

"Compose" button in drawable-xxhdpi:

Code:

---

bubble_edit_dark.png
bubble_rename_dark.png
new_topic.png

---

Soundcloud

Actionbar color:

Code:

---

<color name="primary">Your_Color</color>

---

Statusbar color:

Code:

---

<color name="primary_dark">Your_Color</color>

---

Progress wave color (played time):

Code:

---

<color name="wave_above">Your_Color</color>
<color name="wave_below">Your_Color</color>

---

Progress wave color (remainig time):

Code:

---

<color name="wave_progress_below">Your_Color</color>
<color name="wave_progress_end">Your_Color</color>
<color name="wave_progress_start">Your_Color</color>

---

Icons in sidebar in drawable-xhdpi:

Code:

---

drawer_explore.png
drawer_explore_active.png
drawer_likes.png
drawer_likes_active.png
drawer_playlists.png
drawer_playlists_active.png
drawer_stream.png
drawer_stream_active.png

---

Like buttons in drawable-xxhdpi:

Code:

---

ic_btn_like.png
ic_btn_liked.png
stats_likes_grey.png
stats_likes_orange.png

---

Twitter

Actionbar color:

Code:

---

<color name="twitter_blue">Your_Color</color>
<color name="light_blue">Your_Color</color>

---

Statusbar color:

Code:

---

<color name="dark_blue">Your_Color</color>

---

Text links color:

Code:

---

<color name="text_link">Your_Color</color>

---

Icons in header section in drawable-xxhdpi:

Code:

---

ic_title_highlights_default.png
ic_title_logo_default.png
ic_title_messages_default.png
ic_title_notifications_default.png
ic_title_overflow_default.png
ic_title_recent_logo.png
ic_title_search.png
ic_title_search_default.png

---

Google Inbox

Actionbar color:

Code:

---

<color name="primary_material_dark">Your_Color</color>
<color name="primary_material_light">Your_Color</color>
<color name="primary_dark_material_dark">Your_Color</color>
<color name="primary_dark_material_light">Your_Color</color>
<color name="bt_done_green">Your_Color</color>
<color name="bt_container_blue">Your_Color</color>
<color name="bt_snooze_yellow">Your_Colorr</color>

---

Statusbar color:

Code:

---

<color name="bt_status_bar_brick">Your_Color</color>
<color name="bt_status_bar_default">Your_Color</color>
<color name="bt_status_bar_done">Your_Color</color>
<color name="bt_status_bar_inbox">Your_Color</color>
<color name="bt_status_bar_snoozed">Your_Color</color>
<color name="bt_status_bar_white">Your_Color</color>

---

"Action done" bg color:

Code:

---

<color name="toastbar-background">Your_Color</color>

---

"Compose" icon bg color in drawable-xxhdpi:

Code:

---

bt_fab_red.png
bt_fab_speeddial.png
bt_fab_speeddial_pressed.png

---

"Compose" icon in drawable-xxhdpi:

Code:

---

bt_ic_add_white_24dp.png

---

Do you want to have any app inside this tutorial? Just ask for it. :)
Greetz Lars