50 replies to this topic

[jayrod]

There is information everywhere on how to theme.Problem is..it's everywhere and if you don't know what you are looking for,you may never find it. 

I don't know everything...don't pretend to. I have only been messing with theming for about a year and in that time,I have had help from others so to try and pay it forward,I am writing this little thread in hopes that others can learn how to do things. Without the help from T3T3 droid and  Dubsx, I would possibly still be looking at XML files completely dumbfounded. Without the tips and tricks that have been shared with me by others such as Bama, the things that I am doing wouldn't look as good as they should. See where I'm going with this? 

Now,what I am hoping to accomplish with this thread is:

• Getting you comfortable with the tools that allow for Android files.
• Getting you as comfortable as I can with using photo editing software
• Highlighting the main images and XML files that are generally the most often changed
• A few of my own tricks and tips as well as tips and tricks from others
   

​What this thread is not going to be:

• A "Do it for me" thread. That's not to say that help won't be provided..it merely means that this thread is for you to learn to do it yourself.
• A theme request thread. There are other areas here for things like that. Most of us do this as a hobby when we aren't working,taking care of our kids,having a social life...and those 5 or 6 hours when we are sleeping.   

I am rather suckish at teaching and explaining so I try and let pictures speak for me..this is the best way I have found for my own self to learn so this thread might be a bit picture heavy..sorry.

***I will try and keep this OP as clean and organized as possible and will list what and where in this thread information is. I will grab the first 5 posts for myself and encourage ANYONE who has input to chime in.This will take a few days to get going so please be patient.*****


Decompiling and Recompiling added 8/30/13
XML Editing and common Locations added 9/1/13
The basics of editing Android images  added 9/2/13
Theming the Notification pulldown  added 9/2/13
 ​Working with a flashable .zip added 9/3/13

AOSP Quick Settings tip by Bama added 9/12/13

 Xposed framework tip by Memnoch73 added 9/16/13
 
 
 
 
Theming takes time.You're not likely to have everything look how you want overnight unless all you are wanting to do is change text colors.etc. You don't HAVE to decompile apks to do a theme..heck,you can even do it from within your phone.

Some of this may sound rudimentary or like you are a simpleton,but that is not the intent. I am "dumbing down" some of this because to be quite honest,a lot of this can be intimidating. If you can read and follow directions,you can theme!
 

Tools and the basics of modding

 
There are many tools that can be used in theming . Some people prefer using the basics such as basic Apktool, or script driven tools like Apk Multi tool  ,Tickle My Android,ApkManager but I am more comfortable with using VTS. There are many tutorials all over the place for all of these. Here is a link to one such thread that Memnoch73 brought to our attention.

I also wrote a Quick guide to using VTS for modding/theming   VTS is by far my prefered tool for editing files. It is a very powerful all in one application.
At the end of the day,they all achieve ultimately the same thing..decompiling XML,.9png and sometimes smali files for editing. 

Just like editing text based files,there are plenty of image editing software. Some online services like Pixlr and Fotoflexer can do more advanced things than just the basic Paint application that comes with windows. 
 
There are a few free downloadable applications as well. 
Paint.net 

GIMP  is a popular free application that offers many tutorials and addons. I have not used it in many years as I am more familiar and comfortable with Photoshop.

Photoshop is a very powerful piece of software with tons of tutorials,plugins and downloadable projects (.psd)  I will only say that a simple Google search for Photoshop CS2 will provide you with links to reputable sites and articles. 

But the easiest way to start theming is by 7zip slipping images into .apks. For the most part,it is very straight forward but just like all other techniques,you have to pay attention to file names and locations.You can send your phone into a bootloop with just one image name that is incorrect or have FC's.  

You can download 7zip from HERE

This part is assuming that you already have a flashable .zip or are familiar with ADB pushing . I'm reasonably sure that all of the tools listed above have some sort of option to push and pull files from your phone providing you have everything setup correctly. 

Like many files,.apks are simply compressed archives. You can easily open or pull images from them by changing their association from .apk to .zip and simply right clicking the .zip and extracting the files to a location on your computer. The XML,smali and .9.pngs are still compressed so editing them won't work. A .9.png is a compressed image that is designed in a way to stretch to a specific direction. It does this by having guides or "patches". They are black lines that will only be viewable if the image is decompressed. Editing a non decompiled .9.png will destroy the guides ,thus causing the image to not work as intended..IE,it won't look right and could cause FC's.

****But just because an image is a .9.png doesn't mean it has to stay a .9png******
I'll go more into that later.   

Normal images (.png,.bmp) are pretty much fair game for slipping into .apks, but keep in mind that for the most part,even though an image says it is 64x64, a lot of images are still constrained by what is stated in .XMLs. There are times though,depending on the .apk that you can bork an .apk by changing just one image. I have only had this happen once and I ended up re-signing the .apk.

To slip your images into an .apk  inside of a .zip you simply right click the .zip file,choose 7zip from the menu,select open and navigate to the folder containing the .apk that you are editing ( You will see multiple folders. The majority of the .apks you usually are messing with will be found in System) Once clicking on the System folder you will see a Framework folder and an app folder. Framework is self explanatory as that is where Framework-res.apk resides (In Touchwiz you also could have a TW Framework-res) and if you are in a ROM .zip ,you will see many other files.
In the app folder,this is where things such as Settings.apk ,SystemUI.apk and many others are. Once you find the .apk you are wanting,double click it and it will open showing the files it is containing. You are gonna want to click on the res folder and depending on the ROM/Device/.apk , you will have many folders in front of you. Look for the folder you pulled the original file from and just drag the image over to the open 7zip window.Back out of the .apk and save. That's it. Now you can flash your .zip. If the script inside of this .zip doesn't wipe caches, make sure you do it manually to avoid issues.

[jayrod]

What if what you are wanting to do is more than image swapping? Time to fire up one of any variations of Apktool. Because I use VTS pretty exclusively, the screenshots you will see are from it. However,the basic end results will be the same with command line based tools.
 

Decompiling and Recompiling

 

You've grabbed your tool of choice, gotten everything setup and are ready to try your hand at editing an .apk..let's grab an .apk and begin!

I have decided to do this somewhat backwards and scare you with the ugly stuff first. You're welcome!

What I do everytime I start a project is import the framework-res.apk as well as Settings.apk and SystemUI.apk. These are pretty much the main ones that you'll be spending time in. I test decompile/recompile without making any changes,this way I will know right away how much of a headache I'm gonna have. There are instances that no matter what you try, the .apk will:

• Not import into apktool for when setting up your framework
• Not fully decompile

             or

• Error on recompile when you haven't changed anything. This is what I am going to cover here mainly because the first 2 could be attributed to many things. As best as I understand it, having a special modified apktool that did the original compiling by the ROM builder or whomever the vendor (Motorola,Samsung,etc.) may have their own modified SDK that apktool can't decode. In those cases you can try and ask the ROM maker for help or just hope that apktool gets updated to handle them. 

I am using a framework that I know suffers from failing on test recompile , AOKP for the S4.

Once you have your .apk decompiled,you will have some folders and a few XMLs. 

 1.png   29.98KB   40 downloads

 

Now,lets do a quick recompile. 

 3.png   60.96KB   41 downloads

Woah...what just happened!?!?!?!? 

 Error1.png   217.7KB   41 downloads

Don't panic..just take a look at the log to see what went wrong.

 error2.png   31.82KB   40 downloads

 error3.png   76.93KB   41 downloads

One thing to remember. If just one thing goes wrong,every line of code afterward will automatically show as an error. Depending on which tool you are using and sometimes the .apk you are working with,the primary error could be at the top,middle or bottom of the log. I have no clue why but this has been my experience. As we take a look we see that we have a problem in public.xml.

 error6.png   256.87KB   46 downloads

And after looking at the second error, we see that it's saying that it's not defined. 
Everything that is in an .apk gets "catalogued" in some way. You can add .pngs and XML but you can't simply delete some because you don't think you need them. You have to remove the identifier as well if it has one. It looks like either the images were removed or the XML that told the OS what was in here was removed when it was originally built,but not both. I know very little about how source ROMs are built so this is my best guess. 
OK,lets try and fix this so we can get to theming.One thing that I do is simply copy/paste the errors into Notepad++ This way,I can keep track of which ones I'm changing. In this case we have many and we don't know if it is just one or all that are messed up. (Actually,I do..it was all of them   ) But the best thing to do is change them one at a time,trying to recompile after each change.
Lets take a look at the first error.

 error7.png   273.35KB   51 downloads

And navigate to the public.xml (res/values/public.xml) 

 error5.png   560.07KB   50 downloads

We are looking for line 4881

 error8.png   129.78KB   48 downloads

And simply delete it. But guess what...now we have a gap between 4880 & 4882. Just simply press delete until 4881 looks like this:

 error10.png   30.43KB   43 downloads

Recompile,and if you get the same errors,repeat this process until it compiles. This is one of the biggest pains you will encounter. Most commonly you may get errors with a simple copy/paste mistake (forgetting the # when changing a color,etc.)  or a .9.png error.
With a .9.png, the black "patch" has to be pure black...period. You can have a image that comes real close or even touches the patch line but ultimately you have to make sure that you don't screw the patch up.

 .9.pngExample.png   163.83KB   39 downloads

Taken from my Editing .9's for dummies...like me. *With pictures! tutorial (shameless plug)

If you recompiled and had no errors...CONGRATULATIONS!

 

[jayrod]

You have your environment set up,have test compiled your .apk for errors , now it's time to get to making edits. XML files basically tell the OS what goes where,what color/size etc. text should be, how much screen real estate things should have ,layout,etc.They control a lot more but you get the idea. It can be confusing and give you a headache tracking and backtracking what XML controls what! The actual editing is just like typing anything else, but there are certain "rules" that need to be followed because of the format that XML's use.  In this section, I will cover :

• Some of the most common XML files that are edited
• The basics of XML formats
• ​A few ways to edit XML's

XML Editing and common Locations

 
I'm going to stick with framework-res for my example primarily because it pretty much controls many things. It controls the majority of text colors,Android styles (what controls things such as menus,backgrounds,etc.) and most .apks rely on it. It's the framework of the ROM.I may not be completely accurate with my description of what each folder controls,but it is how it seems to me.
 
Each .apk is different but these are the ones I find myself spending the most time editing stuff. MAKE SURE YOU BACKUP THE ORIGINAL .XML PRIOR TO EDITING!!!! I also suggest testing things after a few changes just so you don't get lost if something doesn't work.
 
 
When you open up framework-res / res, you will see many folders that mainly contain XML's and images .
 
Color  This folders XML's control the majority of  text colors that are not as prevalent but usually will be the ones that you see on certain menus ,and dialog boxes.[/size]
Drawables This folder contains XML's and sometimes images . As best as I can understand,these images aren't DPI specific,meaning they are able to be drawn on multiple screen sizes without issue.A lot of these images are located in the lowest resolution folder your device handles which nowadays would be Hdpi. The XML's that control them basically tell what they are and where they are needed. Depending on the ROM/Android version you may see text colors as well as background colors. 
Drawable hdpi,xhdpi,etc. Here are where the majority of images are. Depending on your devices resolution,you may only see hdpi.Even if you are running a device like a S4,you will still have a lot of images pulled from here as well as xhdpi. It's kind of confusing to know exactly which folder to work from in those instances,especially in Touchwiz! The other folders will have fewer images as they are generally things such as extra images for when the device switches from portrait mode to landscape mode and , depending on the ROM/Android version,the Nodpi folder is where the main background image is. This has slightly changed in some 4.2.2 ROMs as the main background is controlled by a Hex color.
Layout folders  The way I understand these folders is that they hold the XML's that control the miscellaneous things not categorized like certain lock screen and there overall layouts.  
Values Here are the guts. Many other apps depend on these XML's. 
There are many XML's here but the main ones you'll be editing in most .apks are:

• colors.xml
• drawables.xml
• styles.xml
• ​dimens.xml

colors.xml is where the majority of text colors are. Even though most .apks will have their own independent values, there are a few global ones here such as holo_blue_light and holo_blue_dark (the main 2 text colors in Android) .
drawables.xml is where some of the defining values for both image and non image "drawables" are. You likely will be doing more edits in the systemUI drawables than here in framework.
styles.xml is where the "themes" are defined. A style can specify properties such as height, padding, font color, font size, background color, and much more. A theme is a style applied to an entire activity or application.Basically, It's what tells the OS how it is supposed to look. There are a lot of lines in here..and depending on how much you are wanting to do,it could be very time consuming. One main edit in here is allowing certain apps like Settings have a transparent background, allowing for the home screen wallpaper to be shown. 
dimens.xml is where the size of most things is defined.The only times you might edit things in here are if you are wanting to change spacing on things. Android uses .dip (Density-independent Pixels) throughout and it's difficult to know exactly what the breakdown to pixels is. I found this online tool that kinda helps here.

XML files have a special format. If you don't stick to it,you will get compile errors. 

This is a very basic example..but it shows something that not all XML's will show. This is app_icon_background.xml
 

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/icon_highlight_square" />
    <item android:drawable="@color/transparent" />
</selector>

As you can see ,this is pointing to a drawable image. When you do a search in the drawable/hdpi folder you see that this is a .9.png. Here is an little side note. As you see in the XML, it doesn't specify if the image is a .png,.bmp or .9.png. All it is concerned with is that it is an image that Android can handle and that the file name is icon_highlight_square. This means that just because an image starts out as a .9.png , it doesn't necessarily mean it has to end up as a .9.png.  I keep teasing this but I promise to show an example later.
We also see that it is calling for the background to be transparent. There are a few ways Android declares colors. @_________ is going to have been declared in res/values/colors. When we look at what Android is calling transparent,we see it is:
 

<color name="transparent">#00000000</color>

So, we can either declare a color by a specific color name
 

<color name="holo_blue_light">#ff33b5e5</color>

Or it's hex value. In either situation,the format has to be what you see here..@color/holo_blue_light..or #ff33b5e5 
Also,once you are working in other .apks, it will be common to see something like @*android:color/holo_blue_light
Basically it is letting the app know that the value it is looking for resides in another .apk. You may also see this with drawables and styles. 
For drawable values that you are altering, you will need to have @drawable/   before the image name if the image is in the same .apk or @*android:drawable /  if it is in another .apk. 
You can also just keep the image catalogued but make it transparent by either making the image "empty" or by telling Android to just draw a transparent area where the image is to reside. Remember,for the most part, the space has already been allocated for an image.It could be a picture of your dog or just a transparent nothing. If it is supposed to be activated on touch,it will still operate as it should. Here is an example from a TW systemUI : 

This is default:

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/quick_panel_clearbtn_press" />
<item android:state_focused="true" android:drawable="@drawable/quick_panel_clearbtn_focus" />
<item android:state_selected="true" android:drawable="@drawable/quick_panel_clearbtn_select" />
<item android:state_enabled="true" android:drawable="@drawable/quick_panel_clearbtn_normal" />
<item android:drawable="@drawable/quick_panel_clearbtn_normal" />
</selector>

But if you change it to this:

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/transparent" />
<item android:state_focused="true" android:drawable="@color/transparent" />
<item android:state_selected="true" android:drawable="@color/transparent" />
<item android:state_enabled="true" android:drawable="@color/transparent" />
<item android:drawable="@color/transparent" />
</selector>

The image will still be visible in the .apk but invisible to you on your phone

Here is a chart on understanding what the first 2 characters preceding the color number mean:
 
Hex Opacity Values

• 100% — FF
• 95% — F2
• 90% — E6
• 85% — D9
• 80% — CC
• 75% — BF
• 70% — B3
• 65% — A6
• 60% — 99
• 55% — 8C
• 50% — 80
• 45% — 73
• 40% — 66
• 35% — 59
• 30% — 4D
• 25% — 40
• 20% — 33
• 15% — 26
• 10% — 1A
• 5% — 0D
• 0% — 00

[jayrod]

I have been trying to decide how to do the next part.I am by no means a graphic artist..but I am someone who just pushes buttons to see how things work. One thing about Android is that there are a ton of images (ESPECIALLY in TW..WTH were they smoking over at Samsung!?!?!?!?) Going through .apks you will see the same images repeated multiple times.Some images don't seem to be needed anymore and I have no idea why they are still there. GAPS (Google apps) are no exception. They tend to have the same exact images you will see in framework,except they are named ab_ . One thing they do have in common though is how they are created. As you comb through images you will see that you can't just edit them in the same manner. Since I am using Photoshop CS2, the screenshots you'll see are from it,but I'd imagine that the same basic techniques can be applied to various other editors.

The basics of editing Android images

    

Ever open up an image in Photoshop,etc. and it look like this?

 PS1.png   4.29KB   18 downloads

It's because of the way it was created.Photoshop (at least the version I use) is not able to open some images that have alpha masks correctly. For this you will need to use something like Image Ready or Illustrator,etc.I generally open all of these icons,etc. in Image Ready. This way,I don't have to always guess at which one is which. It's as simple as right clicking the image and selecting to open with Image Ready. Once opened you simply have it open the image in Photoshop.

 PS2.png   35.24KB   21 downloads

Now we have an editable image.

 PS3.png   5.54KB   22 downloads

First thing we want to do is check how it is encoded. You want to make sure that it is going to allow for color changes otherwise,it will just be a black and white (grayscale) image.

 PS4.png   18.29KB   20 downloads

Now we are ready to do the simplest mage edits, color change. By doing it this way,Photoshop is simply adding a color hue overlay to the image instead of completely saturating the image with a color (like if you use the paint bucket or apply a color style). It also allows for simple saving of the image. Even though the image has been altered, it's not technically a NEW image.The size has not increased or decreased.

 PS5.png   26.5KB   22 downloads

Make sure you have the Colorize and Preview boxes checked so that you can see what your changes are looking like.

 PS6.png   215.54KB   26 downloads

And either move the sliders or type in a hex color.

 PS7.png   60.59KB   22 downloads

Once you get the color how you like it, hit Ok. Now we have changed the color of our image.

 PS8.png   6.3KB   19 downloads

It's really that simple.At this point you can just save and move on to the next image. 

But,sometimes an image can just be opened up as normal.It loks like it's a normal image, I see 2 colors and everything looks normal. I have tried to change the hue but I don't have that option...what gives!?!?!?

 PS10.png   6.24KB   18 downloads

Make sure it's not setup as grayscale. It is possible to make the image both RGB and grayscale..you just have to tinker with it some.

 PS11.png   35.71KB   21 downloads

Now that we have the basics down,lets take it a step further and work with layers. Because I am not a Photoshop wizard,I'm just showing how I do this. I might not be doing things efficiently but I am used to working with many layers with my limited skills..

 PS_2_1.png   427.76KB   26 downloads

YEAH...that is a mess..and to be honest,kinda overkill since by the time it's drawn on the phone,the majority of the detail will be lost but, it was very rewarding to see on my phone.

I'm going to cover just basic .png image layers. Once we have our image open in Photoshop (or equivalent) make duplicate layers.

 PS_1.png   181.65KB   23 downloads

For this I made 2 duplicates so I have 3 layers. Since I want the top,middle and bottom to look different, I'm going to delete what I don't want from each layer.

 PS_2.png   274.75KB   18 downloads

The easiest way to do this is by using the magic eraser. To keep up with what you are doing on each layer,simply hide the layers you aren't work with by unclicking the "eye" icon on those layers.Once done,you will have 3 independent images with their own editable layer .

 PS_3.png   300.47KB   17 downloads

You can do whatever edits in each layer you want.Here,I just used the Hue color change trick on each layer.

 PS_4.png   316.09KB   16 downloads

It's ugly ..I know but this is just an example. OK..we are done with our changes, but you have to do a couple of things. Sure,you could simply save it as a .png and inside the folder where the original image is by copy/pasting the file name,etc...but this is being done for those who are not as familiar with editing images. 
If you simply try to save right now,it will try and save as a .psd , Photoshop Document file. Android can't read it. 

 PS_5.png   69.8KB   17 downloads

If you just save it as a .png in this state, it will try to make a copy

 PS_6.png   93.53KB   17 downloads

The best way to avoid errors is to make the 3 layers 1 again as a .png. 

 PS_7.png   22.6KB   17 downloads

 PS_8.png   222.85KB   15 downloads

Now,because we broke up the one image into 3, changed colors and re merged...we have made a new image. You can't simply just save as it will automatically try to save as a copy. Just make sure the save as copy box is clear and save it like this :

 PS_9.png   77.12KB   16 downloads

Click yes here

 PS_10.png   22.39KB   16 downloads
And OK here

 PS_11.png   15.69KB   15 downloads

Boom. You just made a multi layered image in Photoshop. 

Side note...When working with .9.pngs,it is important that you make sure Photoshop saves it as a .9.png  Many times you will see it simply save as a .9   That is not a valid image file and will not work. Just simply rename it as a .9.png 

The majority of this will also work with basic .9.pngs and is covered in this thread.

[jayrod]

Sometimes you may find yourself wanting to do something different than just changing colors. There are countless ways to express yourself and to be honest,it's not that hard...just very time consuming. 

It's amazing what a Google image search can give you. I have found countless images, Photoshop plugins (brushes,styles,etc.) FREE! Granted,you will spend a lot of time searching through countless links and still will have to tweak things but the groundwork is setup for you. 

For fonts I usually end up at dafont It might seem a no brainer but just about any font that you would want can be found here.

For images,fonts,brushes,styles...deviantart  This place is friggen amazing! I have grabbed many tools and images from here for wallpapers as well as to include in images.

Wallbase is another good source for images. 

You want a site with a lot of tutorials on how to do things in Photoshop that anyone can follow? Worth1000 is such a place.

You want to make YOUR OWN battery icons??? This must be the biggest secret around. I accidently found it a couple of months back and LOVE it. It makes creating battery icons and other small statusbar icons SO EASY!!!

The Rom Fumbler" aka "The Battery Icon Creator
 

 
But the number 1 place for inspiration...imagination. I have taken pictures of a truck bumper and made it into a keyboard button background. Taken brushes and after many hours , styles,etc. made this status bar out of them..

 SB.png   31.41KB   16 downloads

But one of my favorite things to do is to theme the notification pulldown.
 

Theming the Notification pulldown

Even though this is named what it is,the things I will show can be implemented on any image...I just figured I'd kill 2 birds this way.

Remember when I said a .9.png doesn't always have to end up as a .9.png? We already know that a .9 is designed to stretch in specific directions and notification_panel_bg.9.png is no exception. This little image is designed to stretch and because of it's XML,it's designed to fill a specific area which is dependent on the devices resolution (DPI) 

The first thing we have to do is create a canvas large enough for our device. With the Bionic/RAZR I made the pulldown 540x960. With the S4 I make it 1080x1920.

Pick some images that you want to use and open them up in Photoshop. The end result will look like this:

 example1.png   540.17KB   15 downloads
 
Yeah,,not all of us are named Jayrod but....Here are the images I am using for the background so that you can follow along.

1.    1.jpg   48.27KB   14 downloads
2.    2.jpg   396.52KB   14 downloads 
3.     3.jpg   128.96KB   13 downloads
4.     4.jpg   52.58KB   13 downloads

With all of them open in Photoshop,just drag the image over to your blank canvas. You will need to stretch them some because this a large canvas.

 EX1.png   58.1KB   13 downloads

Starting with image 1 and ending with image 4.(Image number 4 should be at the top) Once you have everything stretched to your liking,change the opacity of the first three images. I made them %50 , and left the bottom image alone.

 EX2.png   332.35KB   13 downloads

This is what we should have

 EX3.png   237.97KB   12 downloads

Now this is where we start having fun...with shapes! Click the shape tool and select the ellipse tool.

 EX4.png   266.36KB   13 downloads
 
Draw a circle in the middle of the image.It does'nt have to be perfect as you can always use the transform tool.
Double click the layer that the circle is and choose gradient overlay.

 EX5.png   88.15KB   13 downloads

Now we want to make the circle somewhat transparent so change the opacity to %20

 EX6.png   85.54KB   13 downloads

Click OK and go to the main Blending options screen and move the top slider to 250

 EX7.png   315.05KB   12 downloads

Rasterize the layer..I am not completely sure what it does except for making edits look a little different.Just right click the layer and choose Rasterize.
Draw another circle within your first one and once yo are done,right click the layer and choose clear layer style.

 EX8.png   280.65KB   13 downloads

Right click and Rasterize.Now,we are going to drag a wallpaper over to the project and place it on top  of the second circle. This is the one I am using.

 5.jpg   74.37KB   11 downloads

Stretch it out some to fit over the circle and right click the layer and choose Create clipping mask.

 EX9.png   472.53KB   11 downloads

This is much easier than trying to make the full sized image to fit as a circle..isn't it?

Now,click the text tool. I am using Aston-F1 as the font which I believe I got from dafont. I made the font size 200

 EX10.png   28.86KB   11 downloads

Type out whatever you want (JAYROD is a nice name:)  ) and duplicate the layers.

 EX11.png   319.61KB   11 downloads

And here we are going to use one more wallpaper as a clipping mask (just like the circle earlier). This is the wall I used. Make sure it ends up above the first text layer.

 6.jpg   233.46KB   12 downloads

Stretch it over the text and then right click the layer and apply a clipping mask.
Click the layer for the first text layer and play with the style options.

 EX12.png   303.11KB   13 downloads

Do the same for the second text layer.

 EX13.png   369.4KB   13 downloads

Now......remember that we are making what started out in our SystemUI as notification_panel_bg.9.png. If you save your image as that and try to compile, there is a very good chance that you will get apktool errors. What I have done in the past is just delete the original .9.png (make sure you don't have 2 of them within your SystemUI drawable folders!!!!) and simply save this new file as notification_panel_bg.png

This has worked for me on a few other .9s as well. 

I hope that this part of the tutorial has been somewhat informative. I'm sure that a lot of you already knew this stuff, but I chose the way I did this to get users used to using things like opacity,shape tool and clipping mask. These are things I use a lot of in theming.

[jayrod]

You've been shown the easy way to theme,the fun of XML editing,basic and intermediate photo editing...now you have your theme ready to test.
As stated before,this tutorial was based primarily on either pushing specific .apks to your phone or by flashing a .zip file. There are other alternatives : Aroma,VRtheme,Theme manager and via Xposed modules.

Unfortunately,I don't understand enough or am savvy enough about working with any of them. I am comfortable with the old fashioned theme .zip. In this part,I am going to :

• Show the basics of how a .zip should be setup 
• Explain the updater script (Thanks to JP1044 for the simple explanation)
• Show an example from the script I have used for the Bionic/OG RAZR and S4

​Working with a flashable .zip

Although there are many ways a .zip can be setup,this is pretty much the basic layout.

To view the inside of the zip, Right click the .zip,choose 7zip (or winrar..I prefer 7zip for this) and choose Open archive. This is what you'll see:

 Z1.png   69.39KB   11 downloads


1.This is basically your back button
2.This is where your data/app .apks go
3.This is where the "brains" of the .zip are. The main thing you will edit here is the updater-script
4.This is where the system aps go as well as where framework-res goes

Pretty simple huh? But,what is the updater-script? Thanks to JP1044,we have a brief explanation.
 
 

The updater-script is contained inside any flashable zip that you install on your device through a recovery (CWM, TWPR etc…). It tells the recovery what operations to perform. It can do everything from copying files, to checking properties, to extracting zip files. An updater-script is supported by most recoveries, allowing zips to be installed on many devices without having to change the updater-script at all. The updater-script uses it’s own syntax that can be learned here: [/size]

http://forum.xda-dev...d.php?t=2187804[/size]
 
This is what mine looks like.Pretty plain..simple,but I'm not needing it to do much. I just want it to tell what the zip is,replace specific apps,set permissions and do a cache wipe and let me know when it's done. 

 

ui_print(" Test");
run_program("/sbin/busybox", "mount", "/system");
run_program("/sbin/busybox", "mount", "/data");
show_progress(0.4, 5);
ui_print("Eating the Cache...");
delete_recursive("/cache");
delete_recursive("/data/dalvik-cache");
ui_print(" Removing Old Files...");
delete("/system/app/Contacts.apk");
delete("/system/app/Phone.apk");
delete("/system/app/SystemUI.apk");
delete("/system/framework/framework-res.apk");
ui_print(" Extracting...");
package_extract_dir("system", "/system");
package_extract_dir("data", "/data");
ui_print(" Setting Perms...");
set_perm_recursive(0, 0, 0755, 0644, "/data/app");
set_perm_recursive(0, 0, 0755, 0644, "/system/app");
set_perm(0, 0, 0644, "/system/framework/framework-res.apk");
show_progress(0.4, 5);
ui_print(" Finishing Up...");
run_program("/sbin/busybox", "umount", "/system");
run_program("/sbin/busybox", "umount", "/data");
show_progress(0.4, 5);
ui_print(" Mod Complete!");
ui_print(" Enjoy!");
 

It's not showing here but you will have line numbers next to each entry. There are 27 entries but only 26 lines with text. The way I have understood things is that there cannot be skipped lines..every line must have some type of command and the rule that I
always follow is to have a blank line after the last command .
There are a lot of things that you can do with an update-script..more than this example shows. Anyone who's ever downloaded my Blu theme will see first hand some of what you can do. That one was done primarily by Timmy10shoes...dude is a scripting genius! 



Well...that's about all I have left to go over on this subject.I hope that this tutorial has helped getting you comfortable with doing themes.

[soocold]

Mine?

Sent from my Galaxy Nexus using Tapatalk 4

[useltonm]

Subscribed! Looking forward to where this goes.

Sent from my XT875 using Tapatalk 2

[neckchop]

So cool! I'm stoked to see a thread like this, and the few other educational threads too. Thanks!

[mjs27541]

Thanks for doing this. I just started playing around with gimp, so I'm gonna be checking in here for advice.

[zooyork0721]

can this one down here be mine?

[jayrod]

can this one down here be mine?

Take it!

Sent from my Platyraptor extreme ultra maxxxx 4gLTE/GSM/ABC/123 Nick Knack Pattywack Ermegherd GED, MD,RNA,DNA,YMCA Edition S4! Via the 4th dimension....NOW RUNNING ECLIPSE

[Captain Crypto]

I do believe I shall leave this bookmark right here.

Sent from my SCH-I545 DEV

[jayrod]

Tools and the basics of modding is up. Remember,this is a WIP.

[Bama]

guess i'll settle for this one

[jayrod]

guess i'll settle for this one

There is plenty of room for you!

Sent from my Platyraptor extreme ultra maxxxx 4gLTE/GSM/ABC/123 Nick Knack Pattywack Ermegherd GED, MD,RNA,DNA,YMCA Edition S4! Via the 4th dimension....NOW RUNNING ECLIPSE

[Captain Crypto]

Okay, first question from me, and it's a noob question (naturally).  I understand the reason for working on the theme on the phone, for testing purposes, etc.  Is there a way to do the work in a development environment?  For example, is it possible to maybe create a virtual environment on a rooted phone and then switch back and forth?  I know that VMWare is looking to release a mobile VM capability, and I was wondering if anyone else has done this for dev/testing purposes.
 
I've also read that someone claimed he was able to use Virtual Box to run Android on the PC.  If that is indeed the case, do you think we would be able to create an environment where we can do the theming/coding on the PC, then transfer it to a phone for testing?
 
Sorry for the noob questions...

Edited by Memnoch73, 29 August 2013 - 04:35 PM.
No need to quote the OP noob. ;-P

[Captain Crypto]

Another question:  Do you have any favorite how-to threads you've used to learn the really rudimentary stuff?  I want to make sure I'm familiar enough with the basics so that I can keep up and not continually ask noob questions.  If you do have favorite how-to threads, would it be okay for you to update the OP with those links?

[jayrod]

Okay, first question from me, and it's a noob question (naturally). I understand the reason for working on the theme on the phone, for testing purposes, etc. Is there a way to do the work in a development environment? For example, is it possible to maybe create a virtual environment on a rooted phone and then switch back and forth? I know that VMWare is looking to release a mobile VM capability, and I was wondering if anyone else has done this for dev/testing purposes.

I've also read that someone claimed he was able to use Virtual Box to run Android on the PC. If that is indeed the case, do you think we would be able to create an environment where we can do the theming/coding on the PC, then transfer it to a phone for testing?

Sorry for the noob questions...

Definitely not noob questions! I have hoped that such a thing was available to basically try stuff out realtime..an Android visualizer if you will.. but if it does exist, I have no idea where it is!
It truly would make things so much easier!

Sent from my Platyraptor extreme ultra maxxxx 4gLTE/GSM/ABC/123 Nick Knack Pattywack Ermegherd GED, MD,RNA,DNA,YMCA Edition S4! Via the 4th dimension....NOW RUNNING ECLIPSE

[jayrod]

Another question: Do you have any favorite how-to threads you've used to learn the really rudimentary stuff? I want to make sure I'm familiar enough with the basics so that I can keep up and not continually ask noob questions. If you do have favorite how-to threads, would it be okay for you to update the OP with those links?

I don't have many links for theming..If I get stuck I usually Google or just ask in threads or whatever but I do plan on linking or sharing where I get images from ,links to the few threads I have bookmarked and some techniques that I use in Photoshop. I also plan on covering things like what some. 9s control ,etc.
The plan ,at least what I am hoping, is that this thread will be as easy to follow as possible and get others to hopefully share some of their tips and tricks so that anyone can do this.


Sent from my Platyraptor extreme ultra maxxxx 4gLTE/GSM/ABC/123 Nick Knack Pattywack Ermegherd GED, MD,RNA,DNA,YMCA Edition S4! Via the 4th dimension....NOW RUNNING ECLIPSE