Jump to content


Photo

Guide To Building A Theme


  • Please log in to reply
26 replies to this topic

#1 DSGMach1

DSGMach1

    Themer

  • Superuser
  • 264 posts
  • LocationGriffin, GA

Posted 20 September 2012 - 11:35 PM

**I know this may seem like a lot and may even be overload for some, but I promise once you do it a few times you will see just how easy the whole process can be. It is not as bad as it looks.**





First things first. These two links below are where I really got my start. They explain the basics of using apkmanager and apktool. I STRONGLY recommend that you read both of them and have an understanding of each tool first as it will make my guide make even more sense to you when you follow it.

Note: If you use apkmanager be sure that you have version 5.0.2

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content




I do most of my decompiling and compiling with apktool, but apkmanager is a great tool to have since it will sometimes compile apk's that apktool has problems with.

You should have two versions of apktool that were listed in that thread by Gary. For my own use I named the folders ICS Apktool (for compiling ICS apk's) and Old Apktool(the older version of apktool that decompiles the apk's)

You also need to download 7zip if you don't have it already.

Please Login or Register to see this Hidden Content








Place the rom you want to theme on your desktop and open it with 7zip,


You will want to get the framework-res.apk from the rom you are working with and put a copy of it in both ICS Apktool and Old Apktool. Just simply drag-and-drop.

Next pull out whatever apk you want to edit and put it in the Old Apktool folder only.



Note: framework-res is located in system/framework
all other apk's will be in either system/app or data/app

_________________________________________________________________________________________________________________________________


Now by following Gary's thread you can see that to pull up command prompt you hold $#!7 and right click on Old Apktool. Then click "Open command prompt here"

Now you can decompile the apk that you want to edit.

The process to decompile an apk is to type in this exactly.

apktool if framework-res.apk [Enter]

apktool d SystemUI.apk [Enter]

You should end up with something like this
Posted Image


When you are typing in the name of the apk be aware that it is case sensitive so you must get every capital letter and hyphen exact. Also be sure to put ".apk" on the end.

You should now have a new folder in Old Apktool called SystemUI.
Now copy this folder and paste it in ICS Apktool. I say copy because it is good to have an unmodified version of the apk you are working on in case you need to fall back on it for any reason. When you start editing xml's this unmodified copy can become invaluable.

Now in ICS Apktool, open the SystemUI folder.
You will see three folders, AndroidManifest, and apktool.yml
At this point you are only concerned about the "res" folder. Open that folder and you will notice a whole list of folders. There are only a few folders you will actually use when building a theme.

drawable -- Usually there is just xml files in this folder, but sometimes there will be a few images here that you may want to edit
**drawable-hdpi -- This is where the vast majority of the images and icons for any given apk will be found.**
drawable-nodpi -- From time to time there will be a background image or other useful images in this folder, but often times it will not be used.
values -- This is where you will find the xml files that you can edit to change the color of text and backgrounds. I will touch xml files a little bit in another post.

mipmap -- When you see these folders it means that the homescreen/app drawer icon is held here and NOT in drawable-hdpi. I believe you only need to edit the one called mipmap-hdpi, but I always edit all 3 just to be safe.




I put the ** around drawable-hdpi because as you will see this is where the majority of your time will be spent. Basically all of the images you want to edit will be in this folder.




_____________________________________________________________________________________________________________________________________



So now you're ready to start editing some images. Let the tedious work of editing hundreds and hundreds of images begin.

IMPORTANT: .9.png You will see many files that have .9.png in their name. These images are special and you must be careful when working with them. You will notice that each one has a 1 pixel wide border all the way around the edge of the canvas. DO NOT TOUCH THIS 1 PIXEL BORDER. Those black lines MUST stay black and can NOT be erased. These black lines are actually guides that tell which parts of the image will be stretched. I will post a link at the bottom that will explain more in depth about .9.png files.


With that being said don't be afraid to edit .9's. As long as you don't touch that border you will not have any problems. It is just a warning to explain how important they are.



The best thing to do as you start is just work with simple color changes and get used to editing the images with Photoshop, Paint.net, Gimp, or whatever editing program you are using.

These tools will become your best friend:
Magic wand
Quick selection(great tool in photoshop)
Hue/Saturation
Curves
Layers (If you are familiar with using layers then use them. They can make all the difference in the world in getting the desired effect as you get more advanced.)

There are many more, but those are my "go-to" tools.



______________________________________________________________________________________________________________________________________




Now lets go over xml files a little bit.

This is just a quick run down and not a guide for editing xml's. I will only scratch the surface on this.


If you are going to edit xml files then download Notepad ++ here

Please Login or Register to see this Hidden Content



In your res folder open up the "values" folder. In this folder the only files you are worried about at this point are colors, drawable, and styles.

Open the colors.xml file.

You will notice each line has a hex code in it that looks like this "#ffffffff"
There are 8 characters in it. The first two should be left alone as they control the alpha transparency of the color. The six after that can be changed however. In most photo editing programs it will tell you the hex code of the color you have selected. There are also plenty of sites for finding the hex code of a color.

For instance #ffffffff is the hex code for white. If I wanted to change this to ICS blue then I would make it #ff33b5e5

​Be aware of the descriptions for each line and it will sometimes be easy to tell what it controls and other times you will just have to play with it to find the line that will change the color of what you want.

The styles and drawable xml files sometimes will not have any lines in them to control the color of things so don't be alarmed if you don't see anything in them. If in the styles.xml you can't easily find any lines with color controls in them, then just do a quick CTRL+F search for "color" and see if anything comes up.



Sometimes there will be a need to go to layout folder in the res folder to get the desired color change. For instance, to change the color of the clock on a stock based rom you have to edit the status_bar.xml in the layout folder(this is in the res folder).


Note: Common hex code colors:
ICS Blue 33b5e5
Black 000000
White ffffff

______________________________________________________________________________________________________________________________________



Now let's go over recompiling the apk.

Hold control and right click on ICS Apktool. Then click "Open command window here"

Now type in exactly:

apktool if framework-res.apk [Enter]

apktool b SystemUI [Enter]

This will compile the apk (hopefully with no errors)
It should look like this:
Posted Image

IMPORTANT: Remember that everything is case sensitive. Also when compiling the apk do not put the ".apk" extension at the end of the name.



_____________________________________________________________________________________________________________________________________


zOMG NOOOOOOOOOO I got errors help me!!!


Don't panic. Errors compiling are an inevitable when building themes. It could be something as simple as you accidentally hitting the black guide on a .9.png with your brush tool or you forgot to put a # at the beginning of the hex code. If you haven't editing any xml files then chances are that you have a problem with one of the .9's.

And this is where apk manager becomes extremely useful. (mopar57 explained how to use apk manager very well so be sure to read through his guide carefully for an even better understanding.)

Take your stock unmodified SystemUI.apk and put it in the "place apk here for modding" folder in apk manager.
Run the script.
Option 22 to select the apk
Option 9 to decompile the apk.
Then open the projects folder. In here you should see the SystemUI folder once it finishes decompiling.

Now in ICS Apktool you will want to copy all of the images you edited in the SystemUI folder and paste them in to the proper location of the SystemUI folder that is in APK Manager.

Run the script again.
Option 22 to select the apk again.
Option 11. This compiles the selected apk.

If there is a problem with a .9.png files it will pop up saying that there was an error. This is a good thing. Close the script and open the log.txt file. This is an error report that will show you what went wrong. Scroll to the beginning of the most recent report. The most recent one will be the bottom one.



Posted Image



Notice on this log that near the top there is this line:
"ERROR: 9-patch image C:\Users\Lee\Desktop\Apk_Manager_ICS\other\..\projects\Phone.apk\res\drawable-hdpi\dial_btn_bknd.9.png malformed."

This tells exactly what .9 image you need to go back and fix because something happened to the 1 pixel border. Once you correct the image try to compile again.



_____________________________________________________________________________________________________________________________________




So the apk compiled with no errors this time. Congrats you are almost there.

Be sure to download mopar57's flashable zip in the thread about using apkmanager. Place this zip on the desktop.
Now make a new folder called "Themed APK's"

Open the original rom and drag-n-drop SystemUI.apk to this Themed APK's folder. So you should have a stock unmodified copy in the Themed APK's folder.
Open this stock SystemUI.apk using 7zip.

Now in ICS Apktool open the SystemUI folder. There should now be a new folder called "dist"
Open it and you should see a SystemUI.apk.

Open this SystemUI.apk using 7zip.


You should now have two SystemUI.apk files open in 7zip. Now you want to drag and drop ONLY the res folder and resources.arsc from the apk that was created in apktool to the stock apk that you opened from the Themed APK's folder.

Note: The resources.arsc file is what holds the xml files from the values folder.

You can close the 7zip windows now.



The only thing left to do now is open mopar57's flashable zip file and drag and drop the apk from the Themed APK's folder in to the proper folder of the zip.

Congrats now you are ready to flash your new theme.




______________________________________________________________________________________________________________________________________





EXTRA NOTES:

If you modify LatinIME.apk (keyboard) then when you get to the point where you are drag and dropping the res folder and resources.arsc to the unmodified apk.....you CAN NOT move the res folder. You have to open the res folder and move ONLY the drawable-hdpi folder. If you don't it will force close when you flash it. Be sure to thank 24v for that tip!!!

If you try to theme contacts.apk or phone.apk for a rom that uses the aosp version (typically CM9 and AOKP roms) then you can not edit the xml files or it will force close. With those you will only be able to edit images.

Here is a link to explain a little more about .9's

Please Login or Register to see this Hidden Content



To help with hex codes --

Please Login or Register to see this Hidden Content

**courtesy of andlaw**


More to come as I think of them.






I would like to thank all of the devs and theme builders here for there help and encouragement since I got in to making themes a few months ago. This is a truly amazing site and I'm not going to drop specific names b/c at some point nearly all of the devs here have helped me in some way. Be sure to show your support to those guys and make a donation to them if you can so they can continue to bring us more great development for our phones.
  • jbag1489, BytecodeMe, lostsoul01 and 4 others like this

#2 DSGMach1

DSGMach1

    Themer

  • Superuser
  • 264 posts
  • LocationGriffin, GA

Posted 20 September 2012 - 11:38 PM

I'm always available through PM or just post back here with your questions and I'll give any help I can.


I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.
  • BytecodeMe, lostsoul01 and Gytole like this

#3 andlaw

andlaw

    BW ftw!! !!!!!

  • Developer
  • 2,463 posts
  • LocationOH-I-O
  • Current Device(s):Nexus 6

Posted 20 September 2012 - 11:49 PM

I'm always available through PM or just post back here with your questions and I'll give any help I can.


I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.


nice writeup man, im sure it will help out many new themers! :)

Sent from my XT912M running BW.6.16.214.ROM

"A truly blacked out experience"

Posted Image

[XT912 |[(BLACKWIDOWICS 214)] | [(BLACKWIDOWICS AOKP/CM9)] | [(BLACKWIDOWJB AOKP/CM10/CNA)] | [(wWIDOWICS 214)] | |[(BLACKWIDOWHDish)]| XT912]

[XT926 |[(BLACKWIDOWHD|wWIDOWHD)]| XT926]


#4 Guest_BDH_*

Guest_BDH_*
  • Guests

Posted 20 September 2012 - 11:50 PM

I'm always available through PM or just post back here with your questions and I'll give any help I can.


I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.


Dude..extremely good write up and I will "sticky" this. Also, nice to see that my thread on apktool helped someone :)

Again, very very nice write up and hopefully this will get more people into themeing!! Thanks DSG!

EDIT: Pinned.
  • lightsword likes this

#5 Rinkle McBally

Rinkle McBally

    Perv McGert

  • Developer
  • 860 posts
  • Twitter:Rinkle_McBally
  • Google+:RinkleMcBally22@gmail.com
  • LocationForest Lake MN
  • Current Device(s):S3 D2vzw, Galaxy Tab 2

Posted 21 September 2012 - 03:30 AM

Thank you for the write up very informative people will get plenty use out of this, great job

EST 4 LIFE

rink2_zps72b73afa.png

**** If you want a signature, wallpaper or avatar done feel free to hit me up send me a pm ****


#6 EmericanX

EmericanX

    Developer

  • Developer
  • 1,027 posts
  • Twitter:@EmericanX
  • LocationPrince George, VA

Posted 21 September 2012 - 04:18 AM

Great write up man! Now everyone get to work! Lol... I wanna see some themes poppin! ;-)

Sent from my Galaxy Nexus using Tapatalk 2

#7 BytecodeMe

BytecodeMe

    Private Pile

  • Superuser
  • 2,004 posts
  • Twitter:@BytecodeMe
  • LocationSan Diego, California
  • Current Device(s):Nexus 4, Droid Razr Maxx HD

Posted 21 September 2012 - 05:35 AM

I'm getting to work for sure! Thanks DSG!

Sent from my DROID RAZR using Tapatalk 2

byte3plusrainbowsmallllllllller.png


#8 BytecodeMe

BytecodeMe

    Private Pile

  • Superuser
  • 2,004 posts
  • Twitter:@BytecodeMe
  • LocationSan Diego, California
  • Current Device(s):Nexus 4, Droid Razr Maxx HD

Posted 21 September 2012 - 06:34 AM

I did it! I got my framework-res to compile! Thanks DSG, now lets see if this boots or not. :D

byte3plusrainbowsmallllllllller.png


#9 DSGMach1

DSGMach1

    Themer

  • Superuser
  • 264 posts
  • LocationGriffin, GA

Posted 21 September 2012 - 11:09 AM

Thanks guys. Hopefully we will see some new cool themes come out of this.

I'll post some more tips and tricks to help with common xml edits i make.

Sent from my DROID RAZR using Tapatalk 2

#10 andlaw

andlaw

    BW ftw!! !!!!!

  • Developer
  • 2,463 posts
  • LocationOH-I-O
  • Current Device(s):Nexus 6

Posted 21 September 2012 - 11:14 AM

Thanks guys. Hopefully we will see some new cool themes come out of this.

I'll post some more tips and tricks to help with common xml edits i make.

Sent from my DROID RAZR using Tapatalk 2


and this is just one of the many reasons i am glad i chose this place to call home. the community makes this place the great place it is.. keep up the great work~ :ph34r:

Sent from my XT912M running BW.6.16.214.ROM

"A truly blacked out experience"

Posted Image

[XT912 |[(BLACKWIDOWICS 214)] | [(BLACKWIDOWICS AOKP/CM9)] | [(BLACKWIDOWJB AOKP/CM10/CNA)] | [(wWIDOWICS 214)] | |[(BLACKWIDOWHDish)]| XT912]

[XT926 |[(BLACKWIDOWHD|wWIDOWHD)]| XT926]


#11 EmericanX

EmericanX

    Developer

  • Developer
  • 1,027 posts
  • Twitter:@EmericanX
  • LocationPrince George, VA

Posted 21 September 2012 - 11:22 AM

+1.. honestly I forget to even look at other forums a lot of times now a days! Lol

Sent from my Galaxy Nexus using Tapatalk 2

#12 Aliceics

Aliceics

    Graphic Designer | Themer

  • Members
  • PipPipPip
  • 550 posts
  • Twitter:alicerzr
  • Google+:littlemissalice1@gmail.com

Posted 21 September 2012 - 11:39 AM

Nice guide :) I was thinking of making a video series of tutorials on various theming aspects.
  • c_live_lee likes this

#13 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 02 October 2012 - 01:12 AM

Thanks for this guide!

  Exodus-Sig%204.png


#14 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 04 November 2012 - 07:41 PM

Once I'm done with framework-res and SystemUI, can i use apktool to decompile other apks, make edits and then recompile? Do I do it the same way or are they dependant on something other than framework-res?

  Exodus-Sig%204.png


#15 DSGMach1

DSGMach1

    Themer

  • Superuser
  • 264 posts
  • LocationGriffin, GA

Posted 12 November 2012 - 05:18 PM

Once I'm done with framework-res and SystemUI, can i use apktool to decompile other apks, make edits and then recompile? Do I do it the same way or are they dependant on something other than framework-res?


Do the same thing with all apk's using framework. I have not found anything dependent on anything but framework. Yes use apktool to decompile and recompile. There may be a time when an apk won't compile with apktool even though everything is correct. In those situations I use apk manager 5.0.2. If you have that problem just let me know and I can walk you through that.

#16 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 21 November 2012 - 02:16 PM

I tried to decompile with apk manager but got an error every time, and I noticed that the apks decompiled but the. 9s didn't decompile correctly.

Edit: Using the Original APK Tool, I did decompile some apks. I noticed however, that I'm getting an error message: "Can't find 9patch chunk in file: "drawable-hdpi/list_selected.9.png". Renaming it to *.png." I'm considering redrawing it in accordance with other 9patches that are similar but I don't know if this will work.

  Exodus-Sig%204.png


#17 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 30 November 2012 - 06:39 PM

I'm having trouble getting some of my edited apks to compile. Phone, Gallery, Chrome, and BlurCamera will not re-compile, and I've tried ICS apktool, original apktool and APK Manager. It's not problems with the .9 PNGs, I'm almost positive. Don't know what the issue is. This is a copy of the error message I got when I tried to compile Chrome:

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  98KB   14 downloads


Edit: I did check APK Manager and it did not list any .9 PNGs as the culprit for this.

  Exodus-Sig%204.png


#18 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 04 December 2012 - 03:37 PM

Do I need to install framework-res, blur-res, AND moto-res in apktool to properly decompile the apks in a blur-based Rom?

Nevermind, I figured that out! lol

  Exodus-Sig%204.png


#19 EmericanX

EmericanX

    Developer

  • Developer
  • 1,027 posts
  • Twitter:@EmericanX
  • LocationPrince George, VA

Posted 04 December 2012 - 03:53 PM

I just told you in PM! :-P lol... You don't always have to. But if you're having dependency issues... Its only a few extra steps to ensure that's not the problem

I will add though... The screen shot above does not appear to be related to dependencies... It appears as if your apktool doesn't know how to handle the resources for the apk properly.

Sent from my HTC6435LVW using Tapatalk 2

#20 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 04 December 2012 - 03:55 PM

I don't mind the extra steps...I just want to make sure I type them in the same way each time so I can eliminate any variables...

  Exodus-Sig%204.png





2 user(s) are reading this topic

0 members, 2 guests, 0 anonymous users