[Guide/Tutorial][17/06/12]How to make "basic" theming mods + .9.png tutorial

[Guide/Tutorial][17/06/12]How to make "basic" theming mods + .9.png tutorial

If you find this guide useful then please rate the thread, i dont really care about thanks, thanks.

Give a man a theme and he can flash for a day.
Teach him how to theme and he can flash for a lifetime.

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


"What's in the guide??"

*Basic image editing
*Using UOT kitchen to change the battery icons
*Popular image names and locations (GB)
*How to decompile using apk manager4.9
*Editing .9.png's
*How to use the universal theme.zip
*Create a batch Hue action in Photoshop

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

I'm constantly seeing people asking for minor changes to ROMS, Themes, Mods etc, so i thought i would post this to let the talented people get on with what they do best, and the rest of us can stop harassing them for simple tasks that we are all capable of ourselves.

"Could you add these images from this ROM to your theme?"
"Can you change the colour of the battery in you ROM?"
"Is it possible to have different status bar colour?"

Well people it's time to learn some basic theming/modding/skinning, whatever you want to call it.What you will need:

*7zip (free)
*Greenfish icon editor pro (free/ windows) or *Gimp (free/ all platforms)



Getting going:

[1]
Firstly open up your ROM/Theme/Mod with 7zip and navigate to:

"system/framework/"

*If framework-res is a folder drog and drop to a suitable location on you pc.

*If it is an .apk then extract it and unpack.
TIP: drag it out then right click>7zip>extract to "***".

TIP2: Create a copy of this folder in case you make a mistake!!

[2]
Now navigate into "framework-res/res/drawable-hdpi/", in here are your battery images named "stat_sys_battery.png"

[3]
Open up Greenfish/Gimp, and drag across the images you want to adjust.

[Greenfish] Select Filter>Hue/Saturation
In the window that opens adjust the properties until you get your desired effect.
Save and close.

[Gimp] Select tools>color tools>hue-saturation
In the window that opens adjust the properties until you get your desired effect.
Save and close.

[4]
When your happy with the results open up(NOT EXTRACT!!) the Universal Theme template provided using 7zip and navigate to-
"system/framework/framework-res.apk/res/drawable-hdpi/"
Drag the newly adjusted images across.
Close and place on your sdcard to be flashed from recovery.

-------------------------------------------------------------------------------------------[1]
Get the ROM/Theme/Mod containing the images you want to use
Open up with 7zip and navigate to "system/app/systemUI.apk/res/drawable-hdpi/"
in here are your signal images named "stat_sys_signal.png"

[2]
Open up(NOT EXTRACT!!) the Universal Theme template provided using 7zip and navigate to-
"system/app/systemUI.apk/res/drawable-hdpi/"
Drag the desired images across.
Close and place on your sdcard to be flashed from recovery.


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

That was easy was'nt it!
There are free software programs out there like gimp that let you batch process images but im not aware of the methods used, if anyone is then please post.


Please feel free to post helpful info and ask questions about locations of images or anything else related. Hopefully myself or anyone else in the know will help.


If you want to go deeper into theme-ing here is an amazing guide:
http://xdaforums.com/showthread.php?t=916814


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

>>> Universal Theme empty template <<<

Thanks to JR soft and also Intronauta for universal theme http://www.htcmania.com/showthread.php?t=258333 .Based on the "VillainTheme system" tool by VillainTeam. More info etc, head to www.villainrom.co.uk.

How to decompile using apkmanager 4.9

WINDOWS
I dont use any other OS so i cannot write a guide. Google is your friend!!.


So you have learned how to do the basics and graduated from the nursery (kindergarten if you prefer) and your intersted in making some real theme-ing modifications.

In order to do this we need to be able to decompile our apk's.

"Why do we need to decompile??" you ask....

Well, just like a Piñata we need to smash it open (decompile) to get all the good stuff and allow us to correctly and easily edit such things as .9.png's, xml's and smali.

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

"What do we need??"

1-Java
2-Android SDK (we only need tools and platform tools)
3-apk manager (obviously)

*Firstly we need java set-up.
Open up a cmd window/ terminal and type or copy and paste:
java -version

If you recieve a message that looks like this-
>>SCREEN<<

Then ignore the next step and continue to Android SDK.

*Go >>HERE<< and download the JRE for your system.
*Install java by default following the prompts without changing any of the options.
*We need to check java has installed correctly,
Open up a cmd window/ terminal and type or copy and paste:
java -version
If you recieve the message then skip to Android SDK, if not proceed.
*We need to add the path to java so it is recognised to be run from any directory follow these instructions for Windows:

**Open My Computer and select "view system information" on the left pane.
**Click the Advanced tab and then click Environment Variables.
**In the "System variables" area click New.
**Enter JAVA_HOME in the Variable name field. Enter the pathname of the JRE installation directory in the Variable value field. For example mine is: C:\Program Files\Java\jdk1.6.0_27;%JAVA_HOME%\bin; Click OK.
>>SCREEN<<
**Click OK.
**Try step 1 again, success?? (MAKE SURE YOU USE A FRESH CMD WINDOW!!)
For more information on path setting look >>HERE<<

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

The android SDK allows you to download the latest platform resources but all we really need from it is the tools

*Go >>HERE<< and download the SDK for your system.
*Install by default following the prompts.
*When installed click next and start SDK manager.
*In the window that opens up check "Tools/Android SDK Tools+Android SDK Platform Tools", click install (everything else is optional for this guide!).
*Add the path as we did earlier but this time add it to "Path":

"C:\Program Files\Android\android-sdk\platform-tools;C:\Program Files\Android\android-sdk\platform-tools;"
WITHOUT THE QUOTES!!!
>>SCREEN<<

*Check the installation by Opening up a cmd window/terminal and type or copy and paste:
adb

If you recieve a long message then all is good.
>>SCREEN<<

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


*Get apk manager from >>HERE<< and extract to appropiate folder, eg "apk_manager".

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

"How do i use apkmanager??" i hear you cry.


*Firstly we want install our frameworks to try and prevent any future errors for dependant apk's.
*Navigate to to your default directory (TIP IT'S THE DIRECTORY THAT SHOWS WHEN YOU OPEN A CMD/TERMINAL WINDOW) example "C:\Documents and Settings\Administrator"
*In here create a folder called apktool
*Inside apktool create a folder called framework
*Inside framework place inside your framework-res.apk and twframework-res.apk and rename them:
framework-res.apk to 1.apk
twframework-res.apk to 2.apk
You can install extra frameworks if desired but change the tags for example i want to install ICS framework but i have GB installed simply do this:
Copy over and rename
framework-res.apk to 1-ICS.apk
twframework-res.apk to 2-ICS.apk
>>SCREEN<<

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


*Start the "script.bat" by double clicking. (At first time of running this will create the necessary folders).
*Goto apk_manager\place-apk-here-for-modding\ and drop in the apk you want to work with.
*Select option 22 and the number of the apk to decompile.
*Select option 9 and let apk manager do its magic
*When finshed check the log in the apk_manager folder for errors and rectify.
*The decompiled apk is found in apk_manager\projects

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


*Select option 22 and the number of the apk to compile.
*Select option 11
*When prompted choose y/n to system apk depending on its origin (market apps no!!) If it is a system apk then select y and y again
*When the script has finished working navigate to apk_manager\keep and delete any file you modified. If you edited any xml's or "hidden" xml's for example values\colors.xml delete resources.arsc. If you edited smali delete classes.desc (if deodexed) then hit any key to continue.
*When finished your new apk will be located in apk_manager\place-apk-here-for-modding\ with the prefix "unsigned"
*COPY out of the folder Rename by removing the "unsigned" for use.

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

Signing:

***DO NOT SIGN SYSTEM APPS***DO NOT SIGN SYSTEM APPS***DO NOT SIGN SYSTEM APPS***
***DO NOT SIGN SYSTEM APPS***DO NOT SIGN SYSTEM APPS***DO NOT SIGN SYSTEM APPS***

*Select option 22 (MUST BE "UNSIGNED" APK)
*Select option 12
*When finished working the apk will be located in apk_manager\place-apk-here-for-modding\ with the prefix "signed"
*COPY out of the folder Rename by removing the "signed" for use.

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

Now you can add your new files to the universal theme zip.

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

Here is a video on using apk manager:
>>Video<<
Quality isnt great.


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

Credits:

*Brut.all for apktool
*Daneshm90 for apk manager
*jesus freke for smali/baksmali
*xda for being xda
*The members who help this place what it is

Image locations and names.

Editing the two following apk's will dramatically change the appearance of your device.


Where to find icons and their names-

Status bar background:
The status bar is controlled by a png oddly named "statusbar_background.9.png".

Notification background:
This is notification blind or curtain as some people call it. This is controlled by "status_bar_background.png".

Quick settings/toggles:
These are underneath the status bar when you pull down the notification panel and go by the name of "quick_panel_icon_***_png".

Connection icons:
All of the connection icons from 3g, WIFI, GPS and signal strength also live in SystemUI and go by the names of "stat_sys_***.png".

"Clear" button:
This sits on your provider bar when you have notifications. This goes by the name of "btn_default_small_***.9.png".

Buttons:
The buttons that appear throughout the system are controlled by 2 sets of png's named "btn_default_***.9.png" and "btn_default_small_***.9.png".

Menu's:
The menus are controlled by images that contain the name "menu_***.9.png".

Menu icons:
The icons that sit on your menu background are conveniently named "ic_menu_***.png".
(Beware that some apps use their own ic_menu icons!!)

Pop-ups:
These are the little windows that "pop-up" and display information and the background when you are choosing your widgets. These are cleverly named "popup_***.9.png".

Battery:
The battery icons are under the name "stat_sys_battery_***.png".


TIP: Anything that appears in your status bar will start with the name "stat_"

Be careful when editing .9.png's, these will cause force closes and boot loops if not edited properly. You have been warned!!!

How to use the "Empty Universal Theme Template.zip".

The zip is made up of 6 primary files:

*META-INF
*MORPH
*tools
*XTRAS
*MOD.config
*README.txt

The "README.txt" contains credits and information on how the script works but illl try and explain it with more clarity.
The only folders we need/use are "MORPH" AND "XTRAS", leave the other files alone.


MORPH

This folder is used for replacing the internal files of an apk.

What does this mean?
Basically you place in here your png's,xml's(compiled!!!), resources.arsc and classes.desc(if your deodexed) in the appropriate directory within the "MORPH" folder, example:

I change my status bar png so i need to rebuild the path within "MORPH".
If i open up the SystemUI.apk and navigate to my "statusbar_background.9.png" it will be located in "SystemUI.apk/res/drawable-hdpi/".
The SystemUI.apk belongs in "system/app/" so we build a directory in MORPH that looks like the following:

MORPH/system/app/SystemUI.apk/res/drawable-hdpi/statusbar_background.9.png

TIP: If you are not sure where a file should be positioned in the MORPH folder just open up the apk your working on and follow the path, then re-create it within....
Or
Extract the apk and work your way from inside out deleting EVERYTHING EXCEPT for the files you are changing. Now you should be left with the apk structure containg just those files, you can now open up the empty template, goto MORPH and drag in the apk FOLDER you just edited.

>>>Picture<<<


XTRAS

This folder is used for replacing apk's

apk's should be placed in one of the following:

XTRAS/system/app/ This is for system apk's
XTRAS/system/framework/ This is for framework apk's
XTRAS/data/app/ This is for market apk's
XTRAS/sdcard/ This is for any extras you want to push to your sd card

Hope this helps, happy flashing.

The skinny on .9's

What are are .9.png's and how do i edit them??


.9's are very simple to use, it's when they are created incorrectly they become a pain in the arse.

.9.pngs use a 1 pixel BLACK (000000) border to determine its characteristics and how it behaves.
The green borders (top and left) controls which part of the image is stretched.
The red borders (bottom and right) controls where the text is displayed on the image if applicable.
The image below shows you how the borders contol a .9.png:
I used green and red for display purposes!!.




WHENEVER EDITING .9.PNG'S ALWAYS ENSURE THE BORDERS ARE NOT COMPRIMISED AND MUST BE A SOLID BLACK, RGB CODE= 000000


You can use a graphics editor to create these borders but i prefer to use "draw9patch.bat" tool which comes with android sdk. draw9 lets you preview what your stretched image will look like.

TIP: If your image has rounded corners avoid adding pixels around them like the image above. This will prevent the png from being stretched and looking like a turd!

When do i edit the 9patch border??

If you decompile an apk and make edits to a .9.png please check that your borders are unaffected and remain black/000000.

If you create an image from scratch then expand the canvas 2x2 pixels (thats a 1 pixel border for each side) and draw your BLACK borders.
Or
Open it up with draw9 and add borders.

Hope this helps.