[GUIDE] [TUTORIAL] How to Modify Theme Engine APKs (Windows only) [CM10.x Themes]

[kroz]

HOW TO MODIFY THEME CHOOSER APKs (Windows only)

this thread was created to help my HUEsers modify my theme.apk, (may be applicable to other themes as well)
to get familiar and exposed on the contents of it and basic filenames / codes inside the apk,
because some users are not fully satisfied with my releases
some want additional stuffs added, some want to change some parts/areas, some want to remove specific apk being themed,
as much i want to help and provide modified themes for you, i may be busy most of the time,
and i can't even grant all your requests
so i decided to start the thread to help you guys, guide on how to mod it,
and who knows, one of these days
you will become one of the Recognized Themer of XDA,
enjoy and i hope you found this useful


WARNING!!!:

use this guide for your own use only, if you wish to release in public and start a new thread,
PLEASE ASK PERMISSION TO THE DEVELOPER and GIVE PROPER CREDITS AND LINKS
and DON'T modify and release their paid/donate version themes, RESPECT PLEASE!!!


WHAT YOU WILL NEED?

Java Platform (JDK)
Android SDK (included in ADT Bundle)
Notepad++
APK multitool - thanks @raziel23x
modified aapt.exe - thanks @titanic_fanatic


SETTING UP...

1. now that you have downloaded all the tools above, install jdk, sdk, and apk multitool one by one,
(instructions must be on their individual websites) you may want to install them all in the root of your drive C:

2. once you are done installing apk multitool, grab the aapt.exe you downloaded in the link above
(please thanked @titanic_fanatic on his post and work - this is a modified aapt.exe that lets you compile upper case package names)
and put/replaced existing aapt.exe in APK-Multi-Tool/other


LET"S DO IT!

decompiling theme (Hue.apk for ex)
1. put Hue.apk in APK-Multi-Tool/place-apk-here-for-modding
2. double click Script.bat in APK-Multi-Tool
3. press any key
4. press 9 (Decompile apk)
5. go to APK-Multi-Tool/projects and you will find a folder named Hue.apk
6. that's it, you have just successfully decompiled my theme and time to do the edits
7. don't close script.bat

modifying apk
1. this is the time you will do your modifications (changing/adding/deleting images and codes)
2. i will discussed most important parts of apk in post #2 to keep this instruction short and clean
3. don't close script.bat

compiling / signing / installing
1. on your phone, go to settings > developer options > and check usb debugging
2. connect your phone on your pc / laptop
3. now in Script.bat opened, select 15 (this will compile, sign and install your modified theme all at once at your phone)
4. that's it, check your phone using your modified theme
5. congratulations!
6. btw your modified apk is located in APK-Multi-Tool/place-apk-here-for-modding as signed_Hue.apk (you can rename it)


MY THEMES
Hue
Asul
SimpleSoft
HeKi [Hello Kitty]


CREDITS / THANKS
Learned from their threads:
anthonycr
nhnt11
ebs512

 

[kroz]

BASICS INSIDE THE APK

3 basic file types/extensions we will be dealing with most of the time
1. .xml - color codes, image redirections, are inside this file (use Notepadd++ to open such files)
2. .png - these are the images/icons we usually see on most part of the phone ui (open using photoshop/gimp and dont edit using paint or you will lose its transparency background)
3. .9.png - stretchable pngs that expand or shrink depending on the usage (these images has a black pixel boarder that needs to be preserved, or else you will be having error in compiling)


color codes (hex codes)
quick overview of color hexcodes (range - 0 1 2 3 4 5 6 7 8 9 A B C D E F)
#FF000000 as an example (represents black while white is #FFFFFFFF)
FF or the first two letters of the code represents its transparency 00 means full transparent while FF is opaque (im using 88 or 80 for semi transparent)
next 6 digits are the RGB color code, look at this way #FFRRGGBB
if you want solid red, use #FFFF0000, solid green #FF00FF00, solid blue #FF0000FF
just play with the color codes (im sure you have just played with it in most of the rom options)


decompiled apk
once you decompiled apk, you will noticed a folder named res (this is our main concern, we will be working with this folder all the time)

inside the res folder...

there are lots of drawable-** folder that contains all of our images (.png and .9.png),
most of the icons are located in drawable-xhdpi and drawable-hdpi,

you can also find values folder containing some xmls such as
styles.xml - this xml is where i usually make my inverts of ui (from holo.light to holo for example)
drawables.xml - some color codes were redirected here
colors.xml - some of the hex codes inside styles.xml were redirected here, most color codes inside drawable folder and color folder are also redirected here, so i can only have one place of editing when converting color codes on my color versions of themes

next is the xml folder
xmls inside this folder controls the apps being themed, you can find package names of the apps as the xmls filenames
if you will noticed, there are some xmls here having upper cases, that's why we need the modified aapt.exe (again thanks titanic_fanatic)

last is the mipmap-** folder
this folder contains all the themed launcher icons, i already redirected all my themed app's launcher icons here


file names
how do i named the images? let's put an example
go to res/xml and look for com_android_calculator2.xml
now this is the xml that controls my themed calculator, if you open up the xml via Notepad++ you will notice the original png file names being replaced by my own themed png through a line code

this line for example (this is the delete icon in calculator)

<item name="drawable/calc_clear_symbol">@drawable/calculator_calc_clear_symbol</item>

the stock/original png which is calc_clear_symbol.png under drawable-xhdpi folder

<item name="[B][COLOR="Red"]drawable/calc_clear_symbol[/COLOR][/B]">@drawable/calculator_calc_clear_symbol</item>

is now being replaced by my themed icon calculator_calc_clear_symbol.png under drawable-xhdpi folder

<item name="drawable/calc_clear_symbol">@[B][COLOR="Red"]drawable/calculator_calc_clear_symbol[/COLOR][/B]</item>

i just put a prefix calculator_ so i can easily locate where they are when modifying


**most of the themes out there uses the app's package name as their prefix
for example...
in my theme i use

<item name="drawable/calc_clear_symbol">@drawable/[B][COLOR="Red"]calculator_[/COLOR][/B]calc_clear_symbol</item>

but others and most of them use

<item name="drawable/calc_clear_symbol">@drawable/[B][COLOR="Red"]com_android_calculator2_[/COLOR][/B]calc_clear_symbol</item>

i just make it simple the way i can easily search them in my drawables folder

 

[kroz]

IT'S MODDING TIME!

i will show you some examples and what file to edit with these mods
again file names of images may vary depending on theme,
but package name under res/xml are standard on all theme


before you begin modifying, delete Public.xml in res/values folder


remove themed launcher icons
delete these two folders
res/mipmap-hdpi
res/mipmap-xhdpi


remove themed specific apps
for example you don't want my themed keyboard and prefer stock aosp keyboard look
delete the xml of the apps you want to be removed, in our example keyboard which is
com_android_inputmethod_latin.xml in res/xml folder


change background of system and dialer
prepare your custom background (make sure you have the right size as per your screen resolution)
hdpi - 480x800
xhdpi - 640x960
and name it as
contacts_background_dial_holo_dark.png and framework_background_holo_dark.png
and replaced existing backgrounds in res/drawable-nodpi


change notification background
the image for that is system_notification_panel_bg.9.png located in res/drawable-xhdpi
note that this is a .9.png, be careful in editing and preserve the black 1px boarder of it
however you can bypass the image if you want to make it the stock look or pure black look

open com_android_systemui.xml in res/xml
look for the line

<item name="drawable/notification_panel_bg">@drawable/system_notification_panel_bg</item>

you can see that it was redirected to my themed image system_notification_panel_bg.9.png
if you prefer the stock background look, just delete that entire line
if you want it to be pure black, remove the redirection to the custom image and this time redirect it to hex code instead

<item name="drawable/notification_panel_bg">#FF000000</item>

change (non connected to google server) signal back to grey
download HueSilver.apk, rightclick and open archive using 7zip
go to res/drawable-xhdpi (for phone ui only, for tablet ui, go to res/drawable-sw720dp-xhdpi)
drag these icons outside the apk and replaced it on the apk you were modifying
(dragging existing images from the apk is only applicable to .png and not to .9.png)

system_stat_sys_data_connected_1x.png
system_stat_sys_data_connected_3g.png
system_stat_sys_data_connected_4g.png
system_stat_sys_data_connected_e.png
system_stat_sys_data_connected_g.png
system_stat_sys_data_connected_h.png
system_stat_sys_data_connected_hp.png

system_stat_sys_signal_1.png
system_stat_sys_signal_2.png
system_stat_sys_signal_3.png
system_stat_sys_signal_4.png

system_stat_sys_wifi_signal_1.png
system_stat_sys_wifi_signal_2.png
system_stat_sys_wifi_signal_3.png
system_stat_sys_wifi_signal_4.png


i will update this post on my free time and depending on users concern
just ask here and i will see if i can answer all areas, sometimes i can't remember what file/png i've changed

 

[kroz]

---

 

[kilometers4]

Looks good
Keep up the good work

Edit: Added to the RootBox Jelly Bean Mods thread http://forum.xda-developers.com/showthread.php?t=1806577

 

[rydog66]

Very nice, thank you

Sent from my Nexus 7 using Tapatalk HD

 

[Mercado_Negro]

Bookmarked for the weekend! Thanks, kroz!

 

[kroz]

thanks guys, i hope you'll learn something in this thread

 

[yaibakt]

thanks a lot for your guide. it will help us A LOT.

but i tried to decompile "hue_2.8.apk" twice, but it showed error.
i decompile some other apps' apk files and it's ok.

 

[kroz]

thanks a lot for your guide. it will help us A LOT.

but i tried to decompile "hue_2.8.apk" twice, but it showed error.
i decompile some other apps' apk files and it's ok.

what error?
can you try to rename first Hue_2.8.apk to Hue.apk and decompile again

 

[yaibakt]

what error?
can you try to rename first Hue_2.8.apk to Hue.apk and decompile again

the 2nd time i tried, i renamed it to Hue.apk already.
ive been using this software to mod some other apps before. but this is error on mine:

 

[kroz]

the 2nd time i tried, i renamed it to Hue.apk already.
ive been using this software to mod some other apps before. but this is error on mine:

try to update your framework-res.apk in /other folder
replaced it with your rom's framework-res.apk (android 4.2.2)

 

[JeraldPenus]

Salamat.

How about the clock? If I want to make it the default one. Thanks

 

[kroz]

Salamat.

How about the clock? If I want to make it the default one. Thanks

which clock?

 

[yaibakt]

try to update your framework-res.apk in /other folder
replaced it with your rom's framework-res.apk (android 4.2.2)

still no luck. i get framework-res.apk from my phone at folder /system/framework/ and copy to the other/ folder of apk multi tool, and try to decompile again, but still error.

 

[rtimoff]

Just changed background for dialer and settings:laugh:
Wow. I knew before its a lot of work what you do... but its huge work(after I saw how many .png`s there)!!!:good:
Thanks for lesson Mark

 

[kroz]

still no luck. i get framework-res.apk from my phone at folder /system/framework/ and copy to the other/ folder of apk multi tool, and try to decompile again, but still error.

hmmm, maybe you can try to check this thread
http://forum.xda-developers.com/showthread.php?t=1310151

i am not expert on the tool itself, maybe the developer could give some suggestions

Just changed background for dialer and settings:laugh:
Wow. I knew before its a lot of work what you do... but its huge work(after I saw how many .png`s there)!!!:good:
Thanks for lesson Mark

there are lots of images, and i already deleted thousands of repeated images and just redirect those
to make the file smaller,
5 months in existence

 

[rtimoff]

there are lots of images, and i already deleted thousands of repeated images and just redirect those
to make the file smaller,
5 months in existence

yeah, titanic work

 

[kroz]

@kroz

I just noticed that the signal bars are always blue (using HueLite2.8), which is weird because I've been using your theme for a couple of versions and this is the first time I notice this. You can read my specs on my signature below.

I follow the color change from grey to blue and viceversa to check if there's Internet on my phone.

Could you please tell me if I can edit this using your guide and what should I change if that's the case? It would be great if it followed the color conventions in the official version, though.

Thanks in advance, sir.

download HueSilver.apk, rightclick and open archive using 7zip
go to res/drawable-xhdpi (for phone ui only, for tablet ui, go to res/drawable-sw720dp-xhdpi)
drag these icons outside the apk and replaced it on the apk you were modifying
(dragging existing images from the apk is only applicable to .png and not to .9.png)

system_stat_sys_data_connected_1x.png
system_stat_sys_data_connected_3g.png
system_stat_sys_data_connected_4g.png
system_stat_sys_data_connected_e.png
system_stat_sys_data_connected_g.png
system_stat_sys_data_connected_h.png
system_stat_sys_data_connected_hp.png

system_stat_sys_signal_1.png
system_stat_sys_signal_2.png
system_stat_sys_signal_3.png
system_stat_sys_signal_4.png

system_stat_sys_wifi_signal_1.png
system_stat_sys_wifi_signal_2.png
system_stat_sys_wifi_signal_3.png
system_stat_sys_wifi_signal_4.png

 

[Mercado_Negro]

download HueSilver.apk, rightclick and open archive using 7zip
go to res/drawable-xhdpi (for phone ui only, for tablet ui, go to res/drawable-sw720dp-xhdpi)
drag these icons outside the apk and replaced it on the apk you were modifying
(dragging existing images from the apk is only applicable to .png and not to .9.png)

system_stat_sys_data_connected_1x.png
system_stat_sys_data_connected_3g.png
system_stat_sys_data_connected_4g.png
system_stat_sys_data_connected_e.png
system_stat_sys_data_connected_g.png
system_stat_sys_data_connected_h.png
system_stat_sys_data_connected_hp.png

system_stat_sys_signal_1.png
system_stat_sys_signal_2.png
system_stat_sys_signal_3.png
system_stat_sys_signal_4.png

system_stat_sys_wifi_signal_1.png
system_stat_sys_wifi_signal_2.png
system_stat_sys_wifi_signal_3.png
system_stat_sys_wifi_signal_4.png

Grrr... I'm limited to 8 thanks per day.... Thanks a ton, kroz! You're da man!