[HOW-TO][VIDEO] draw9patch - Android Themes

If you have any questions or comments let me know.
Description:
Most of the tutorials I've found on draw9patch are hard to understand. And I have yet to find any videos on the tools. So I hope this helps people understand what to do. Also, I expect you to be a little ADB an know your way around the SDK. If you a beginner and are starting to venture into themeing, I suggest you start of messing with standard .pngs, and learning the ropes a bit.
Again. I'm no pro, so if any info is wrong please let me know. Thanks for watching, and happy themeing.

And... did you heard about apktool?
I don't really understand, why people still use draw9patch method. It's something like:
Unpack.
Rename #1 file.
Use draw9patch on #1.
Modify #1.
Copy #1 to your project.
Rename #2 file.
Use draw9patch on #2.
Modify #2.
Copy #2 to your project.
Build your project.
Unpack.
Copy #1 to original apk.
Copy #2 to original apk.
Zip it.
Isn't that better to do just:
Decode.
Modify #1.
Modify #2.
Build.
?

Related

Tutorial For building custom rom for G1

Can any body post tutorial for building a custom rom for G1 and Hero?
wrong area to post this... probably should take it off.
were should i put this thread then
Q&A buddy.
I wrote a few how-to's on compiling your own android build from source, i recommend starting here:
http://robblue2x.blogspot.com/2009/07/how-to-set-up-ubuntu-virtual-machine.html
it is a bit out of date now because android moves so fast, its incredibly hard to keep up to date!
robblue2x said:
I wrote a few how-to's on compiling your own android build from source, i recommend starting here:
http://robblue2x.blogspot.com/2009/07/how-to-set-up-ubuntu-virtual-machine.html
it is a bit out of date now because android moves so fast, its incredibly hard to keep up to date!
Click to expand...
Click to collapse
Just visited this link But how do modify the existing files of android OS ?
If you have to ask how to change the files then you probably shouldn't be messing with the code for an OS. There is alot to it. You need to know how to set up linux, Git, repo, sdk, emulator, learn java,maybe some C++, edit xml files, and compile the edited code just to name a few.
read this
If you get that working then all you need is a text editor to start changing code.
Good luck!
What about modding existing roms?
Here is what I know so far...
system apps are not individualy signed
Rom must be packaged in zip having 3 root directories.
data (holds apps normaly)
META-INF (holds some kind of build files... and android manifest)
system (holds the OS and scripts and such.)
Also boot.img in the root dir.
The update.zip needs to be resigned if repackaged.
=) that is it all that I have gathered after hours of searching.
I dont want to recompile a kernel as I dont need to modify one. I would rather leave that to the more experienced DEVs. All I want is to remove/replace few apps...
My questions:
How do you sign a file... (tried the sign java thing in ubuntu and I get some king of error... could not find library and what not...)
There is a windows batch file floating around I have not tryed that.
I have some basic understanding of code language and I can flollow instructions even if I have to find my way around some stuff... but this rom building is like black magic... Everyone is doing it no one wants to explain how its done... If its too damn hard then so be it. I can modify it on the back end after installing. I just believe in clean simple installs.
What generates the META-INF directory and the files in there. Seems like there is some instructions on setting permissions for certain files and (manifest) seems like signiture keys..
Is that generated when the file is signed?
is it manualy generated?
is can those files be modified?
I know if this is answered it would be helpful in letting people optimize the builds for their own needs.
Sorry for the long post. I hope this gets explained or I dont care if I have to read, give me a bunch of homework (links).
zambezy said:
What about modding existing roms?
Here is what I know so far...
system apps are not individualy signed
Rom must be packaged in zip having 3 root directories.
data (holds apps normaly)
META-INF (holds some kind of build files... and android manifest)
system (holds the OS and scripts and such.)
Also boot.img in the root dir.
The update.zip needs to be resigned if repackaged.
=) that is it all that I have gathered after hours of searching.
I dont want to recompile a kernel as I dont need to modify one. I would rather leave that to the more experienced DEVs. All I want is to remove/replace few apps...
My questions:
How do you sign a file... (tried the sign java thing in ubuntu and I get some king of error... could not find library and what not...)
There is a windows batch file floating around I have not tryed that.
I have some basic understanding of code language and I can flollow instructions even if I have to find my way around some stuff... but this rom building is like black magic... Everyone is doing it no one wants to explain how its done... If its too damn hard then so be it. I can modify it on the back end after installing. I just believe in clean simple installs.
What generates the META-INF directory and the files in there. Seems like there is some instructions on setting permissions for certain files and (manifest) seems like signiture keys..
Is that generated when the file is signed?
is it manualy generated?
is can those files be modified?
I know if this is answered it would be helpful in letting people optimize the builds for their own needs.
Sorry for the long post. I hope this gets explained or I dont care if I have to read, give me a bunch of homework (links).
Click to expand...
Click to collapse
my advice for signing files would be to read through this thread. stericson says that JF's autosigning tool will work in linux. if you still can't get it pm stericson, he is a very nice member and should be able to help you
Thanks... That worked in windows.
Im getting some FC's but I can at least work on that now...
I did remove everything from the MANIFEST before signing just in case something did not get overwriten correctly.
I don't mess with the manifest files, so try not touching them and see if that helps
Can any body describe what does these files do while building a theme and how to edit these files:
android.policy.jar
framework.jar
services.jar
build.prop
build.sapphire.prop
build.trout.prop
sabin123 said:
Can any body describe what does these files do while building a theme and how to edit these files:
android.policy.jar
framework.jar
services.jar
build.prop
build.sapphire.prop
build.trout.prop
Click to expand...
Click to collapse
the prop files are configuration files and should NOT be replaced if your making a theme.
the .jar's should only be messed with if your adding stericsons lockscreen. you will have to decompile them for it to work
How to decompile the services.jar files?
Check out my theme thread. It's from when I was porting Android but most of these questions are explained in pretty good detail with links for more info. That should help you out quite a bit:
http://forum.xda-developers.com/showthread.php?t=578421
Go to the second post
Thanks for the link..

How to edit .9.pngs

If you have tried to edit .9.pngs in the res/drawable folders, then you know the reason for this thread. If you have not, the idea is that .9.pngs do not have a static boundary. Instead the boundary is given by a continuous mapping
b:[0,1) --> R^2
wherein the mapping is defined by guides which cannot be seen in regular graphical editing programs. This will give the basic idea, along with an example of how this works.
What you will need:
1.) draw9patch (found in /tools of the Android SDK: http://developer.android.com/sdk/index.html)
2.) gimp (or equivalent graphics software)
3.) Java 1.6 (not 1.5)
4.) Eclipse 3.5 with ADT 0.95 (Setup to compile android 1.6. Instructions: http://developer.android.com/guide/developing/eclipse-adt.html) It is assumed you are comfortable with eclipse. There are many threads on setting up eclipse, along with the linked instructions, so try and keep eclipse questions in this thread to a minimum.
Step-By-Step
1.) Find your desired file to edit, which from here on will be referred to graphic.9.png, and rename to graphic.png.
Reason: We will open the file in gimp (or an alternative .png editing app) which will not recognize the .9.png, and will open as .png. This will cause the invisible guides to open as filled in, and thus the guides will need to be redefined before we save. If we open a .9.png extension in draw9patch, it will assume the guides exist, which of course will not if we edit in another application, and thus not be added. By changing the extension to only .png, when opening in draw9patch, the guides will be re-added.
2.) Open graphic.png in gimp and do your desired editing.
3.) In your computer terminal enter draw9patch (assuming you added /tools to your path, otherwise in the terminal navigate to /tools in the AndroidSDK and enter draw9patch). Possible Issue: If draw9patch comes up blank with no menu, you do not have Java 1.6 set as default. Fix this via sudo update-java-alternatives -s java-6-sun in the terminal (or something similar for your system).
4.) Drag and drop graphic.png into the resulting draw9patch window. What you will now see is your image, along with transparent lines which will be where your guides are defined. One should read this http://developer.android.com/guide/developing/tools/draw9patch.html, though it is not that clear. Draw9patch allows you to add/remove black squares which define the actual guides. I will admit that this is one part of the process that I am still not completely comfortable with, and sometimes requires a little trial and error. Here is what I have figured out:
(i) You will want to draw a solid black line along the bottom and right edges of your image. This designates the boundary which results from the region which is stretched.
(ii) You will now add black squares to the top and left sides. These designate the solid part of the region that will be stretched (as opposed to staying transparent).
As I stated before, this part is a little confusing, but with some trial and error, anyone can figure it out. See my following example to witness the guides being used.
5.) After the guides are defined, save the file in draw9patch. This will automatically append .9 to the filename, and give an actual .9.png file that has been edited (now called graphic.9.png). We are not quite done though, because as is, the guides will not be recognized by the android OS. The images need to be compiled in eclipse as part of an apk.
6.) Open Eclipse and create a new project. You can name it anything you like, and you can just uncheck defining an activity. This project will automatically generate a res/drawable (or res/drawable-hdpi) folder, in which you will drag and drop graphic.9.png. From here, right click on your project, choose "Android Tools", and "export unsigned android application".
7.) In step 6 an .apk was created (I choose to save to desktop), extract the files, and open the folder in which graphic.9.png was placed. This is your newly edited, ready to use .9.png. Enjoy and have fun theming.
Example: How to change the outline of the inner squares on the power widget from orange to white.
1.) I take the file appwidget_inner_focus_c.9.png (found in Settings/res/drawable) and rename to appwidget_inner_focus_c.png.
2.) Open in gimp (figure_1) and change color to white (figure_2).
3.) Open draw9patch
4.) Drop appwidget_inner_focus_c.png into draw9patch (figure_3) and define guides (figure_4). In fig.3 the purple color is showing where the patch will be applied (i.e. where the stretching will occur). After I define the guides, (fig.4) note the vertical and horizontal green lines with signify the only color stretching will be along the boundary itself.
5. Save the image as appwidget_inner_focus_c.9.png (anywhere you like).
6. Drag and drop the file into the res/drawable-hdpi folder in your project folder (navigate to through regular computer file browser). Note that it is in the correct folder (fig.5). Right click on the project (in my case Aaron) and choose Android Tools, the export unsigned android application. Aaron.apk now appear on my Desktop (I chose desktop to export to), which I extract my appwidget_inner_focus_c.9.png from.
7. I am now done.
You don't actually need to use the draw9 tool. You can use your favorite photo editing software, whether it be Photoshop, Paint.net or GIMP and you can just add a 1px wide black border where needed and it works just the same.
Of course if you download the source from cyan's github then you can edit them from there, the source code is unprocessed so it still has the 1px black border around it. To me this is the easiest way to do it, then you don't have to worry about where you place the lines, they are already there.
After you edit, then you still need to do the above in eclipse.
jairomeo said:
You don't actually need to use the draw9 tool. You can use your favorite photo editing software, whether it be Photoshop, Paint.net or GIMP and you can just add a 1px wide black border where needed and it works just the same.
Of course if you download the source from cyan's github then you can edit them from there, the source code is unprocessed so it still has the 1px black border around it. To me this is the easiest way to do it, then you don't have to worry about where you place the lines, they are already there.
After you edit, then you still need to do the above in eclipse.
Click to expand...
Click to collapse
Wow, that is much easier, thank you.
Is it necessary to do step 6?
I find out the answer yes
Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.
athanos said:
Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.
Click to expand...
Click to collapse
Thats usually caused by a bad 9patch. The 1px marquee around the real image can only contain full transparent pixels our full opaque pixels (the patch guides).
Open your png with gimp/photoshop/whatever and look into that area to see if there's something painted.
athanos said:
Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.
Click to expand...
Click to collapse
If you look at the errors it will tell you which file is bad and even if it's the top, bottom or sides that have a bad pixel in the border.
if someone want to help me how to do this on msn pleas PM me , im noob on eclipse
Why is the Eclipse part needed? I have no problem compiling my apk without doing that.
This thread is quite old. Apktool (my signature) is able to properly decode 9.png files - it adds borders where they should really be. Don't waste your time on adding them by hand.
can you be more precisly?
how to handle for example with the genie.widget?
there are 3 9.pngs included which i want to edit....
pa.pn2 said:
can you be more precisly?
how to handle for example with the genie.widget?
there are 3 9.pngs included which i want to edit....
Click to expand...
Click to collapse
you would do each 1 as presented earlier.
copy all 3 to main workspace used for eclipse and export unsigned.
then you need to replace the .pngs within the widget.
if its not a system ul most likely have to sign the app aswel.
may have to look around for how to do this
Someone correct me if I am wrong.
But I came upon this piece:
osdir.com/ml/Android-Developers/2011-01/msg00529.html
The format is standard PNG. Build tools add a custom chunk containing patch data.
Click to expand...
Click to collapse
So you still need to patch the .9.png and that is done as one part of the build process. (step 6)
Is there a more direct way of doing it?
dabicho said:
So you still need to patch the .9.png and that is done as one part of the build process. (step 6)
Is there a more direct way of doing it?
Click to expand...
Click to collapse
No, aapt is only one tool, which does borders -> 9patch chunk conversion and it always works on a whole project, not single PNG. But it should be quite easy to create such tool - I've already done 9patch -> borders converter in apktool.
Much easier way to compile 9patch without Eclipse. Post #11.
http://forum.xda-developers.com/showthread.php?t=816412&page=2
cloverdale said:
3.) In your computer terminal enter draw9patch (assuming you added /tools to your path, otherwise in the terminal navigate to /tools in the AndroidSDK and enter draw9patch). Possible Issue: If draw9patch comes up blank with no menu, you do not have Java 1.6 set as default. Fix this via sudo update-java-alternatives -s java-6-sun in the terminal (or something similar for your system).
Click to expand...
Click to collapse
what if it doesnt come up at all?????
I have everything installed the way it should :
Android SDK (updated)
Eclipse
ADT Plugin
Java SDK 1.6
Here is the message that I get on my terminal (using mac)
Code:
imad-zianis-macbook-2:tools Juevani$ ./draw9patch
Exception in thread "AWT-EventQueue-0" java.lang.NoClassDefFoundError: org/jdesktop/swingworker/SwingWorker
at com.android.draw9patch.Application$1.run(Application.java:48)
at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:209)
at java.awt.EventQueue.dispatchEvent(EventQueue.java:461)
at java.awt.EventDispatchThread.pumpOneEventForHierarchy(EventDispatchThread.java:269)
at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:190)
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:184)
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:176)
at java.awt.EventDispatchThread.run(EventDispatchThread.java:110)
imad-zianis-macbook-2:tools Juevani$
Check this out for swingworker-
www.google.com/m/url?channel=new&cl...8QFjAD&usg=AFQjCNGOD3KbL8SfFArOUOHWRzT0CQZezg
dully79 said:
Check this out for swingworker-
www.google.com/m/url?channel=new&cl...8QFjAD&usg=AFQjCNGOD3KbL8SfFArOUOHWRzT0CQZezg
Click to expand...
Click to collapse
You sir are a life saver thx alot
Ok, I just can't figure this out. I am going insane trying to figure this out. this is what I got so far:
I've installed the Eclipse, SDK, java, ADT etc....
I managed to modd my images with photoshop and put it through Draw9patch and managed to save my images to the folder of the app I was modifying. I opened up Eclipse and did the steps of: File\New\android project\ create project from existing source. and the part where you should use the default path for the directory. I can't seem to get to the end where I can pick "finish" to move on to the editing.
I did something different and managed to get the 9 pngs normal wthout stripes or marks and into a Res folder.
Ok, the part where you have to Export it is the sticky part. Can you please break down that section a bit more detailed. I got it to Unsigned App Package and I put the apk file on my phone all of a sudden my app was gone on the phone....Ok I modded the calculator with my images and can't seem to get installed.
johnny quest said:
Ok, I just can't figure this out. I am going insane trying to figure this out. this is what I got so far:
I've installed the Eclipse, SDK, java, ADT etc....
I managed to modd my images with photoshop and put it through Draw9patch and managed to save my images to the folder of the app I was modifying. I opened up Eclipse and did the steps of: File\New\android project\ create project from existing source. and the part where you should use the default path for the directory. I can't seem to get to the end where I can pick "finish" to move on to the editing.
I did something different and managed to get the 9 pngs normal wthout stripes or marks and into a Res folder.
Ok, the part where you have to Export it is the sticky part. Can you please break down that section a bit more detailed. I got it to Unsigned App Package and I put the apk file on my phone all of a sudden my app was gone on the phone....Ok I modded the calculator with my images and can't seem to get installed.
Click to expand...
Click to collapse
I do it this way:
1) get the .9.png files from the apk
2) redo the patches using draw9patch, save as .9.png
3) "compile" (process) the edited .9.png files with xeudoxus's xUltimate Draw9Patch Compiler. get it from here
4) put the processed .9.png files back in the apk
The compiler removes the 1 pixel border defining the patches that are stretchable and puts that info in the png as metadata (not 100% sure where)

[TUT] Creating and modifying themes and skins

Can some mod please sticky this? Thanks.
There have been a lot of people asking this, so I though I'd write up a guide explaining everything. This will just give you a basic idea of modding and it's up to you to use this knowledge for specific things to work on.
Editing Images
The most important thing is editing images, so you will have to be familiar with Photoshop, GIMP, Paint.NET or any other image editing program. There are plenty of tutorials available on the web, just search.
The below techniques will teach you different ways to extract the PNGs, BMPs or GIFs from CABs or DLLs so you can modify them.
Extracting from CABs
The easiest way to make a custom theme is to look at other available ones and modify them to your liking. As most themes are distributed as CABs, you will need WinCE CAB Manager to open and extract the files. If they are images, you can now edit them easily and replace them in the CAB. If they're DLLs, it's a bit more tricky.
Resources inside DLLs
You will need a resource editor in order to view and replace images in DLLs or even EXEs. An all-time classic is the Resource Hacker, although it' very basic it is entirely free and does its job. If you want more features, have a look at Resource Tuner or Restorator.
Many DLLs have to be signed to work: just download View attachment SignCode.zip and extract it. Now, after you have modified a DLL, copy it over to the folder where you extracted the ZIP and open a command prompt from that folder by Shift-right-clicking in the Explorer window and type "sign file.dll" while repacing "file" with the name of the DLL.
These are just the basics and many things aren't covered in this little tutorial, for example editing Manila files, so if there are any questions feel free to ask in the comments below. If there is enough need, I will also expand this tuorial a bit.
Happy skinning
reserved...sf
reserved...adw
reserved...we
I've just started to skin stuff and this is very helpful to me! Thank you!
thank you

pls help me fix .9.png!

hi there! so i'm following this thread's tutorial re using photoshop for ninepatch creation, and i'm getting lousy results. first attachment is the screenshot of the results (ignore the close bar, i copied that from xHero for now), the other two are the .9.pngs i made for use.
i used the cyanogenmod 5 stock pngs as reference for the border locations. i also apply the imgs using metamorph for now instead of running eclipse.
how do i fix these?
(running stock cm 5.0.8 on droid looking to theme it)
Did you compile the files in Eclipse?
i just said i don't run eclipse at all. if creating a ninepatch absolutely requires use of eclipse i'll do it, but i was under the impression i could skip eclipse for it.
I would suggest using the draw9patch tool in the android sdk and making a quick app in eclipse. Making an app with the image in eclipse makes the guides transparent when you use it in your rom and/or theme.
You NEED to compile the images which is what Eclipse will do for you.
Edit: Here, went ahead and did them for you. Didn't mess with the images, only compiled them.
Need to compile in eclipse. I just use a sample application from the SDK and quickly throw my images in and compile. Photoshop works just fine for .9 images, but if you want to preview it before compiling, use draw9patch.
@jaguirre - the compiled imgs work, thx!
now to install the unwieldy behemoth that is eclipse...*sigh*
neologix said:
@jaguirre - the compiled imgs work, thx!
now to install the unwieldy behemoth that is eclipse...*sigh*
Click to expand...
Click to collapse
actually guys. if you go to the website below and download xUltimate Draw9Patch Compiler you don't need to use eclipse! You just dump your images into the right folder and it automatically compiles them with its .bat file. really easy, i even tested it myself. he even gives you example .9.png's in three different folder with three different names. basically they are all on your desktop. all you do is run the xultimate program that comes with the draw9patch compiler and it automatically takes whatever .png's that are in your specific folder such as "Example 1" and creates a new folder called "done" and it has the new "Example 1" folder inside there with the compiled .9's.
http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html
opasha said:
actually guys. if you go to the website below and download xUltimate Draw9Patch Compiler you don't need to use eclipse! You just dump your images into the right folder and it automatically compiles them with its .bat file. really easy, i even tested it myself. he even gives you example .9.png's in three different folder with three different names. basically they are all on your desktop. all you do is run the xultimate program that comes with the draw9patch compiler and it automatically takes whatever .png's that are in your specific folder such as "Example 1" and creates a new folder called "done" and it has the new "Example 1" folder inside there with the compiled .9's.
http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html
Click to expand...
Click to collapse
If I didn't like to make ugly ADW.Themes I would get rid of Eclipse.
neologix said:
@jaguirre - the compiled imgs work, thx!
now to install the unwieldy behemoth that is eclipse...*sigh*
Click to expand...
Click to collapse
I suppose coming from many years of coding using notepad or IDE's without built in syntax recognition, its hard for me to call Eclipse an unwieldy behemoth. I have certainly seen some grungy environments out there from the open source community.
I don't mind it, but compared to Visual Studio 2008 (or 2010), its ugly and takes up significant retail with stock config. VS2008/2010 has sex appeal for sure.

Request for CURRENT docs on creating an update.zip

I have searched, read, and tested my butt off on this so, I'm not posting without doing my own homework.
I'm looking for CURRENT documentation on how to create a standard update.zip file that simply copies a file into /system/foo/bar and chmods it.
All the links I've looked at seem to have old deprecated syntax on the update-script file, or the examples given simply do not work.
I do NOT want to download someone else's script-pak, windows app, or any other such thing that makes it for me.
As for signing, I'm completely comfortable signing using the SDK, although I'll probably take the easy route with ZipSigner/Signapktic running on the phone/tab now that I've discovered those.
Can someone please post a very simple howto?

Categories

Resources