[Android Themes] Yorzua:
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 ! :D

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 :D
​

-----------------------------------------------------------------

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

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

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 ! :cool:

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

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