Hello Guys,
I was just getting bored so decided to share some of my knowledge regarding compiling and editing .9.PNGs using draw9patch tool from Android SDK and xUltimate 9PatchCompiler. This is based on what I learnt when I created my Ice Cream Sandwich Theme.. This is not for N00BS. It's just for people who are willing to learn new things.. There are easy methods to do this but I like this one.
I am not responsible for any damages caused due to following this guide.
WHAT YOU NEED -
Click to expand...
Click to collapse
1. The Android SDK ( It contains Draw9Patch Tool ) (requires JDK for installation)
2. xUltimate 9PatchCompiler
3. Photoshop/GIMP (For Resize)
4. APK Manager (For Decompiling APKs)
5. Common Sense
6. Lots of Patience and some experience in de-compiling APKs
HOW TO -
Click to expand...
Click to collapse
1. De-compile the APK whose .9.PNG you want to re-size using APK Manager (you need to decompile as you need Raw APK for resize otherwise it will look weird). Browse to that decompiled .9.PNG. You will notice Black LINES/DOTS are in border of that .9.PNG (see the example Pic Below)
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Now carefully observe these lines and remember how it looks. You need to remember the pattern on how these lines are drawn. Every Line/Dot is important and if you fail to realize you will end up with an error during last few steps.
3. Suppose you need to re-size the APK to a x b px resolution then open up Photoshop/GIMP or any editor and re-size the image to a+2 x b+2 px resolution.
4. You will notice some Lines/Dots will disappear. It's all fine.
5. Now browse to directory where you have installed Android SDK and go to TOOLS folder in it and fire up the file named draw9patch, when you are done it will open like image below.
6. Now go to File and click Open 9Patch and then open the .9.PNG you just resized to a+2 x b+2 px , it will look something like
7. Now construct the missing lines on basis on the pattern you memorized before re-sizing image. Be careful, and draw cautiously. To draw you just need to drag mouse while left-clicking. You can delete lines by pressing shift button and and left clicking and dragging.
8. When done, go to file again and save the image.
9. Go to directory where you image was there and copy it.
10. Navigate to directory where you have extracted 9Patch Compiler ZIP and paste the .9.PNG to GO-INSIDE/res/drawable-mdpi.
11. Go back to main folder and click xUltimate-COMPILER this will generate a folder done in same directory if you have drawn lines properly.
12. Go to /done/GO-INSIDE/res/drawable-mdpi and you will find there is your .9.PNG compiled with no black Lines/Dots.
YOUR 9.PNG is ready for use.
reserved for something i forgot..
a good video for the 9.png is found here:
http://www.youtube.com/watch?v=IfrXE2R2nqM&feature=related
it´s a bit long with a lot of text, but it is worth to view and to get a good start with this guide.
A better example would be one a picture with a letter or a pattern in it, a uni color png is not very good for a graphical explanation for what the black lines are good for and what the effect will be.
No offense bro, just a tick to improve this topic.
cheers
qaysed
As much as I appreciate your work, but there's already a more detailed tutorial available here:
[TUTO] Create your 9.png !
you have done a good work friend but there are optimizer software's better and makes easy just suggestion
venkat kamesh said:
you have done a good work friend but there are optimizer software's better and makes easy just suggestion
Click to expand...
Click to collapse
Yeah, I know.. Just in case somebody wanted to learn I made this coz I had to struggle a lot to learn this coz there werren't good tutorials..
Related
this is a very basic guide to change colors and maybe icons if you've suitable icons..
I don't know anything about signing apks and stuffs but I did the following steps and it worked for me...
THINGS YOU'LL NEED :
7zip
Any Imaging Software that can handle PNG files(I use PHOTOSHOP)
FRAMEWORK-RES.APK file
STEPS :
Right Click on your framework-res.apk
Click 7-zip->Open Archive
go to res folder
Extract drawable-mdpi anywhere on your pc
edit the files you want with your imaging software and save them
now drag the modified files to the drawable-mdpi folder in the zip file
Open the drawable-mdpi folder in your zip file
select the modified files, hold and drag to the zip archive and leave it
it will ask you to add the files or not
just click yes
Click to expand...
Click to collapse
Close the file
Push your framework into your phone
(I use Xrecovery mode for pushing it, cuz its safe)
Code:
[B]busybox cp /sdcard/framework-res.apk /system/framework/framework-res.apk[/B]
---------------------------END------------------------------------------
IMPORTANT TIPS
if you're upto modifying colors than you may notice that some files have extension .9.png they need special way to edit (actually not so special lol)
just open them in your imaging program
you'll notice few black dots and black border
something like this
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
keep those black things as they are, and mess around with the other colors
-----------------------------END QUOTE----------------------------------
for now I've just tested this with colors and few icons and it works
-------------------------------------------------------------------------------------
if anyone needs this framework (I changed the green color to orange, changed the lock symbol to stock it was too small and colored some of the network indicators from white to green lol)
FRAMEWORK-RES.APK.7z
Good. i tried to change the xml files. but the process needed me to use apktool to decompile the framework-res.apk.
when i used original framework-res-apk, it decompiled successfully, but when I used gingerbread framework-res.apk by pulpoff, errors about the .9.pngs occur.
propc said:
Good. i tried to change the xml files. but the process needed me to use apktool to decompile the framework-res.apk.
when i used original framework-res-apk, it decompiled successfully, but when I used gingerbread framework-res.apk by pulpoff, errors about the .9.pngs occur.
Click to expand...
Click to collapse
xml is just too advance for me lol
yes for editing xml files it needs to be decompiled....
maybe you need to edit 9.png files the way I did
why dont you give it a try
Thx
I searched for a TuT
Now i can give my cellphone my own looking
A question can i replace icons white icons form a X10 theme or so?
KINGMANI said:
Thx
I searched for a TuT
Now i can give my cellphone my own looking
A question can i replace icons white icons form a X10 theme or so?
Click to expand...
Click to collapse
yeah.. i used gingerbread theme's icons and they worked however you can only replace those which have the exact same name you know not everything is possible lol
nice work. can you explain how to change battery icon, i want it show percent, like 58% in front of the icon. i think that's what people need most
I see now, that in framework 'res' folder, in 'drawable-land-mdpi', we have stock layouts of Lock Screen (i mean, stock bar for unlock move and sound).
How can I set it to default? I don't like that SE original LockScreen theme...
Find all the icons named as SEMC_slidingtab and replace them the way you want
mercury_beta said:
nice work. can you explain how to change battery icon, i want it show percent, like 58% in front of the icon. i think that's what people need most
Click to expand...
Click to collapse
Most people use widgets for that.. lol
please follow the tutorial
how change icons
mislatero said:
please follow the tutorial
how change icons
Click to expand...
Click to collapse
use desktop visualizer for that.. its available for free in market
Saw this Thread under the Desire forum..
I really like the way the Navbar is made on this rom..
I myself do not have the graphic-skille to make something like this, so hopefully someone else have??
http://forum.xda-developers.com/showthread.php?t=729172
lol, ok, I did a quick job by pulling graphic files from mytouch 3g slide sense. Just download the zip, unzip it, then replace these files with ones in com.htc.resources.apk/res/drawable-port-mdpi
Drawable-port-mdpi
I'm not sure how it's look, maybe you could post a screenshot
Yep, as it turns out, you don't even have to bother resizing some images... as it is with battery, navbar, lockscreen...system just resizes them automatically...
of course it's a good Idea to conserve space...
use adw launcher and search for espresso theme in market
cryshop said:
lol, ok, I did a quick job by pulling graphic files from mytouch 3g slide sense. Just download the zip, unzip it, then replace these files with ones in com.htc.resources.apk/res/drawable-port-mdpi
Drawable-port-mdpi
I'm not sure how it's look, maybe you could post a screenshot
Click to expand...
Click to collapse
Just tried to replace the files in the original .apk - putting it all in a zip-file (not signed since I'm on S-OFF) but it just brings me to bootloop
I'm not entirely sure, but I think running apk's still have to be signed...correct me If I'm wrong...
Dr.Romca said:
I'm not entirely sure, but I think running apk's still have to be signed...correct me If I'm wrong...
Click to expand...
Click to collapse
I've never signed framework apk files. What I did is :
1. Open apk file with winrar, leave it.
2. Open folder window that includes necessary files.
3. Drag and drop file from (2) to (1) for replacing or something else.
4. Push apk files back to /system/framework/
Benefits:
- No need to extract apk files.
- No need to re-zip.
- No need to sign.
cryshop said:
I've never signed framework apk files. What I did is :
1. Open apk file with winrar, leave it.
2. Open folder window that includes necessary files.
3. Drag and drop file from (2) to (1) for replacing or something else.
4. Push apk files back to /system/framework/
Benefits:
- No need to extract apk files.
- No need to re-zip.
- No need to sign.
Click to expand...
Click to collapse
That's what I did.. (Used TotalCommander instead) ..
EDIT: Now trying using WinRAR
Now it worked.. Only "bug" is now, that the indicator of which homescreen used is still a "bow"... Is there any way to either get rid of that or to edit it..?
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Now it worked.. Only "bug" is now, that the indicator of which homescreen used is still a "bow"... Is there any way to either get rid of that or to edit it..?
Click to expand...
Click to collapse
Oops!
These pngs go to /system/app/Rosie.apk/res/drawable-mdpi/
cryshop said:
Oops!
These pngs go to /system/app/Rosie.apk/res/drawable-mdpi/
Click to expand...
Click to collapse
Hehe... I'll look into that
Used NinjaMorph to replace the files (Thanx to S-OFF) and NOW it looks nice ;D
Since there isn't a Desire X specific skinning tutorial i decided to make and share what i know so far. This is fully manual. Some tools or members may offer automated procedures. The choice is entirely upto you to find such tools. I prefer this method. So please don't say anything about others or point out. Of coz if there are any errors in my method please feel free to tell me.
**My respect and appreciation to sopL87 via whose thread i was inspired to create themes for Sense 2.1. The format of the tutorial and links are borrowed from his thread here. Please check his hard work and ideas there**
Downloads & Installations
a. Download and Install JDK and JRE
b. Download and Install Android SDK
c. Download and Extract Auto-Sign-Tool
d. Download and Extract APK Tools
Setting Up Theme Kitchen [Mini]
a. Extract apktool1.5.0.tar.bz2 anywhere. Copy and Paste apktool.jar in C:\Windows
b. Extract apktool-install-windows-r04-brut1.tar.bz2 anywhere. Copy and Paste aapt.exe and apktool.bat in C:\Windows
c. Extract Auto-Sign-Tool anywhere. Preferably in a specific folder like "Sense4Theme"
Setting Up Sense 4 Framework and Resources
a. Download the attached Desire X Specific Framework and Resources [To Be Attached Soon]
b. Extract the "Framework and Resources.zip" anywhere or Sense4Theme folder
c. Go inside the "Framework and Resources" folder
d. Open Command Prompt
e. Type the following command marked in bold apktool if framework-res.apk
f. Press ENTER and wait while it is installed. You will get I: Framework installed to: C:\Users\UserName\apktool\framework\1.apk
g. Type the following command marked in bold apktool if com.htc.resources.apk
h. Press ENTER and wait while it is installed. You will get I: Framework installed to: C:\Users\UserName\apktool\framework\2.apk
*You will get a couple of warning when you do the installation as in h. Ignore the warning. Unless you did not get any errors, you are good to go.
The Actual Theme Tutorial [Will Be Updated Soon]
[Place Holder] Will be updated when i get free time.
Added to Index.
Cheers
nlooooo said:
Added to Index.
Cheers
Click to expand...
Click to collapse
Nice work with indexing everything. Keep it up!
When will the actual theming tut come?
Sent from my awesome fridge
MaartenXDA said:
When will the actual theming tut come?
Sent from my awesome fridge
Click to expand...
Click to collapse
Sorry for the quite long delay. But i am having some rather odd problems. The themes i redesign has lines which is quite visible for example when a dialogue box is loading. It pre-modded themes (actual file) the said box appears white and clean. But in my modded theme i get odd and ugly yellowish egg colored blotches in the form of lines.
I have tried VTS also. But to no avail. So far i have just changes clock design and apps drawer button (hate the default bubble type ugly buttons)
If anyone can help me please feel free, while i try further experimenting.
ayyu3m said:
Sorry for the quite long delay. But i am having some rather odd problems. The themes i redesign has lines which is quite visible for example when a dialogue box is loading. It pre-modded themes (actual file) the said box appears white and clean. But in my modded theme i get odd and ugly yellowish egg colored blotches in the form of lines.
I have tried VTS also. But to no avail. So far i have just changes clock design and apps drawer button (hate the default bubble type ugly buttons)
If anyone can help me please feel free, while i try further experimenting.
Click to expand...
Click to collapse
Thread bump!
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
I really did give it a try but It didn't work. I tried to change the icon from a file I pulled out of the Gingeritis Thunderbolt rom that I was using before I switched to the GN2. I just don't know enough about making these changes. Can anyone out there help?
I'd like the red and white icon to replace the plain grayish icon in the notification bar when I get new email (gmail).
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
http://www.aeinrst.info/wp-content/uploads/2011/09/Gmail-Icon.png
I'm on Beans B5 w/ the colored Twiz 0.1 theme. If it matters.
This is a great request. Plus 1
+2 for this I would gladly donate
agree OP has made a great request
I'm running Beans stock deodexed
Does anyone at least have a link for a tutorial so I can give it another try?
sorry I can't help but I'm ready to donate if you can get it working
so what you want is that your email notification look like that?
Yes. But that opens another issue because notifications have a dark tint when you add color to them.
Please send me the .png
Gigatopiloto said:
Please send me the .png
Click to expand...
Click to collapse
Here it is
stu5797 said:
Here it is
Click to expand...
Click to collapse
This is actually the image that resembles the current gmail icon used in the notification bar. With the envelope closed. I think the one with the envelope open is used in the app.
http://static.allmyapps.com/data/apps/4/1/4103/f1a2dedf371e486c7e78a37e26ef5f1c_icon.png
newbomb said:
Does anyone at least have a link for a tutorial so I can give it another try?
Click to expand...
Click to collapse
I take no responsibility for any harm that may come to your phone trying this.
You must be rooted for this to work
check out the links at the bottom on this post for ninjamorph stuff
****The new image must be the same size as the old image for this to work****
I was able to get the notification changed using ninjamorph and rootexplorer.
1. rename your image stat_notify_email.png
2. Open ninjamorph and start a new project.
3. go to data/app/com.google.android.gm-1.apk
4. When you click it, it should extract the folder.
5. On the next screen click copy it(lower right corner).
It should tell you where the copy was saved. For me it was on my phone storage in androidthemes/workspace
From there i went to rootexplorer( you could also do this part on your computer).
1. open androidthemes/workspace/com.google.android.gm-1.apk/res
2. Locate these file:
drawable-hdpi,
drawable-mdpi,
drawable-sw600dp-hdpi,
drawable-sw600dp-mdpi,
drawable-sw600dp-xhdpi,
drawable-xhdpi
3. This may just be an extra step but i went through each of these files and added .bak to the end of each original image so it looked like this: stat_notify_email.png.bak (this will keep the original as a backup in the folder).
4. Copy/paste the new image named stat_notify_email.png into each of these folders.
If you don't rename the files when you paste you will just replace the original.
5. Once you have placed the image in all the file you will go back to ninjamorph and click finish project.
6. Click the com.google.android.gm-1.apk
7. It will then create package
8. It will ask if you are sure you want to replace the .apk....click yes
9. It will ask if you want to optimize using zipalign...click yes
10. It will ask if you want to clean up/delete project...Click yes or no(up to you)
11. Once it is done, reboot phone and it should have the new notification icon but it will have a dark tint from the notification bar.
I have not done that much with ninjamorph so there probably is a shorter way to do all this.
Here are a couple links to using ninjamorph:
http://www.youtube.com/watch?v=8uD0o52typs
http://forum.xda-developers.com/showthread.php?t=674604
http://www.droidxforums.com/forum/d...ninjamorph-change-notification-bar-icons.html
Hopefully this works for you.
Excellant write up for those wantign to try some of this..
Android App Theming Guide(Self)
This is my guide on how to create themes for Android Apps.
First lets start with desktop preparation.
Tools you need
Decompiling tool : apktool
Image Editor : Adobe Photoshop(paid) or Photoscape(Free)
IDE : Notepad++ (one of the best code reading tool)
Tools and SDK : Android SDK with any API(API-10 if you want to theme only for SGY)
1.Download apktool and extract the files in windows root directory (windows) or add the directory where aptool files are in to PATH
2.Navigate to directory where the apk file is using cmd and type
Code:
apktool -v d filename.apk destinationdir
4.Now you have the folder with all the xml files and images which are now in human readable format.
Reserved
Image files
First, Lets start with editing the image files..
Before that android uses png image files mostly as this format contains transparency and alpha stored in image and it is light.
The two most used image files are .png and .9.png.
The file .png can be edited by the photo editor i have posted but the .9.png requires a seperate care.
For editing .9.png first you have to use normal photo editor to edit the image and then drag the resulting png image into the draw9patch file in sdkdirectory/tools.
So What is this .9.png????
Unlike normal png files this .9.png files contain information for expansion of the image according to the content inside.
With the draw9patch draw black borders to the edges what you feel that has to be expanded.
This is how the draw9patcher screen looks like
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
XML Files
Now the second part is the xml files..
These are present in res folder.
Android uses xml files for the user interface part of the app and Java for the logic.XML files are the very important files used by an Android App.
XML files are for Layout,Manifest values..etc
We are not going to tamper with these xml files a lot.
The basic operations using XML files are editing the layout and animations or drawables etc.Also Xml editing is used to change string values in APP.
You can also add additional image to android apps.This can be exactly done by,
Choose the required image and put it in /res/drawable folder.
Now open the folder values inside res and open public.xml using Notepad++ and go to the last line of type drawable (incase of image) or any other depending on resource and create a new line like
HTML:
<public type="drawable" name="imagename" id="" />
In the place of id put the id of your previos line incremented by 1.It is in HEX so for example if my previous line ID is 0x750395f then the id for this line will be 0x7503960
SMALI FILES
smali files are present in the folder src.This is somwhat tricky part as these are dalvik-bytecodes which are of low level language and are similar to the java files you write.These are the files you have to modify in order to change the app permissions or if you want to mod the app by customising features and adding additional features.You can find more information of smali here
Tip:If you find smali difficult just write your code in java and build it.After that decompile the resulting apk and take the smali code from it...
Now once you are ready with all just build app by
Code:
apktool b WorkingFolderName appname.apk
Pls dont forget to sign your app
Press Thanks is this was helpfulll :good:
Thanks and Gud luck
optimus
Nice guides
ROM EVOLUTION X3
KERNEL HELL FUSION
ALINS JB THEME + EVOLUTION S3 STATUS BAR.
Thanks
Really needed it.
Sent from my GT-S5360 using xda app-developers app
Nice guide
PHONE SLOW CLICK ME?
_____________________________________
"No one lives in the slums because they want to. It's like this train. It can't run anywhere except where its rails take it."- Cloud[FFvii]"
Is there a more simpler way of creating themes? Like using drag and drop method? Can someone provide a link?
nice, will try it on my phone but it is s6312
hope that it works
So, if I want to change my stock ROM pop up look like ICS, I must edit 9.png ?
metalhead\m/ said:
nice, will try it on my phone but it is s6312
hope that it works
Click to expand...
Click to collapse
Nice Guide