Hi Peeps,
I had to close my thread [APP] ░█░ W H A T S A P P by YORZUA© ░█░ but i don't forget all those who followed me, helped me with their feedbacks, supported me with their good comments and/or donated to me.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The purpose of this thread is not to post my versions/updates of my whatsapp mods but to guide you how to mod every single pixel of the whatsapp.apk and be able to create your own versions.
I will add in the future my mods in packages [ DARK - ICS - RED - W8 - Blossom - Notepad - DARK+ICS - BURNED ] in order to help you updating your favorites mods
First of all, you will need to learn how to decompile / compile / sign the application Whatsapp.apk so for those who have no idea how to : please check my tuto How to decompile/recompile/Sign Whatsapp.apk with my kit made for you
All questions about that part MUST be posted on the relevant thread
You will find the full listing of the files we are working with in this tutorial on the 2nd post _ as the list is quite long, i will keep adding articles ( with clear information and screenshots ) on a daily basis
Let's do it in different chapters ( order of chapters may differ according to feedbacks ) :
I. Intro
II. Drawables
III. Gradients & Selectors
IV. Layout
V. Values & Manifest
VI. Tweaks & Updates
Please read carefully and test/do by yourself before to post in order to keep as clean as possible this interactive thread
Good luck and enjoy the cooking ☺☼♪♫
Index of files
Please find here the full listing of the files you need to change in order to release a whatsapp.apk as i do :
XML's + PNG's + 9.PNG's
\res\drawable-hdpi\
about_logo.png
account_medal.png
account_present.png
add_person_gray.png
add_person_white.png
albumart.png
albumart_small.png
androidface.png
attach_audio.png
attach_contact.png
attach_gallery.png
attach_location.png
attach_location_square.png
attach_video.png
audio_message.png
avatar03.png
avatar_group.png
avatar_group02.png
avatar_self.png
background.jpg
background_landscape.jpg
background_repeat.xml
backpattern.png
backrepeat.xml
blocked_contact.png
blue_button.9.png
blue_button_background.xml
broadcast_cross.png
btn_dropdown.xml
btn_dropdown_normal.png
btn_dropdown_pressed.png
btn_media_next_default.png
btn_media_next_press.png
btn_media_next_selected.png
btn_media_prev_default.png
btn_media_prev_press.png
btn_media_prev_selected.png
btn_share_48.png
btn_show_all_60.png
button_aperture.png
button_attach.png
button_disabled.9.png
button_emoji.png
button_help.png
button_layers.png
button_left.png
button_my_location.png
button_pen.png
button_refresh.png
button_right.png
button_search.png
call.png
camera_crop_height.png
camera_crop_width.png
camera_icon.png
camera_overlay.png
circlepenicon.png
clear.png
clear_search_btn.png
compose.png
contact_by_email.png
contact_lookup_map.png
contactpicker_bar_pattern.png
contactpicker_bar_repeat.xml
contactpicker_button.9.png
contactpicker_button_pressed.9.png
countrypicker_checkmark.png
dark_row.9.png
date_balloon.9.png
div.png
div_small.png
div_vert.png
divider.xml
divider_horizontal_list.png
divider_vertical.png
dropdown_bottom.png
dropdown_middle.png
dropdown_top.png
e001.png
e002.png
e003.png
e004.png
e005.png
e006.png
e007.png
e008.png
e009.png
e00a.png
e00b.png
e00c.png
e00d.png
e00e.png
e00f.png
e010.png
e011.png
e012.png
e013.png
e014.png
e015.png
e016.png
e017.png
e018.png
e019.png
e01a.png
e01b.png
e01c.png
e01d.png
e01e.png
e01f.png
e020.png
e021.png
e022.png
e023.png
e024.png
e025.png
e026.png
e027.png
e028.png
e029.png
e02a.png
e02b.png
e02c.png
e02d.png
e02e.png
e02f.png
e030.png
e031.png
e032.png
e033.png
e034.png
e035.png
e036.png
e037.png
e038.png
e039.png
e03a.png
e03b.png
e03c.png
e03d.png
e03e.png
e03f.png
e040.png
e041.png
e042.png
e043.png
e044.png
e045.png
e046.png
e047.png
e048.png
e049.png
e04a.png
e04b.png
e04c.png
e04d.png
e04e.png
e04f.png
e050.png
e051.png
e052.png
e053.png
e054.png
e055.png
e056.png
e057.png
e058.png
e059.png
e05a.png
e101.png
e102.png
e103.png
e104.png
e105.png
e106.png
e107.png
e108.png
e109.png
e10a.png
e10b.png
e10c.png
e10d.png
e10e.png
e10f.png
e110.png
e111.png
e112.png
e113.png
e114.png
e115.png
e116.png
e117.png
e118.png
e119.png
e11a.png
e11b.png
e11c.png
e11d.png
e11e.png
e11f.png
e120.png
e121.png
e122.png
e123.png
e124.png
e125.png
e126.png
e127.png
e128.png
e129.png
e12a.png
e12b.png
e12c.png
e12d.png
e12e.png
e12f.png
e130.png
e131.png
e132.png
e133.png
e134.png
e135.png
e136.png
e137.png
e138.png
e139.png
e13a.png
e13b.png
e13c.png
e13d.png
e13e.png
e13f.png
e140.png
e141.png
e142.png
e143.png
e144.png
e145.png
e146.png
e147.png
e148.png
e149.png
e14a.png
e14b.png
e14c.png
e14d.png
e14e.png
e14f.png
e150.png
e151.png
e152.png
e153.png
e154.png
e155.png
e156.png
e157.png
e158.png
e159.png
e15a.png
e201.png
e202.png
e203.png
e204.png
e205.png
e206.png
e207.png
e208.png
e209.png
e20a.png
e20b.png
e20c.png
e20d.png
e20e.png
e20f.png
e210.png
e211.png
e212.png
e213.png
e214.png
e215.png
e216.png
e217.png
e218.png
e219.png
e21a.png
e21b.png
e21c.png
e21d.png
e21e.png
e21f.png
e220.png
e221.png
e222.png
e223.png
e224.png
e225.png
e226.png
e227.png
e228.png
e229.png
e22a.png
e22b.png
e22c.png
e22d.png
e22e.png
e22f.png
e230.png
e231.png
e232.png
e233.png
e234.png
e235.png
e236.png
e237.png
e238.png
e239.png
e23a.png
e23b.png
e23c.png
e23d.png
e23e.png
e23f.png
e240.png
e241.png
e242.png
e243.png
e244.png
e245.png
e246.png
e247.png
e248.png
e249.png
e24a.png
e24b.png
e24c.png
e24d.png
e24e.png
e24f.png
e250.png
e251.png
e252.png
e253.png
e301.png
e302.png
e303.png
e304.png
e305.png
e306.png
e307.png
e308.png
e309.png
e30a.png
e30b.png
e30c.png
e30d.png
e30e.png
e30f.png
e310.png
e311.png
e312.png
e313.png
e314.png
e315.png
e316.png
e317.png
e318.png
e319.png
e31a.png
e31b.png
e31c.png
e31d.png
e31e.png
e31f.png
e320.png
e321.png
e322.png
e323.png
e324.png
e325.png
e326.png
e327.png
e328.png
e329.png
e32a.png
e32b.png
e32c.png
e32d.png
e32e.png
e32f.png
e330.png
e331.png
e332.png
e333.png
e334.png
e335.png
e336.png
e337.png
e338.png
e339.png
e33a.png
e33b.png
e33c.png
e33d.png
e33e.png
e33f.png
e340.png
e341.png
e342.png
e343.png
e344.png
e345.png
e346.png
e347.png
e348.png
e349.png
e34a.png
e34b.png
e34c.png
e34d.png
e401.png
e402.png
e403.png
e404.png
e405.png
e406.png
e407.png
e408.png
e409.png
e40a.png
e40b.png
e40c.png
e40d.png
e40e.png
e40f.png
e410.png
e411.png
e412.png
e413.png
e414.png
e415.png
e416.png
e417.png
e418.png
e419.png
e41a.png
e41b.png
e41c.png
e41d.png
e41e.png
e41f.png
e420.png
e421.png
e422.png
e423.png
e424.png
e425.png
e426.png
e427.png
e428.png
e429.png
e42a.png
e42b.png
e42c.png
e42d.png
e42e.png
e42f.png
e430.png
e431.png
e432.png
e433.png
e434.png
e435.png
e436.png
e437.png
e438.png
e439.png
e43a.png
e43b.png
e43c.png
e43d.png
e43e.png
e43f.png
e440.png
e441.png
e442.png
e443.png
e444.png
e445.png
e446.png
e447.png
e448.png
e449.png
e44a.png
e44b.png
e44c.png
e501.png
e502.png
e503.png
e504.png
e505.png
e506.png
e507.png
e508.png
e509.png
e50a.png
e50b.png
e50c.png
e50d.png
e50e.png
e50f.png
e510.png
e511.png
e512.png
e513.png
e514.png
e515.png
e516.png
e517.png
e518.png
e519.png
e51a.png
e51b.png
e51c.png
e51d.png
e51e.png
e51f.png
e520.png
e521.png
e522.png
e523.png
e524.png
e525.png
e526.png
e527.png
e528.png
e529.png
e52a.png
e52b.png
e52c.png
e52d.png
e52e.png
e52f.png
e530.png
e531.png
e532.png
e533.png
e534.png
e535.png
e536.png
e537.png
emoji_bell.png
emoji_bell_green.png
emoji_border.xml
emoji_car.png
emoji_car_green.png
emoji_flower.png
emoji_flower_green.png
emoji_group_bottom.xml
emoji_group_bottom_selected.xml
emoji_group_top.xml
emoji_group_top_selected.xml
emoji_smile.png
emoji_smile_green.png
emoji_triangle.png
envelope.png
expander_close.png
expander_open.png
gradient.xml
gray_bubble.9.png
gray_bubble_body.9.png
gray_bubble_bottom.9.png
gray_bubble_top.9.png
green_bubble.9.png
group_info_chevron_right.png
groups.png
header_grey_gradient.xml
header_repeat.xml
ic_button_add.png
ic_menu_add.png
ic_menu_attach.png
ic_menu_block.png
ic_menu_call.png
ic_menu_contact.png
ic_menu_contactinfo.png
ic_menu_contacts.png
ic_menu_delete.png
ic_menu_group.png
ic_menu_help.png
ic_menu_info.png
ic_menu_media.png
ic_menu_more.png
ic_menu_mute.png
ic_menu_muteoff.png
ic_menu_mylocation.png
ic_menu_new.png
ic_menu_refresh.png
ic_menu_settings.png
ic_menu_share.png
ic_menu_shortcut.png
ic_menu_status.png
ic_menu_wallpaper.png
ic_muted.png
ic_round_more_normal.png
icon.png
icon_more.png
image_message.png
image_overlay.9.png
image_overlay_pressed.9.png
image_overlay_selected.9.png
input_code.png
light_gray_gradient.xml
location_blue.png
location_blue_1.png
location_green.png
location_pink.png
location_red.png
logo.png
menu_divider.png
menuitem_debug.png
message_got_receipt_from_server.png
message_got_receipt_from_target.png
message_unsent.png
msg_read.png
msg_status_client_received.png
msg_status_gray_waiting.png
msg_status_read.png
msg_status_red_waiting.png
msg_status_server_receive.png
msg_status_unread.png
msg_unread.png
notifybar.png
notifybar_error.png
pen_gray.png
people.png
picture_loading.png
platforms.png
powered_by_foursquare_white.png
powered_by_google_on_white.png
red_button.9.png
red_button_background.xml
refresh_btn.png
register_balloon.png
register_error.png
register_phone.png
register_semitrans_pane.9.png
repeatable_conversation_divider.png
search_web.png
selector_conversation_row_highlighted.xml
selector_emoji_bell.xml
selector_emoji_car.xml
selector_emoji_flower.xml
selector_emoji_imageview.xml
selector_emoji_smile.xml
selector_media_next.xml
selector_media_prev.xml
selector_orange_gradient.xml
selector_orange_gradient_bottom.xml
selector_orange_gradient_on_beige.xml
selector_orange_gradient_on_drkgray.xml
selector_orange_gradient_on_gray.xml
selector_orange_gradient_top.xml
selector_picker_table_row.xml
selector_place_overlay.xml
selector_transparent.xml
selector_transparent_gray.xml
shared_contact_btn.png
subheader_pattern.png
subheader_pattern_dark.png
topbar_background.png
topbar_pattern.png
videooverlay.png
wallet.png
-----------------------------------------------------
XML's
\res\layout\
about.xml
about_landscape.xml
account_info.xml
advanced.xml
app_chooser_dialog.xml
app_chooser_row.xml
autocomplete_list_row.xml
block_list.xml
broadcast_message_composer.xml
contact.xml
contact_map_balloon.xml
contact_picker.xml
contact_picker_group_row.xml
contact_picker_help.xml
contact_picker_help_row.xml
contact_picker_row.xml
contact_picker_tell_friends.xml
contacts_list.xml
contacts_row.xml
conversation.xml
conversation_contact_row_left.xml
conversation_contact_row_right.xml
conversation_divider_row.xml
conversation_header.xml
conversation_location_row_left.xml
conversation_location_row_right.xml
conversation_row_media_left.xml
conversation_row_media_right.xml
conversation_text_row_left.xml
conversation_text_row_right.xml
conversation_unread_divider.xml
conversations.xml
conversations_notice_row.xml
conversations_row.xml
conversations_tip_row.xml
country_picker.xml
country_picker_row.xml
cropimage.xml
custom_rounded_corner.xml
delete_account.xml
delete_account_confirmation.xml
describe_problem.xml
download_media_progress.xml
editstatus.xml
edittext_dialog.xml
emoji_edittext_dialog.xml
emoji_list_row.xml
empty_tell_a_friend.xml
eula.xml
group_subject_editor.xml
groupchat_info.xml
groupchat_info_footer.xml
groupchat_info_header.xml
groupchat_map.xml
help.xml
imageactivity.xml
location_picker.xml
location_picker_header.xml
location_picker_progress.xml
location_picker_row.xml
login.xml
media_gallery.xml
media_view.xml
multiline_notification.xml
multiple_contact_picker.xml
multiple_contact_picker_footer.xml
multiple_contact_picker_row.xml
multiple_contact_picker_row_empty.xml
multiple_contact_picker_search.xml
network_usage.xml
overlay_alert.xml
participant_list_row.xml
pickfiletype.xml
popup_notification.xml
push_name_preference_title.xml
recordaudio.xml
registername.xml
registerphone.xml
setstatus.xml
setstatus_row.xml
verify_sms.xml
video_activity.xml
view_profile_photo.xml
view_shared_contact.xml
view_shared_contact_row.xml
wallpaper_item.xml
wallpaper_picker.xml
web_image_picker.xml
-----------------------------------------------------
XML's
\res\values\
colors
dimens
public
strings
styles
-----------------------------------------------------
SMALI's
\smali\com\whatsapp
1,156 files i am not gonna copy here
For your help, i even made a clear tuto for decompiling/compiling/signing Whatsapp and another clear tuto to create your 9.png
Showroom
Shall i show you a small example of what you can achieve by following my whatsapp tuto
I. Intro
Chapter I. Intro
If you install Whatsapp.apk for the first time, this is the very first image you get in your screen and i will show you how to mod it
The file is located in \Whatsapp\res\layout\eula.xml
• android:background="@drawable/background"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
• android:id="@id/eula_title"
this line will allow you to change the first title text
android:textColor="#ffffffff"
android:textSize="20.0sp"
android:textStyle="normal"
android:gravity="center"
will see later for the other options but if you dont like the content of the text, android:text="@string/eula_title" tells you where to change it => in \Whatsapp\res\values\strings.xml OR \res\values-es\strings.xml if your current rom language is set to spanish for example.
Just look for the line eula_title in \res\values-es\strings
<string name="eula_title">¡Bienvenido a WhatsApp BurnedYorzua!</string>
• android:id="@id/logo"
will allow you to change the logo by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
in this case, android:src="@drawable/about_logo" but can be whatever you want
• android:id="@id/eula_description"
this line will allow you to change the 3 lines text under the logo
android:textSize="17.0sp"
android:textColor="#ffffffff"
android:gravity="center"
• android:id="@id/eula_platform_bar"
will allow you to change the plateforms logo by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
in this case, android:src="@drawable/platforms" but can be whatever you want
You will see at the end of the line
android:layout_below="@id/eula_description"
which means that the layout force the plateform logo to be below the 3 lines description but up to you if you wanna change the order of the elements
• android:id="@id/eula_view" refering to android:text="@string/eula_terms_and_conditions"
android:textSize="17.0sp"
android:textColor="#ffffffff"
android:gravity="center"
will see later for the other options but if you dont like the content of the text, android:text="@string/eula_title" tells you where to change it => in \Whatsapp\res\values\strings.xml OR \res\values-es\strings.xml if your current rom language is set to spanish for example.
Just look for the line eula_terms_and_conditions in \res\values-es\strings
<string name="eula_terms_and_conditions">Términos y Condiciones</string>
• android:id="@id/eula_bottom_bar"
will allow you to change the color of the bar
android:background="#bbd2323b"
will allow you to change the size of the bar
android:layout_height="9.0dip"
• android:background="#ff000000"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter ) or even a picture ="@drawable/wallpaper001"
• android:id="@id/eula_accept" refering to
android:text="@string/eula_agree"
android:textSize="17.0sp"
android:textStyle="bold"
android:textColor="#ffffffff"
android:gravity="center"
will see later for the other options but if you dont like the content of the text, android:text="@string/eula_agree" tells you where to change it => in \Whatsapp\res\values\strings.xml OR \res\values-es\strings.xml if your current rom language is set to spanish for example.
Just look for the line eula_terms_and_conditions in \res\values-es\strings
<string name="eula_agree">Acepto, deseo continuar</string>
If you decompile, edit eula.xml , recompile and sign successfully your whatsapp.apk ___ congratulations, you can enjoy your first piece of mod
then you could play with the file as you wish
about / about_landscape
We just learned how to change the first screen of whatsapp after 1st installation.
How about a second installation or update ?
You will need to edit about.xml and about_landscape.xml which are very similar to eula.xml
The file is located in \Whatsapp\res\layout\about.xml
• android:background="@drawable/background"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
• android:id="@id/eula_title"
this line will allow you to change the first title text
android:textColor="#ffffffff"
android:textSize="20.0sp"
android:textStyle="normal"
android:gravity="center"
will see later for the other options but if you dont like the content of the text, android:text="@string/eula_title" tells you where to change it => in \Whatsapp\res\values\strings.xml OR \res\values-es\strings.xml if your current rom language is set to spanish for example.
Just look for the line eula_title in \res\values-es\strings
<string name="eula_title">¡Bienvenido a WhatsApp BurnedYorzua!</string>
• android:id="@id/logo"
will allow you to change the logo by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
in this case, android:src="@drawable/about_logo" but can be whatever you want
• android:id="@id/eula_description"
this line will allow you to change the 3 lines text under the logo
android:textSize="17.0sp"
android:textColor="#ffffffff"
android:gravity="center"
• android:id="@id/eula_bottom_bar"
will allow you to change the color of the bar
android:background="#bbd2323b"
will allow you to change the size of the bar
android:layout_height="9.0dip"
• android:background="#ff000000"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter ) or even a picture ="@drawable/wallpaper001"
• android:id="@id/about_contact1" and android:id="@id/about_contact2" refering to
android:text="@string/contact1"
android:text="@string/contact2"
android:textSize="17.0sp"
android:textStyle="bold"
android:textColor="#ffffffff"
android:gravity="center"
will see later for the other options but if you dont like the content of the text, android:text="@string/contact1" tells you where to change it => in \Whatsapp\res\values\strings.xml OR \res\values-es\strings.xml if your current rom language is set to spanish for example.
Just look for the line contact1 and contact2 in \res\values-es\strings
<string name="contact1">Contactar</string>
<string name="contact2">¿Dudas? ¿Comentarios? ¿Necesita ayuda?</string>
If you decompile, edit eula.xml , recompile and sign successfully your whatsapp.apk ___ congratulations, you can enjoy your first piece of mod
◘◘◘ Dont forget to edit about_landscape.xml as well which is the exactly same construction than about.xml
When you rotate your phone, you will see something like this
By changing the background, you can get a nice surprise effect when rotating or just let the same background if you want to.
registerphone / registername
Next screen will redirect you to register your phone number
The file is located in \Whatsapp\res\layout\registerphone.xml
• android:background="@drawable/background_repeat"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
background_repeat correspond here to the background_repeat.xml in \Whatsapp\res\drawable-hdpi :
<bitmap android:src="@drawable/backpattern" android:tileMode="repeat"
backpattern.png will be repeated as more as needed to fill the background of the registerphone screen.
• <RelativeLayout style="@style/Header">
<TextView android:ellipsize="end" android:text="@string/register_phone_header" style="@style/Text.Header" />
</RelativeLayout>
<View style="@style/HeaderDivider" />
Each style can be found and modified in the file "styles.xml" located at \Whatsapp\res\values\styles
in this case, the style Header will attribute to the registerphone screen the following :
<item name="android:gravity">center_vertical</item>
<item name="android:background">@drawable/header_repeat</item>
<item name="androidaddingTop">2.0dip</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">@dimen/header_height</item>
You can chose to work with a style or not, you can chose to edit directly a style but be aware that this style might be used by another xml and modifiy consequently both parts.
in this example, the png for my header in the registerphone screen will be
android:background">@drawable/header_repeat which correspond to the header_repeat.xml
<bitmap android:src="@drawable/topbar_pattern" android:tileMode="repeat"
===> if you are following, you could avoid all this by changing from
<RelativeLayout style="@style/Header">
to
<RelativeLayout android:background="@drawable/topbar_pattern"
which is the same, except that the style allows you to add more settings in one command :
style="@style/Header"
is equal to
<item name="android:gravity">center_vertical</item>
<item name="android:background">@drawable/header_repeat</item>
<item name="androidaddingTop">2.0dip</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">@dimen/header_height</item>
Easy, right ?!
Same system for all the styles and you can add your own styles in the styles.xml
For all my versions, i added a couple of new styles in order to implement a diferent layout but will see that in next chapters.
• the text in the header will be defined by the style="@style/Text.Header"
style name="Text.Header" parent="@style/Text">
<item name="android:textSize">19.0sp</item>
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#ffffffff</item>
<item name="android:gravity">center</item>
<item name="android:layout_gravity">left|center</item>
<item name="androidaddingLeft">16.0dip</item>
<item name="androidaddingRight">16.0dip</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:shadowColor">#ff333333</item>
<item name="android:shadowDx">0.0</item>
<item name="android:shadowDy">-1.0</item>
<item name="android:shadowRadius">1.0</item>
• <EditText android:textColor="#ff000000" android:textColorHint="#ff888888" android:gravity="center" android:id="@id/registration_phone"
will allow you to define the color for the digits you will enter in the field
• the text in the screen will be defined by the style="@style/Text.Description"
<style name="Text.Description" parent="@style/Text">
<item name="android:textSize">16.0sp</item>
<item name="android:typeface">sans</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#ff33b5e5</item>
<item name="android:gravity">left</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:shadowColor">@color/white</item>
<item name="android:shadowDx">1.0</item>
<item name="android:shadowDy">1.0</item>
<item name="android:shadowRadius">0.0</item>
<item name="android:lineSpacingMultiplier">1.25</item>
<item name="android:textColor">#ff33b5e5</item> gives a ICS text colored for example
◘◘◘ Exactly the same works for the file registername.xml
this screen is the next after registering the phone number and will be modified with the same styles of registerphone.xml if you dont change it.
This is an amazingly detailed guide, thank you! I'll definitely try it out after I sort my papers & finish up my exams.
-----------------------
サンソングガラクシS II からタパトクで書いた。
Wow, you're the fist themer that realizes how big this if for people trying into themeing apks for android!!!
What a wonderful piece of tutorial here, thanks so much!!
Hey yorzua bro, you are a great person it seems. Such a detail guide even a noob can make a wonderful mod with this tutorial but what about people like me who has no time for making all this stuff b'coz of no time. I am doctor by profession and no time at all, working 8 days a week. Plz tell me the solution for person like me.
Sent from my GT-I9000 using Tapatalk
Please keep the thread on topic only
Yorzua said:
Please read carefully and test/do by yourself before to post in order to keep as clean as possible this interactive thread /SIZE][/CENTER]
Click to expand...
Click to collapse
Off-topic included
drshafi said:
Hey yorzua bro, you are a great person it seems. Such a detail guide even a noob can make a wonderful mod with this tutorial but what about people like me who has no time for making all this stuff b'coz of no time. I am doctor by profession and no time at all, working 8 days a week. Plz tell me the solution for person like me.
Click to expand...
Click to collapse
I am working 5 days per week ( 13 hours per day including public transport ) and i have no time but i find it if i really want it.
By the way, i had a solution for you here but not releasing my mods anymore since some leechers published and uploaded my work out there...
Happy theming
Tyrol said:
This is an amazingly detailed guide, thank you! I'll definitely try it out after I sort my papers & finish up my exams.
-----------------------
サンソングガラクシS II からタパトクで書いた。
Click to expand...
Click to collapse
Oh well, that's exactly what I was going to post.
@Yorzua Your work is just too good!!
conversations.xml / conversations_row.xml
Next screen after registering your phone number and your name will be the "Chats" screen
This screen is composed by conversations.xml and conversations_row.xml
To understand all the mechanism of those two xml's, you may preferably have some notions of how works a Layout in android.
As i said, the order of chapters may differ
I. Intro
II. Drawables
III. Gradients & Selectors
IV. Layout
V. Values & Manifest
VI. Tweaks & Updates
If you dont have notions at all about how works a Layout in android, i will try to simplify and clarify as more as possible sticking to the whatsapp architecture.
The "Chats" screen is a great example of simple layout we can work on to make it more unique and less boring than the stock one.
◘◘◘ Conversations.xml will allow you to mod the header part :
header
text
icons
• android:background="@null"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
• style="@style/Header"
Each style can be found and modified in the file "styles.xml" located at \Whatsapp\res\values\styles
in this case, the style Header will attribute to the Chats screen the following header settings :
<item name="android:gravity">center_vertical</item>
<item name="android:background">@drawable/header_repeat</item>
<item name="androidaddingTop">2.0dip</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">@dimen/header_height</item>
again, the png for my header in the Chats screen will be
android:background">@drawable/header_repeat which correspond to the header_repeat.xml
<bitmap android:src="@drawable/topbar_pattern" android:tileMode="repeat"
• The next layout ( <LinearLayout> blablablbalbaa </LinearLayout> ) will allow you to set the content of the header for Chats screen
In the stock apk, you get :
<LinearLayout android:gravity="left|center" android:id="@id/header_ll" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:layout_gravity="left|center" android:text="@string/chats" style="@style/Text.HeaderCentered" />
<ImageView android:layout_gravity="top|right|center" android:id="@id/divider1" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<ImageButton android:layout_gravity="right|center" android:id="@id/button_search" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_search" android:scaleType="center" style="@style/HeaderButton" />
<ImageView android:layout_gravity="top|right|center" android:id="@id/divider1" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<ImageButton android:layout_gravity="right|center" android:id="@id/button_compose_chat" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_pen" android:scaleType="center" style="@style/HeaderButton" />
</LinearLayout>
Which correspond to
In my XL versions, i changed this order for this one
==> Notice that you can erase the dividers between the icons by :
editing the png divider1.png located in \res\drawable-hdpi ( blank png )
or
changing android:background="@drawable/divider" by android:background="@null"
• <ScrollView android:id="@id/conversations_empty" android:background="@drawable/background_repeat"
will allow you to set a background for the Chats screen when not enough conversations are running to fill the screen so a background is required
You can set android:background="@null" for no background
You can even delete this option or to set a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
• the last layout of conversations.xml will allow you to set the welcome screen
LinearLayout androidrientation="vertical" androidaddingLeft="@dimen/horizontal_padding" androidaddingRight="@dimen/horizontal_padding" android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:layout_gravity="center" androidaddingTop="50.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circlepenicon" />
<TextView android:textSize="22.0sp" android:textStyle="bold" androidaddingTop="20.0dip" androidaddingBottom="3.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/welcome" style="@style/Text" />
<TextView android:textSize="14.0sp" android:id="@id/welcome_message" androidaddingBottom="50.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/welcome_message" style="@style/Text" />
</LinearLayout>
same than usual, you can edit the text
android:textSize="22.0sp"
android:textStyle="bold
you can edit the content of the text
android:text="@string/welcome_message" located in \res\values
in my case,
<string name="welcome_message">Para empezar a enviar mensajes a los contactos que ya tengan WhatsApp en su móvil, toque el icono de la esquina superior derecha.</string>
Congratulations, you just learn how to mod the header for the Chats screen
This method works for all the headers you will find in each screen.
----------------------- ----------------------------
We need now to mod the next part of the screen which are the rows corresponding of the running chats
◘◘◘ Conversations_row.xml will allow you to mod the rows part :
contact picture
name picture
date
last message
• android:layout_height="@dimen/conversations_row_height"
will allow you to change the height of the row which drives you to the dimens.xml located in \res\values
<dimen name="conversations_row_height">67.0dip</dimen>
• android:id="@id/contact_photo" android:layout_width="@dimen/imageview_size" android:layout_height="@dimen/imageview_size"
will allow you to change the height & width of the contact picture of the row which drives you to the dimens.xml located in \res\values
<dimen name="imageview_size">50.0dip</dimen>
==> in this case,the height of the row is 67.0dip so bigger than the height of the contact picture with 50.0dip but you can set the same in order to make perfectly fit the picture inside the row like this
• <com.whatsapp.TextEmojiLabel android:id="@id/conversations_row_contact_name"
will allow you to mod the contact name
android:textSize="18.0sp"
android:textStyle="bold"
android:textColor="#ffffffff"
You will be able to create a style or not
• <TextView android:id="@id/conversations_row_date"
will allow you to mod the date of the conversation
android:textSize="@dimen/conversation_date_size"
android:textColor="#ff999999"
You will be able to create a style or not
• <com.whatsapp.TextEmojiLabel android:id="@id/msg_from_tv"
will allow you to mod the last message sent in the conversation
android:textSize="13.329987sp"
android:textColor="#ff999999"
You will be able to create a style or not
• <com.whatsapp.TextEmojiLabel android:id="@id/single_msg_tv"
same story for this one
android:textSize="13.329987sp"
android:textColor="#ff999999"
You will be able to create a style or not
• <com.whatsapp.UnreadMsgIndicator android:id="@id/conversations_row_message_count"
will allow you to mod the counter for the messages not read yet in the conversation
A style is already setup for this @id ( style="@style/Text" ) but you will be able to create another style or not
Like show the example :
Last point, the dividers between each row can be mod on the end of conversations_row.xml :
<View android:background="@drawable/gradient" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentBottom="true" />
<View android:background="@drawable/gradient" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentTop="true" />
• android:background="@drawable/gradient"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
in my case, i did use diferent solutions for each of my versions
you can create a new xml called for example "gradient.xml " with :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff000000" android:endColor="#ff000000" android:angle="0.0" android:centerColor="#ffffffff" />
</shape>
==> android:background="@drawable/gradient" will take the values from gradient.xml and gives an interesting result like this :
•◘○ After all those points explained, the most curious of you will ask me where we can mod the dark & light background color to get alternative rows
Well, i will explained it in another chapter but for those who cant wait _ you will find it \res\drawable-hdpi\
selector_orange_gradient_on_beige
selector_orange_gradient_on_gray
Both will allow you to mod the background color changing the last gradient :
<item>
<shape>
<gradient android:startColor="#ff000000" android:endColor="#ff333333" android:angle="90.0" />
</shape>
</item>
</selector>
It can be a simple gradient with 2 colors :
It can be a gradient with 3 colors :
It can be a gradient with 2 similar starting colors in both xmls :
Happy theming
Unable to download latest mod via mediafire. It says file set to private. Help plz
Sent from my GT-I9000 using Tapatalk
No links
drshafi said:
Unable to download latest mod via mediafire. It says file set to private. Help plz
Click to expand...
Click to collapse
This thread is a Tutorial, no link have been posted here to share.
Please read carefully OP before to post ( 2nd warning )
contact_picker.xml / contact_picker_row.xml
You have now few ways from the Chats screen but to keep the dinamic of this tutorial, lets say you want to pick up a contact in your contact list for a new chat :
Next screen will be the "My contacts" screen
As for Chats screen ( header + rows ), this screen is composed by contact_picker.xml and contact_picker_row.xml
If you dont have notions at all about how works a Layout in android, i will try to simplify and clarify as more as possible sticking to the whatsapp architecture.
The "My contacts" screen is a great example of simple layout we can work on to make it more unique and less boring than the stock one.
◘◘◘ contact_picker.xml will allow you to mod the header part :
header
text
icons
• android:background="@null"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
• style="@style/Header"
Each style can be found and modified in the file "styles.xml" located at \Whatsapp\res\values\styles
in this case, the style Header will attribute to the Chats screen the following header settings :
<item name="android:gravity">center_vertical</item>
<item name="android:background">@drawable/header_repeat</item>
<item name="androidaddingTop">2.0dip</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">@dimen/header_height</item>
again, the png for my header in the Chats screen will be
android:background">@drawable/header_repeat which correspond to the header_repeat.xml
<bitmap android:src="@drawable/topbar_pattern" android:tileMode="repeat"
• The next layout ( <LinearLayout> blablablbalbaa </LinearLayout> ) will allow you to set the content of the header for Chats screen
In the stock apk, you get :
<LinearLayout android:gravity="left|center" android:id="@id/header_rl" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:ellipsize="end" android:layout_gravity="left|center" android:text="@string/whatsapp_contacts" android:maxLines="1" android:lines="1" android:singleLine="true" style="@style/Text.HeaderCentered" />
<ImageView android:layout_gravity="top|right|center" android:id="@id/divider1" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<ImageButton android:layout_gravity="right|center" android:id="@id/button_help" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_help" android:scaleType="center" style="@style/HeaderButton" />
<ImageView android:layout_gravity="top|right|center" android:id="@id/divider2" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<ImageButton android:layout_gravity="right|center" android:id="@id/button_search" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_search" android:scaleType="center" style="@style/HeaderButton" />
</LinearLayout>
Which correspond to
In my XL versions, i changed this order for this one
==> Notice that you can erase the dividers between the icons by :
editing the png divider1.png located in \res\drawable-hdpi ( blank png )
or
changing android:background="@drawable/divider" by android:background="@null"
Here is no need to setup a scrollview as the list of contacts should be never empty _ all your whatsapp contacts would/should fill the height of a screen.
If not, the last part of the contact_picker.xml defines what comes in the empty space :
<View style="@style/HeaderDivider" />
<ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="0.0dip" android:cacheColorHint="@color/background" android:divider="@color/divider_gray" android:dividerHeight="1.0px" android:choiceMode="singleChoice" android:layout_weight="1.0" />
<include android:id="@id/contacts_empty" android:layout_below="@id/conversation_header" layout="@layout/empty_tell_a_friend" />
<LinearLayout android:id="@id/footer" android:background="@drawable/contactpicker_bar_repeat" androidaddingTop="4.0dip" androidaddingBottom="4.0dip" android:layout_width="fill_parent" android:layout_height="@dimen/header_height">
<ImageButton android:ellipsize="end" android:id="@id/groups_btn" android:background="@drawable/contactpicker_button" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_marginLeft="5.0dip" android:layout_marginRight="2.5dip" android:src="@drawable/groups" android:layout_weight="1.0" />
<ImageButton android:id="@id/contacts_btn" android:background="@drawable/contactpicker_button_pressed" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_marginLeft="2.5dip" android:layout_marginRight="5.0dip" android:src="@drawable/people" android:layout_weight="1.0" />
</LinearLayout>
</LinearLayout>
You are now more familiar with terms like
○ android:background="@drawable/
○ android:divider="@color/
○ style="@style/HeaderDivider"
I will explain deeper the rest of the codes in the Chapter IV. Layout
Congratulations, you just learn how to mod the header for the Chats screen
This method works for all the headers you will find in each screen.
----------------------- ----------------------------
We need now to mod the next part of the screen which are the rows corresponding of the contacts list
◘◘◘ Conversations_row.xml will allow you to mod the rows part :
contact picture
contact name
phone type
contact status
• android:layout_height="@dimen/conversations_row_height"
will allow you to change the height of the row which drives you to the dimens.xml located in \res\values
<dimen name="conversations_row_height">67.0dip</dimen>
• android:id="@id/contact_photo" android:layout_width="@dimen/imageview_size" android:layout_height="@dimen/imageview_size"
will allow you to change the height & width of the contact picture of the row which drives you to the dimens.xml located in \res\values
<dimen name="imageview_size">50.0dip</dimen>
==> in this case,the height of the row is 67.0dip so bigger than the height of the contact picture with 50.0dip but you can set the same in order to make perfectly fit the picture inside the row like this
• android:id="@id/contactpicker_row_name"
will allow you to mod the contact name
android:textSize="18.0sp"
android:textStyle="bold"
android:textColor="#ffffffff"
You will be able to create a style or not
• android:id="@id/contactpicker_row_phone_type"
will allow you to mod the type of the contact phone number ( can be mobile/other/etc )
android:textSize="12.0sp"
android:textColor="#ff999999"
android:gravity="right|center"
With the gravity, you can chose where to fit the @id/
You will be able to create a style or not
• android:id="@id/contactpicker_row_status"
will allow you to mod the status set as shown on the screenshot
android:textSize="14.0sp"
android:textStyle="normal"
android:textColor="#ff999999"
You will be able to create a style or not
Last point, the dividers between each row can be mod on the end of contact_picker_row.xml :
</LinearLayout>
<View android:id="@id/contact_picker_divider_lower" android:background="@drawable/gradient" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentBottom="true" />
<View android:id="@id/contact_picker_divider_upper" android:background="@drawable/gradient" androidaddingBottom="2.0dip" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentTop="true" />
</RelativeLayout>
• android:background="@drawable/gradient"
will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )
in my case, i did use diferent solutions for each of my versions
you can create a new xml called for example "gradient.xml " with :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff000000" android:endColor="#ff000000" android:angle="0.0" android:centerColor="#ffffffff" />
</shape>
==> android:background="@drawable/gradient" will take the values from gradient.xml and gives an interesting result like this :
Or no divider at all :
•◘○ After all those points explained, the most curious of you will ask me where we can mod the dark & light background color to get alternative rows
Well, i will explained it in another chapter but for those who cant wait _ you will find it \res\drawable-hdpi\
selector_orange_gradient_on_beige
selector_orange_gradient_on_gray
Both will allow you to mod the background color changing the last gradient :
<item>
<shape>
<gradient android:startColor="#ff000000" android:endColor="#ff333333" android:angle="90.0" />
</shape>
</item>
</selector>
It can be a simple gradient with 2 colors :
It can be a gradient with 3 colors :
It can be a gradient with 2 similar starting colors in both xmls :
Happy theming
Yorzua said:
This thread is a Tutorial, no link have been posted here to share.
Please read carefully OP before to post ( 2nd warning )
Click to expand...
Click to collapse
Hey yorzua bro i know that i have to post in relevant thread but your Whatsapp mod thread is closed now and i desperately want the latest mod of yours that is why i posted here. Sorry for that but truly loving your mods
Sent from my GT-I9000 using Tapatalk
dead links, cant view any images
fananthony said:
dead links, cant view any images
Click to expand...
Click to collapse
Images show up just fine for me.
-----------------------
サンソングガラクシS II からタパトクで書いた。
II. Drawables
Drawables are an important part to do not forget for themers and Whatsapp.apk contains 634 png and 9.png files to mod with graphic tools.
For those who are afraid to deal with 9.png files, i did post a full tutorial which explain you clearly the steps to create a new one or to mod an existing one :
How to create your 9.png !
Here is the main process :
I will guide you into the famous 9.png creation
First rule before to start how to learn to theme your device :
Always make a backup of the files you are about to edit or do a nandroid backup.
If anything goes wrong you will get a bootloop.
☺ TOOLS you must have ☺
1. PHOTOSHOP / GIMP http://www.gimp.org/downloads
or a good alternative for those who are rookies in Adobe products : PAINT.NET http://www.paint.net
or any other Graphics editor you like to use of your choice.
2. DRAW 9-PATCH http://developer.android.com/sdk/index.html
You will find it in your SDK starter package ( android sdk/tools )
The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor.
3. xUltimate-d9pc.exe http://lmgtfy.com/?q=xUltimate-d9pc
Basically you will need to compile the edited 9.png to Draw9Patch Compiler
*****
Now let's play with your pics in the graphic editor of your choice :
your 9.png's files would be in <drawable/drawable-hdpi> folder' apk
When you are done editing your image,
you can open it in the draw9patch tool to verify that it stretches properly.
Here is the most important part of the 9.png creation.
You need to define 2 parts :
* Stretch part ( always left and up side )
* Content part ( always right and bottom side )
When you are done stretching your image,
you can open it in the 9.png compiler tool to compile it properly.
you notice the 1pixel border created for the stretcheable 9.png
Place your files in example1/drawable-hdpi
Execute the xUltimate-d9pc.exe
If you defined properly your 9.png,
you must find no errors and you can hear a "peeep"
Compiled ready files are in /Done folder
When you are done compiling your image,
you can see that the 1pixel border disappeared.
Use 7-ZIP http://www.7-zip.org
(an open source file archiver with a high compression ratio)
to drag your files into the apk !
Source : androidbyyorzua
Congatulations, you can enjoy your work
-----------------------------------------------------------------
Stock Whatsapp.apk contains in total 15 9.png's files _ here are the ones you can start on :
date_balloon.9
(this one define the date/actions bubble chat for every single/group chat )
gray_bubble.9
(this one define the bubble chat for your contact replies/answers )
gray_bubble_body.9
gray_bubble_bottom.9
gray_bubble_top.9
(those 3 define the bubble chat for the group chat )
green_bubble.9
(this one define the bubble chat for your replies/answers )
Here is an example of group chat with gray_bubble_body.9 / gray_bubble_bottom.9 / gray_bubble_top.9 all made separately
You can see the bubbles doesnt exactly fit all 3 together so i strongly suggest you to work those 3 files at the same time :
Here the result is much better
Obviously, you are free to add more 9.png files to Whatsapp.apk as i do for most of my versions ( depending on the design you want to achieve, png are not sufficient as they are not stretchable by definition )
If it is the case, i will show you how to add those additional drawables in another article
Be aware that drawables values ( color/transparency ) are independent from xml's/smali's setup but position/background/size/text must be considered as for final result in the screen.
Especially for 9.png which are stretchable graphics, you should pay attention to all the parameters and not only to the graphic edition when creating them with Photoshop/Gimp/etc.
Even backgrounds may give a total diferent result to your graphics :
Textures would be very nice to add for the bubbles but extremely tricky when it comes to stretch the workable surface :
Forget inside shadows as you may get this result :
9.png's are the tricky part but you should pay attention to the rest of png's which are the major part of whatsapp drawables.
The header may be a solid color defined by the previous xml's explained in my articles but could be a nice customized png :
Same for the rest of the icons
Emoji's are nice to mod even if you will be the only one to see the result in the bubbles _ both contacts must have the same whatsapp mod to see the same emoji !
Whatsapp.apk display 3 diferent whatsapp logos which are nice to mod for a great touch :
Note that the 2 files "background" and "background_landscape" are not png but JPG files (480x800) so don't forget to save them as *.jpg to enjoy the result :
Not much to explain for the rest except that stock whatsapp.apk gives you a pretty ugly menu icons which doesnt really fit with android 4.0 ICS look so feel free to mod the files starting by :
"ic_menu.....png"
Here is the stock menu :
and here is my modded menu :
This is pretty much everything in whatsapp _ still so many projects and ideas i have got but had to close my own whatsapp thread after my work uploaded without my permission all around the web ...
I still get my [Graphics] ░█░ Design Factory ░█░ thread open so feel free to ask for any advice on graphics if you feel it
Please don't ask here for special graphic requests _ keep the thread clean for those who follows the full picture [ thank you ]
Happy theming, happy modding
Thanks for the guide dude! I'm doing well theming it to somewhat match the ICS Messaging app
I know your guide is not finished but could you point me out to where i can change the font colors for the chat messages? (During chat with a person)
I want to try theming the 9.pngs for the bubbles but the colors are clashing with the default font
I'm trying to change the system png sliders.
After changing the png in the framework-res:
tw_progress_bg_holo_dark.9
tw_progress_bg_holo_light.9
tw_progress_primary_holo_dark.9
tw_progress_primary_holo_light.9
tw_progress_secondary_holo_dark.9
tw_progress_secondary_holo_light.9
I have a strange bug in the display.
The first picture is the correct thickness of the slider.
In the second picture is a thin slider.
How to change the brightness slider to be thick as in the second picture?
Any help.
Very please.
VRilski said:
I'm trying to change the system png sliders.
After changing the png in the framework-res:
tw_progress_bg_holo_dark.9
tw_progress_bg_holo_light.9
tw_progress_primary_holo_dark.9
tw_progress_primary_holo_light.9
tw_progress_secondary_holo_dark.9
tw_progress_secondary_holo_light.9
I have a strange bug in the display.
The first picture is the correct thickness of the slider.
In the second picture is a thin slider.
How to change the brightness slider to be thick as in the second picture?
Click to expand...
Click to collapse
Are you trying to make it thicker than normal as well as changing the color?
*Yes
*The rom 4.1.2 can convert png to bigger and it works.
*The rom 4.4.2 can give even very large png and it does not work.
*I still have a thin line slider.
Ok
Thebear j koss showed me where to look -thanks
In the framework-res / res / values / dimens.xml
The rom 4.1.2 I can change the thick png and it works.
Please take a look at this:
Code:
**** <DIMEN name = "tw_progressbar_horizontal_height_size"> 16.0dip </ DIMEN>
**** <DIMEN name = "tw_seekbar_height_size"> 13.0dip </ DIMEN>
**** <DIMEN name = "tw_flashboard_panel_height"> 40.0dip </ DIMEN>
The rom 4.4.2 I can not get thick png
Code:
**** <DIMEN name = "tw_progressbar_horizontal_height_size"> 16.0dip </ DIMEN>
**** <DIMEN name = "tw_seekbar_height_size"> 13.0dip </ DIMEN>
**** <DIMEN name = "tw_progressbar_large_wh_size"> 72.0dip </ DIMEN>
**** <DIMEN name = "tw_progressbar_medium_wh_size"> 34.0dip </ DIMEN>
**** <DIMEN name = "tw_progressbar_smalltitle_wh_size"> 20.0dip </ DIMEN>
What can I change to have thick slider?
Błąd?
Can anyone help
I tried to change the resolution 9.png.
Now I have a thicker volume slider but the brightness slider still thin
I tried to change seekbar in the framework-res to another but that did not work
** <style name = "Widget.SeekBar" parent = "@ style / Widget">
******** <item name = "focusable"> true </ item>
******** <item name = "maxheight"> 30.0dip </ item>
******** <item name = "indeterminateOnly"> false </ item>
******** <item name = "indeterminateDrawable"> @ drawable / progress_horizontal </ item>
******** <item name = "progressDrawable"> @ drawable / progress_horizontal </ item>
******** <item name = "minheight"> 30.0dip </ item>
******** <item name = "thumb"> @ drawable / seek_thumb </ item>
******** <item name = "thumbOffset"> 8.0dip </ item>
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.
Download your apk
Decompile it
Create a folder with the app's package name in assets/overlays
Add your xml, png etc. files into this folder
Apps to theme:
AOSP / Google Keyboard
Blackberry Messenger
Google+
Google Hangouts
Google Inbox
Google Mail
Kernel Adiutor
Screener
Soundcloud
Tapatalk
Twitter
WhatsApp
YouTube
Theming:
AOSP / Google Keyboard
Key text color light:
Code:
<color name="key_text_color_lxx_light">Your_Color</color>
Key text color dark:
Code:
<color name="key_text_color_lxx_dark">Your_Color</color>
Key bg color light:
Code:
<color name="key_background_lxx_light">Your_Color</color>
Key bg color dark:
Code:
<color name="key_background_lxx_dark">Your_Color</color>
Gesture input light:
Code:
<color name="sliding_key_input_preview_color_lxx_light">Your_Color</color>
Gesture input dark:
Code:
<color name="sliding_key_input_preview_color_lxx_dark">Your_Color</color>
Keyboard bg light in drawable-xxhdpi:
Code:
keyboard_background_lxx_light.9.png
Keyboard bg dark in drawable-xxhdpi:
Code:
keyboard_background_lxx_dark.9.png
Word suggestion bg light in drawable-xxhdpi:
Code:
keyboard_suggest_strip_lxx_light.9.png
Word suggestion bg darkin drawable-xxhdpi:
Code:
keyboard_suggest_strip_lxx_dark.9.png
Suggested word text color light:
Code:
<color name="suggested_word_color_lxx_light">Your_Color</color>
Suggested word text color dark:
Code:
<color name="suggested_word_color_lxx_dark">Your_Color</color>
BlackBerry Messenger
Actionbar color:
Code:
<color name="primary">Your_Color</color>
Statusbar and FAB color:
Code:
<color name="primaryColor">Your_Color</color>
Side menu text color:
Code:
<color name="drawer_textColor">Your_Color</color>
Side menu header color:
Code:
<style name="NavDrawerHeader"><item name="android:background">Your Color</item>
<item name="android:textColorPrimary">Your Color</item></style>
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>
Bottom bar bg:
Code:
<color name="quantum_grey900">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
Google Hangouts
Actionbar color:
Code:
<color name="primary">Your_Color</color>
Statusbar color:
Code:
<color name="primary_dark">Your_Color</color>
Incoming messages bg:
Code:
<color name="incoming_conversation_bubble_background">Your_Color</color>
Incoming messages text color:
Code:
<color name="realtimechat_message_text_incoming">Your_Color</color>
Outgoing messages bg:
Code:
<color name="outgoing_conversation_bubble_background">Your_Color</color>
Outgoing messages text color:
Code:
<color name="realtimechat_message_text_outgoing">Your_Color</color>
Links text color:
Code:
<color name="realtimechat_message_textlink">Your_Color</color>
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
Google Mail
Actionbar color:
Code:
<color name="primary_color">Your_Color</color>
<color name="primary_material_dark">Your_Color</color>
<color name="primary_material_light">Your_Color</color>
Statusbar color:
Code:
<color name="primary_dark_color">Your_Color</color>
<color name="primary_dark_material_dark">Your_Color</color>
<color name="primary_dark_material_light">Your_Color</color>
Refresh circle color:
Code:
<color name="swipe_refresh_color1">Your_Color</color>
<color name="swipe_refresh_color2">Your_Color</color>
<color name="swipe_refresh_color3">Your_Color</color>
<color name="swipe_refresh_color4">Your_Color</color>
Subject title read text color:
Code:
<color name="subject_text_color_read">Your_Color</color>
Subject title unread text color:
Code:
<color name="subject_text_color_unread">Your_Color</color>
Kernel Adiutor
Actionbar color:
Code:
<color name="theme_main_color_primary">Your_Color</color>
Statusbar color:
Code:
<color name="color_primary_dark">Your_Color</color>
Switch bar color:
Code:
<color name="color_primary_light">Your_Color</color>
Screener
Actionbar color:
Code:
<color name="primary">Your_Color</color>
Statusbar color:
Code:
<color name="primarydark">Your_Color</color>
Mockup preview bg color:
Code:
<color name="device_background">Your_Color</color>
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
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>
<color name="orange_e064">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>
<color name="orange_b35">Your_Color</color>
"Compose" button in drawable-xxhdpi:
Code:
bubble_edit_dark.png
bubble_rename_dark.png
new_topic.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
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
Chat bubbles bg in drawable-xxhdpi:
Code:
balloon_incoming_normal.9.png
balloon_incoming_normal_ext.9.png
balloon_incoming_pressed.9.png
balloon_incoming_pressed_ext.9.png
balloon_outgoing_ext_pressed.9.png
balloon_outgoing_normal.9.png
balloon_outgoing_normal_ext.9.png
balloon_outgoing_pressed.9.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
Statusbar notification icon in drawable-xxhdpi:
Code:
notifybar.png
YouTube
Actionbar color:
Code:
<color name="color_primary">Your_Color</color>
Statusbar color:
Code:
<color name="theme_main_color_primary_dark">Your_Color</color>
Upload icon bg color:
Code:
<color name="color_primary">Your_Color</color>
Search/More icons color in header color:
Code:
<color name="theme_main_actionbar_controls_color">Your_Color</color>
Icons in header color:
Code:
ic_tab_account.png
ic_tab_home.png
ic_tab_subscriptions.png
Icons in "Account" section color:
Code:
ic_drawer_uploads_normal.png
ic_drawer_uploads_pressed.png
ic_drawer_watch_history_normal.png
ic_drawer_watch_history_pressed.png
ic_drawer_watch_later_normal.png
ic_drawer_watch_later_pressed.png
Credits:
@aldiandrew
Do you want to have any app inside this tutorial or any questions? Just ask for it in this thread.
thx sir, useful thread for reference. I will try it all
This is a great idea to include the XML tags for each app. Will be great to see MX Player, WPS Office and all. I've been digging their XMLs for too long.
Keep up the good work. Much appreciated. :fingers-crossed:
Thanks my friends.
@Vinay_FXG
I try to add MX Player.
Are there any other wishes?
Lars124 said:
@Vinay_FXG
I try to add MX Player.
Are there any other wishes?
Click to expand...
Click to collapse
Screener, youtube and kernel adiutor please sir, i think many people use this
Unfortunately I can't add MXPlayer because there's not quite much to theme.
Nevertheless I will add Screener, YouTube and Kernel Adiutor.
Hai, can you help me on this. I'm trying to find the tab text color on WhatsApp, and the 3dot menu and the back menu in action bar..
setiawanjimmy said:
Hai, can you help me on this. I'm trying to find the tab text color on WhatsApp, and the 3dot menu and the back menu in action bar..
Click to expand...
Click to collapse
You can replace the 3dot menu button with an own one png. Look in my guide how to replace it. Just take a black button.
I need to take a look at the font color.
I will write you tomorrow.
Lars124 said:
You can replace the 3dot menu button with an own one png. Look in my guide how to replace it. Just take a black button.
I need to take a look at the font color.
I will write you tomorrow.
Click to expand...
Click to collapse
I thought I had all of those pngs in already. But I'll have a look at it again later.
- Update -
I've added Screener and a new WhatsApp icon.
Further apps coming soon
Awesome guide (Y) @PillzP
What about BBM and Facebook? Is there any theming that can be done to them?
kirito9 said:
Awesome guide (Y) @PillzP
What about BBM and Facebook? Is there any theming that can be done to them?
Click to expand...
Click to collapse
What is BBM? In FB you can't theme quite much.
Lars124 said:
What is BBM? In FB you can't theme quite much.
Click to expand...
Click to collapse
Oh alright. Hope to see more 3rd party apps added to the list .
This is BBM (Blackberry Messenger) for android - https://play.google.com/store/apps/details?id=com.bbm&hl=en
Is there a way to make the background of Twitter app black or dark?
Very helpful thread...!!
Im trying to theme whatsapp..
I wana know if der is a way to make the chat bubbles of a conversation transaparent or a gaussian blur effect(preferably)?
Sent from my GT-I9500 using Tapatalk
Thanks my friends
yespress said:
Is there a way to make the background of Twitter app black or dark?
Click to expand...
Click to collapse
It can be managed by "white" in values > colors.xml
is this for any android or only a few?
hello @Lars124 , thanks again for your help , i will share what i found , only a few because iam still learning :highfive:
for BBM/Blackberry Messenger (com.bbm)
Open res/values/colors.xml
Change statusbar color :
Code:
<color name="primaryBackground">Your Color</color>
Change FAB color and ActionBar color :
Code:
<color name="primaryColor">Your Color</color>
Change Text color on side menu :
Code:
<color name="drawer_textColor">#Your Color</color>
Change header color on side menu :
Open res/valus/styles.xml
Code:
<style name="NavDrawerHeader">
<item name="android:background">Your Color</item>
<item name="android:textColorPrimary">Your Color</item>
</style>
Hello everyone,I am a Android beginner.When I run my project I have trouble in the Android Studio.And when the project is rendering, here are the notes:Rendering Problems Exception raised during rendering: android.support.design.widget.AppBarLayout cannot be cast to android.view.ViewGroup .And I check some information I don't find any answer.
And here are my activity_main.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.iqiqi.myapplication.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Here are the style.xml.
Code:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Here are the details.
Code:
java.lang.ClassCastException: android.support.design.widget.AppBarLayout cannot be cast to android.view.ViewGroup
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:836)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:811)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:838)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:811)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
at android.view.LayoutInflater.inflate(LayoutInflater.java:394)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:223)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:426)
at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:350)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:510)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:498)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:888)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:498)
at com.android.tools.idea.rendering.RenderTask.access$600(RenderTask.java:72)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:610)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:607)
at com.android.tools.idea.rendering.RenderService.runRenderAction(RenderService.java:362)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:607)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:629)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager.doRender(AndroidLayoutPreviewToolWindowManager.java:652)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager.access$1700(AndroidLayoutPreviewToolWindowManager.java:80)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager$7$1.run(AndroidLayoutPreviewToolWindowManager.java:594)
at com.intellij.openapi.progress.impl.CoreProgressManager$2.run(CoreProgressManager.java:152)
at com.intellij.openapi.progress.impl.CoreProgressManager.registerIndicatorAndRun(CoreProgressManager.java:452)
at com.intellij.openapi.progress.impl.CoreProgressManager.executeProcessUnderProgress(CoreProgressManager.java:402)
at com.intellij.openapi.progress.impl.ProgressManagerImpl.executeProcessUnderProgress(ProgressManagerImpl.java:54)
at com.intellij.openapi.progress.impl.CoreProgressManager.runProcess(CoreProgressManager.java:137)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager$7.run(AndroidLayoutPreviewToolWindowManager.java:589)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:320)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:310)
at com.intellij.util.ui.update.MergingUpdateQueue$2.run(MergingUpdateQueue.java:254)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:269)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:227)
at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:217)
at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238)
at com.intellij.util.Alarm$Request$1.run(Alarm.java:351)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
And I don't know how to solve this,please tell me,thanks...
same problem, same error
Was an answer ever found for this issue? I have the exact same error list.
edit: finally found the solution and it was stupidly easy. This seems like a major flaw to have a major part of the software not working until you change a setting. https://www.youtube.com/watch?v=nYYP_G7V5NU
I encountered similar issues
Even I faced similar issue when I was working with coordinator layout, app bar layout, nested scroll view and bottom sheet.
I did lot of research on this. Some combination of views don't work as expected with coordinator layout.
Second point is if you override any framework or call back methods, make sure you call super method so that all the required setup for the frame work is done properly.
Those two points fixed my issues.
Hopefully that helps you or some one come here in search of the solution