Like many other's i have tried to hop onto the skinning boat after the release of metamorph.
and i think like many others i have problems with those .9.png files. i read stericsons write up on them but i cant make any sense out of it.
therefore i would like to ask from any of you that do understand them: could you make a short video describing the editing of 1 file?
since i'm a visual kind of guy this would 99% sure make me understand it and make me able to continue with my theme.
i would really really apreciate this guys..
you can power up draw9patch and play with it and you will understand it..
few thing you should know
when you load a regular png file(not .9.png) the tool automatically expend the size by 1 pixel each side(up down left right)
then you can edit
the left and top sides represents stretchable area.. you should put there one or two black pixels.. no more!(for each side)
the right and bottom sides are represents the content area.. you can fill it how you like.. but keep it one line for each side
then you need to save it.. when you save it the tool adds a .9 to the end of the file name
the next move is to compile the file with eclipse........
i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC
ok so the problem for me seems to lie with eclipse, atm i'm stuck on the fact that when i try to open an existing project, i dont have the AndroidManifest.xml and when i extract it from some other theme, it says it cant be parsed. so eehm where exactly should i find a unparsed AndroidManifest.xml or what should be in it?
you already got me a lot further! thanx!
did you try using a different sample application? there are some that throw some errors when i first try to open them as projects but home.apk seems to work fine for me. i tried to figure out why youd be getting that error but i dont seem to get it for any of my samples so maybe its a problem with your SDK? im not sure but here is my AndroidManifest.xml from the home.apk sample, it works for me so it SHOULD work for you. if not you may have a deeper issue going on. anyways just drop the ".txt" from the end of the filename and drop it in [YourSDKdirectory]/platform/Android 1.6/samples/Home/ and then try to open as existing project again. Lemme know if it works...
-BMFC
View attachment AndroidManifest.xml.txt
Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?
AndroidFiend said:
Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?
Click to expand...
Click to collapse
yeah, you just give the image a 1px border on all sides and then draw the guides on the border and then save it and compile with eclipse...its the same basic thing, the draw9patch tool just automates most of it for you.
-BMFC
Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.
bmfc187 said:
i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC
Click to expand...
Click to collapse
hey brotherin ..
i didnt have to do that at all. just make sure you have a fresh .png to work with.
)i.e - ballsack.png - wanna stretch it so the sack is in the middle of png.
)do the lines up top and left like stated .. but the guides really arent that important at the bottom.
)next you will than get it to your liking - watch the right side of screen in the example pane, you can see the image shifting - hence you can shift gradients and such with more guide lines behind the first pixel that you mark for guide line. get it?
)than you save the file from the "File" option as a .9.png file.
)and walla its a .9 that can be shfted with the existing metadata that is there.
just dont get too advanced or imsure it wont work to well.i have edited all kinds of them in PSCS4 and than the .9 editor from HTC. Its hard as **** to do. but it pays off. hope this helps.
like bmfc said, get the uncompiled .9.png from the source. makes it so much easier.
then what I do is
open the source .9.png in cs4
marquee tool, and select all content except the guidelines, make it invisible
save that image as ex. guide.png.
take all the images that look the same i.e pressed/selected/default of the same images
open them and the guide.png in photoshop, copy and paste the modified .9.png onto the guide.png, then I save as the original image, repeat as many times as needed,
then when done with that before I compile, I move all of the images with guidelines to a folder ex. guidelines, so that I will have them for future use.
then follow what bmfc said to compile them in eclipse.
check out this video walthrough for working with the .9.png files.
http://www.youtube.com/watch?v=Lf1l9JV9JBw
thanks for the info
the youtube link was a great help
less frustrated....and need improvement but at least getting better and getting the hang of it
the attachment was just for kicks and practice
takumi2k4 said:
Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.
Click to expand...
Click to collapse
completely legit. ive been doing it now for a while, works fine. after editing in photoshop, just close the image and click ok when it asks if you want to save the changes.
Related
I'm not sure if this should go in development or Q&A so I figured I'd post it here since it is a question. I proposed an idea to a themer and he's asking me to help him with it only problem is I am a complete noob, and have no idea where to start . Could anyone help me out with this?
There are at least 2 different images that count as 'popup menu' in full and about 9 more images that make up the top part, middle part and bottom part of various system pop up menus. All in all you're looking at editing about 12-13 images. Or basically design in photoshop (or any graphic editor) and cut it up accordingly and then make .9.png images out of them and then compile them and then putting them into the theme file to be flashed.
I think you need to read more about themes and how-to's before attempting this. Do you have a mockup popup made? Some theme maker can take it and do the work for you if they got the time.
ive been having some trouble editing the .png files from the Facebook.apk.....
all im trying to do is replace the widget background png but it keeps sizing it wrong once its changed...
I am guessing this has to do with the fact that it's a .9.png but ive messed with it in draw9patch and i just cant seem to make it work
Are you compiling your .9's?
Had exactly the same problem, tried exactly the same solution
It turns out that the all draw9patch tool does is adding 1 pixel wide black stripes that define which area is resizable and which is fixed plus it shows you a preview. But you can as well do this in normal graphic editing program. The real magic happens when you compile a project containing png's with these black bars: the image is cropped from 1 pixel border containing the extra bars and necessary information is stored in the image itself.
I don't know if there even is a method of converting only the png's without setting up an entire development environment, so reading on how to do that might be a good starting point. Note that you don't need any fancy programming skills here, just compiling some simple example app should do the trick if you add your png's to it. Can't give you any details on the process since it's still something i have to try myself
Or is there a simpler way - just running the png's trough the compiler without actually setting up a project?
ffff00 said:
Are you compiling your .9's?
Click to expand...
Click to collapse
no i wasn't .. and obviously that was my problem.. got it all sorted out now though
I really want to theme my phone, is there any tips to make it easyier
an also theres no meny png files that im not sure what changes what, is there a guide of any sort for that or anything.
I got editing images down but im still gettin lost on changing things
an out of curioisy is there a good themer out there that would be willing to work with me personally so im not gettin mixed results
here ya go..this should get you a start
http://www.google.com/cse?q=how+to+...ub-2900107662879704:fs7umqefhnf&ie=ISO-8859-1
Great resource here
im not sure if im wording this right, but to theme an app u open that apps apk. to theme a widget u open that widgets apk. right?
So what all does framwork control?
still tring to get it togather what png's edit what on my phone
Essentially yes. Most of the app's .png's will be in the respective .apk, although if it's a Sense ROM then a lot is stored in the 'com.htc.resources.apk'
The 'framework-res.apk' holds all the files for like the notification area, the pull down menu, status icons, buttons, tick boxes, radio buttons etc...
The best way to familiarise yourself with it all is just to have a look through the image folders and see what you see.
not much luck, im gettin lost, so ill be back in a cuple days let u knw if i got it yet, if i cant come up with it, ill just make a list of things i want done an see where it goes.
Are you on a Mac or PC?
Keep in mind, you have to sign it to get it to install if you unpack it. After weeks of failed signing attempts (I still cant get them to sign) I found a way around this though...just don't unpack it Use 7zip on PC or I am on a Mac so I use Springy. Replace what you want and you are good to go.
Let me know if you need more help with this method. It isn't the way everyone else does things, but it works for editing things and making it what you want.
@reanger91878 I was just looking into start some theming and was trying to figure out if using a Mac put me at a disadvantage... but I guess since I found you I'll know who to ask if I run into a problem. So I guess I'm gonna get Springy and see what I can figure out. (I've never done this crap before).
:edit: boo it costs money, any free options? or will the non-licensed version work for me?
Alright
heres what i want done
I have NFX Sprint 2.31.651.7 STOCK Odex Update3.
Lock screen bar where its grey i want black
All screens under settings an phone options like device1 pic 1 want there its white to be black an the black letters white with a green boarder.
Device2 pic: want top an bottom where its grey to be black save with bookmark widget an calander app
Device3: white section black an the letter white
Device4: change all screens from white to black an white lettes an the grey buttons at the bottom to green same with clock, messages, music and photos
Device5: i want the ui buttons at the bottom like that but for it to be Phone in the middle app drawer on the left an add to home on the right
Invert all menus uder browser
so if some one would be willing to help with what xml an pic files i edit to do it, or some one helps me put it togather it would be awsome an id be very thankful
BuddahWolf01 said:
@reanger91878 I was just looking into start some theming and was trying to figure out if using a Mac put me at a disadvantage... but I guess since I found you I'll know who to ask if I run into a problem. So I guess I'm gonna get Springy and see what I can figure out. (I've never done this crap before).
:edit: boo it costs money, any free options? or will the non-licensed version work for me?
Click to expand...
Click to collapse
Using a Mac does not put you at a disadvantage per se...kind of, but there are workarounds
You don't have to use Springy, that is just what I use. The key is to find an Mac application that can open up a .zip file without extracting it, because once you extract, you need to resign (no big deal really, but for whatever reason my computer won't properly sign). I think the free version of Springy lets you open up a ROM of a certain size? Can't remember...but if you are editing a theme, they should open, because most are under 15MB. You can also just search around for other Mac apps that handle zip files and find one that does not extract. Let me know what you come up with and what you need help with...I gained much knowledge here, and will gladly pass on what I have gleaned.
DubsideWICKED said:
heres what i want done
I have NFX Sprint 2.31.651.7 STOCK Odex Update3.
Lock screen bar where its grey i want black
All screens under settings an phone options like device1 pic 1 want there its white to be black an the black letters white with a green boarder.
Device2 pic: want top an bottom where its grey to be black save with bookmark widget an calander app
Device3: white section black an the letter white
Device4: change all screens from white to black an white lettes an the grey buttons at the bottom to green same with clock, messages, music and photos
Device5: i want the ui buttons at the bottom like that but for it to be Phone in the middle app drawer on the left an add to home on the right
Invert all menus uder browser
so if some one would be willing to help with what xml an pic files i edit to do it, or some one helps me put it togather it would be awsome an id be very thankful
Click to expand...
Click to collapse
Big tasks Don't know if anyone will actually be able to do it for you, but check the resources above to get an idea where to start. It's the whole "give a man a fish and he eats for a day, teach a man to fish and he eats for a lifetime" idea.
Open up your ROM and check the framework-res.apk and see what you find...but you are looking to do more than just framework edits...
ranger61878 said:
Big tasks Don't know if anyone will actually be able to do it for you, but check the resources above to get an idea where to start. It's the whole "give a man a fish and he eats for a day, teach a man to fish and he eats for a lifetime" idea.
Open up your ROM and check the framework-res.apk and see what you find...but you are looking to do more than just framework edits...
Click to expand...
Click to collapse
Out of what all i want edited what is controlled by frame work an then would the rest be Apk files in the system app
my biggest problem is im not understanding what xml files change what an some of the pngs idk what they change
edit: I found post that said this, is that a pretty good way to descride it.?
app folder - This folder contains all of the apps that will be installed during an update or wipe. You will need to extract only the apks of the apps you wish to change the icon and graphics for.
-Launcher.apk - This file is in the app folder and contains the menu launcher tab, clock, google search widget, wallpapers and some other things.
framework - This folder contains framework-res.apk, this is where the bulk of your editing will take place.
When you open a apk you will see:
assets - This will contain images, sounds and other content used by the programs. Not always used!
META-INF - This contain the encryption data of the update.zip.
res - This folder contains all of the png and xml files. The xml files are used to format the UI, these can be used to change the locations of things on the screen. The xmls need to be unencrypted first. Depending on the apk there can be a bunch of folders under the res folder but we will only concentrate on the drawable ones.
-drawable - The png files in this folder are displayed wheather the keyboard is open or closed. The majority of the files are here.
-drawable-land - These are the files that will show when the keyboard is open. There won't be as many files in these folders. Most of the time the programmer will re-organize the layout with an xml file.
so basically everything is a picture that i want changed an xml files control text color an placement of where things are or what?,
im try my best to but thoes darn xml files are messing with me lol
To start, don't mess with the XML files. Just make changes to the PNG files. Once you get familiar with changing icons and status bar colors, then you can start messing with XML files. Let's say you want a different alarm icon.
Look in the DeskClock.apk under res/drawable-mdpi. You would find an icon(PNG) you want to substitute with, size it to the same size as ic_launcher_alarmclock.PNG, name it the same name and replace the original in the apk.
Use adb to push the apk back to your phone. I would then reboot and then enjoy your new icon.
Some icons will be in drawable-mdpi and some just in drawable. No need to change hdpi on our phones.
The majority of your status bar icons and base OS icons will be in framework-res.apk.
Sent from my HERO200 using XDA App
poashll said:
To start, don't mess with the XML files. Just make changes to the PNG files. Once you get familiar with changing icons and status bar colors, then you can start messing with XML files. Let's say you want a different alarm icon.
Look in the DeskClock.apk under res/drawable-mdpi. You would find an icon(PNG) you want to substitute with, size it to the same size as ic_launcher_alarmclock.PNG, name it the same name and replace the original in the apk.
Use adb to push the apk back to your phone. I would then reboot and then enjoy your new icon.
Some icons will be in drawable-mdpi and some just in drawable. No need to change hdpi on our phones.
The majority of your status bar icons and base OS icons will be in framework-res.apk.
Sent from my HERO200 using XDA App
Click to expand...
Click to collapse
Well said.
You can also do it on your computer...don't extract, just open, replace, close, put on SD and flash (after you nandroid...just in case )
iv been looking an looking, but cant seem to find a black stock theme
with stock htc green when a button is pressed, any one kno off a stock black theme i might be over looking
still havent figured ths out, an im having problems because im odexed?
DubsideWICKED said:
still havent figured ths out, an im having problems because im odexed?
Click to expand...
Click to collapse
Yes more than likely your only have trouble theme and odexed rom. Try a rom that is deodexed or I heard the have some deodex sripts that will do it.
ASimmons said:
Yes more than likely your only have trouble theme and odexed rom. Try a rom that is deodexed or I heard the have some deodex sripts that will do it.
Click to expand...
Click to collapse
Alright is there a performance or memory difference between odex an deodex
Does this same process apply with adw? If so, does that mean theming aosp and cm6 are equally as easy?
Sent from my HERO200 using XDA App
Big question. When you rotate the phone, the status bar background (in themes like Darkness, with a design) gets messed up because it's shaped for our screen and not a small piece that gets tiled like the original. Can you make a landscape version of the background? I noticed in TouchWiz30Launcher.apk there is a homescreen_icon_bg.png and homescreen_icon_bg_h.png the latter being for a horizontal orientation of the launcher. Can we apply this concept to a custom made portrait AND landscape drawer background in twframework-res.apk? I would really like to know if it is possible, but am not asking for the creation of the background. I can make my own, but I need to know how to make it work.
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
CuriousTech said:
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
Click to expand...
Click to collapse
Thanks a lot for your post, I looked into status_bar_expanded but couldn't find anything applicable. Looked at status_bar.xml and it contains all the info on status_bar_background in the vertical position. How would you put it all into horizontal? Would you have to edit the existing xml or make a new one in layout-land? Could I just copy it into layout-land and edit in some new filenames and stuff?
EDIT: You know how to signify a file it says @drawable/statusbar_background? Does this actually refer to status_bar_background.9.png? And how would you signify a drawlable-land destination? @drawable-land/statusbar_background?
That's mostly what I don't understand yet. In framework-res there are 3 folders:
layout
layout-land
layout-port
icon_menu_layout.xml is in land and port and not in just layout. I think because layout is default for both, and land or port is used for those modes if the file doesn't exist in layout. Just like an xml in drawable can replace an image if the same name is used. But I think there's more to it than that. I tried creating a layout-land and layout-port and moved status_bar_expanded.xml to both and it looked normal both ways. I would think that layout-land would automatically use the drawable-land images too. Something else is missing.
EDIT: Oh yes @drawable/statusbar_background is the png in drawable-hdpi, unless there's actually a drawable/statusbar_background.xml which would make it use that instead. I just don't know where drawable-land-hdpi fits in.
Inside the XML there is a "vertical" and "horizontal" section, you'd have to change that too. I have changed it and will try it tonight in my framework. I just don't understand the references it makes too well...
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
CuriousTech said:
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
Click to expand...
Click to collapse
I honestly don't know what that stuff means with a headache, so I can't understand what the links refer to, sorry
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
CuriousTech said:
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
Click to expand...
Click to collapse
Crap 10char
I think I'm finally understanding how the draw9patch tool works, and with that, how .9.png files work as well. Just because it wasn't clearly explained in anything else I saw (well, clearly to me, anyway), I'm going to try to do a quick explanation of how it works.
The first thing to remember about the draw9patch tool is that it's generally for use after you've already edited a .9.png file, and that a .9.png file is built to be stretched. To start editing .9.png files, just decompile the source apk (usually something like framework-res.apk) with the apk manager or apktool.
Open the .9.png file in Photoshop and edit everything except for an area 1 pixel wide around the edges of the image. That area is sacred. There is probably already something there - if so, leave it.
If you want an easy way to make sure it stays clean, just create a new layer, use the "select single row/column" tool in photoshop to select those single pixel borders one at a time. Using the bucket tool, fill in that single pixel border with a solid color as a visual reminder. Keep that layer in place as you edit as a guide, and when you get ready to save the file, make that the active layer, and use the magic wand to select the area inside the border, then invert the selection (so you just have the one pixel border around the outside selected). Go through any other layers you have in the drawing with that selection still selected and delete anything inside the selection. That will keep the area clear on all layers. Once you've done this, delete the layer with the border and save your .9.png.
Once your .9.png file is saved, start the draw9patch tool (usually in android-sdk-windows/tools/draw9patch.bat).
When you fire up the draw9patch tool in the android SDK, you'll see an arrow on the screen. The easiest option is to just drag the .9.png file into the window. It will open it, but it might be hard to see. If that's the case, drag the "Zoom" slider as far to the left as you can until you can see the entire image.
The first thing you'll want to do is activate the buttons that will best show you how your .9.png file will stretch and move. Here's what each button/setting will show you:
Show/Hide bad patches - this will show you areas where it will stretch, but it will probably look bad. Go ahead and make this show bad patches (the button will say "hide bad patches" if you are currently showing bad patches)
Show lock - I honestly don't know. I haven't yet seen this setting work for anything. Leave it unchecked.
Show patches - This will show you where your image is going to stretch. Check it.
Show content - This will show you where things get written/overlayed on your image. Check it.
Zoom - Zooms the image.
Patch Scale - adjusts the preview of how your image will stretch at different scales.
Now, you're probably wondering how .9.png files determine how the image stretches, and where stuff gets written. That's what the 1 pixel border tells it (except for where two borders overlap - that's a dead area). Here's the way it works:
The border on the top of the screen controls the area of the image that stretches left-to-right. Every black pixel you put in this border selects a portion of the drawing that will be repeated when Android needs to stretch the image in the landscape direction.
The border on the left side of the screen controls the area of the image that stretches up-and down. Every black pixel here will set a repeating area as the image stretches in the portrait direction.
The border on the right side of the screen sets how much area in the portrait direction is available to have items drawn inside of it. If you have some text that will be written on your image by Android (a clock, for example), it will check the black pixels on the right side of the screen to determine where it can put them.
The border on the bottom of the screen works in conjucntion with the border on the right side to determine the landscape portion of the area where things can be drawn.
One thing you'll notice with draw9patch is that it will only let you draw in the 1-pixel borders. This makes it generally easier than Photoshop to work with.
To start, just draw a few pixels at the top and left side borders, then look in the preview pane on the right side of the window. That will show you how those areas will repeat. If you adjust the scale, you can see how it will repeat over a greater area. If a patch isn't going to work, it will show up highlighted in a red border. If you need to erase, just hold shift and then click on the pixels you need to get rid of.
Once you have a stretchable area that works for you, put some pixels in the bottom and right borders until you're happy with the area that will accept drawing items. If you look in the window on the right, you'll see a blue area highlighted where that stuff would go. As long as that looks ok to you, you're good to go.
After you've checked everything and it all looks like it will stretch well, you can just use the File-Save command, and it will save a good .9.png file that (should) compile properly.
A quick pointer that I'm discovering: If you have an image that really won't stretch well in any direction, just delete everything two pixels in from each edge, leaving a transparent line just inside the 1-pixel border. Then select those areas as your repeating areas. It may mean your item shrinks on the screen, but it also means it will look the way you intended.
Good info, thanks.
Sent from my SAMSUNG-SGH-I897 using XDA App
Well done!
If I don't have to make an image with customized draw9patch guides, I personally prefer to make my images before adding the 9patch guides. If you have the fully decompiled .png with the 9patch pixels visible, any slight mistake (partial erase, glow/fade/shadow overlap, ect.) can cause an error when you try to compile it.
Check the size of the .9.png you want to edit before it has been decompiled, and open a new photoshop document in that same size. Make your .png. Decompile, then drop your new image on top of the old one and merge the layers (you may need to erase some parts of the original if they are overlapping). If you find yourself repeatedly editing some of the more common .9.png files, it can also help to make a transparent image template that only has the draw9patch guides on it. Make sure it decompiles and compiles properly, and then you can drag and drop it over your new images, merge layers, and you're finished. Obviously, this only works on images that will be the same size and have the exact same draw9patch guides. Those template borders are very useful for porting and minor changes to common .9.pngs.
Thanks, 10ton.
Since writing up that first post, I came across this. It's the xUltimate-draw9patch tool. I know it's been posted before, but this is the super stripped-down version. It has the application and two folders. You dump your decompiled, doctored up .9.png's in the deepest folder of the "originals" folder set, and then run the xUltimate-d9pc tool. It will compile the .9.png files (assuming all is well - it'll give you useful error messages if they're not right) and spit out the finished ones in the deepest folder of the "done" folder set. From there, it's just a matter of sticking them back into the apk's with 7zip.
I personally have found it to be pretty useful when compiling multiple .9.png's at once, instead of using the draw9patch tool or apk manager.