9patch for a lot of resources without losing quality

Question

My designer works on Illustrator and exports all the resources for mdpi, hdpi and xhdpi (and also for iOS res) with a script. For buttons and streachables images, I'm looking for the best solution to generate the 9patches.

Until now, I was using the draw9patch soft in the SDK to generate the 9patches. It still works, but seriously, I hope that there is a better way. If in my project I have 20 buttons, with 3 or 4 states, and in 3 density types, I can't imagine the hours that this solution will require.

A solution would be to use the Asset Studio tool, but I don't want to provide my xhdpi file, and get poorly generated images for the other density folders. My goal is to get pixel perfect 9patches for each density.

We also tried to use SVG files for stretchable images, but it seems that Asset Studio doesn't accept them.

If my designer tries to make the 9patch directly in Illustrator, he can't use the script to export, because the 1 px line will be scaled too, and won't measure 1px anymore.

So is there a solution to make 9patches, without losing image quality, and without spending ten hours for it ?

Crestfallen

That's an excellent question - a Photoshop plugin would be great, but doesn't exist afaik... – Olcott

Answer 1

My solution is to spend a ton of hours learning draw9patch, and then it won't take hours to make the buttons. I did this myself, and suffered, but draw9patch is a really simple way to do it, and each image (for buttons) takes me no more than 15 seconds. draw9patch images should are great because you really only have to do them once, and they will work with all densities, as they will stretch accordingly. If you have text in your images then you have another problem. This is frowned upon because you lose the ability to translate your application with a simple stings.xml

My solution:

1. Get awesome at draw9patch

2. Don't use image's with text. draw9patch can be used to center the text of a button correctly and this will increase the ability of your app to be used in different languages. Something that can easily boost your download/sales. This is important, because even if you give your app the ability to target one more language (let's say... Spanish) then it really makes that target audience happy.

Hippie

I already made tons of 9-patches with the draw9patch tool, and I don't think that we spend hours learning how to use it, it's pretty straightforward, but we spend hours on actually using it... Try one of the tools given in the other answers and you'll see. Also "draw9patch images should are great because you really only have to do them once, and they will work with all densities, as they will stretch accordingly." is wrong. 9-patches don't solve the density "issue", if you don't provide a 9-patch in each density folder, your 9-patch will be scaled, and you'll get artifacts or blurry images. – Crestfallen

Answer 2

Here is good nine-patch editor, that save for me tons of time: download jar link and some description. The greatest feature is "copy-paste" function, that allows provide the same stretchable areas for images in different state really fast.

I don't think there is some editor that allows works with different image sizes, because there can be significant difference for different screen sizes.

Mullein

I didn't know this soft, I think it's great. But the better9-patch-tool also has all theses features, plus a batch feature that allows me to work on one image, and affect it to a folder of images. Apart from that, I prefer the GUI of your tool. – Crestfallen

Yeah, I bought better9patch-tool, but don't like it at all... The GUI sucks and I hate that those lines are continous, not pixel by pixel (makes it impossible to have one pixel stretchable area which is often desired). This one looks better – Olcott

Answer 3

I zip through my 9-patch generation by opening each image to be 9patched in an Image Editor (Photoshop / Paint .NET) and then increasing the canvas size by 2 on both dimensions.

Once you've done this you can draw in your stretch and padding lines quick time. It's a bit of a pain if you're doing it for 100's of images but it only need's to be done once per project. I can't imagine many projects where there would be that many 9-patches for it to take that much time at all...

If you really want to streamline the proccess you can remove the padding indicators from your 9patch and add them to your view's using the style attribute...

If my designer tries to make the 9patch directly in Illustrator, he can't use the script to export, because the 1 px line will be scaled too, and won't measure 1px anymore.

This line worries me - you shouldn't be scaling up mdpi images to hdpi, their wouldn't be any point. If there is only an mdpi image available it will use it and scale it automatically at runtime.

Lysenkoism

Like I said, I have 20 - 25 buttons that need 9-patches, for each state and each density type. It's a big project, and the design will probably evolve a bit, so I need something quicker than this method. Regarding the 1 px line thing, he works in vector. – Crestfallen

If you have 20-25 styles of buttons in the same app, unless you're doing some sort of user determined themeing, you might want to reconsider... – Lysenkoism

Well, buttons + other components that need 9patches. Yep 2 types of users in the app, with some differences in the themes. And around 80 activities – Crestfallen

Still seem's pretty high - I would have imagined 3 styles of buttons per user MAX otherwise I don't know how you're keeping a uniform feel across your app, but that's all you and not me. Good luck with it! Hope you find a reasonable program to get it done with. – Lysenkoism

Answer 4

I am using 9 patches mainly to draw backgrounds for buttons and other views. Most of them are single color backgrounds with some kind of 2 pixel separators and some of them are gradients with separators as well. I am putting them in the res\drawable-nodpi folder which is a special folder that instructs android not to perform any scaling to its contents.

So far I have the expected results with no problems at all. My 2 pixel separators are 2 real device pixels (not density pixels) in several devices from ldpi to hdpi resolutions which is what I want.

Hope this helps...

Speechmaker

Thx, I use this sometimes too. But for a more complex image like we can have for the system buttons, we need to provide the 9-patch in each density folder, whereas it will appear blurred. – Crestfallen

Answer 5

So is there a solution to make 9patches, without losing image quality, and without spending ten hours for it ?

Step #1: Write a script that takes the 9-patch information from one PNG and applies it to another PNG, using any number of PNG-reading libraries for your favorite desktop programming language

Step #2: Use draw9patch to get the rules right for one image for one density

Step #3: Use the script to apply those rules to the other variations of the state at the same density

Step #4: Repeat steps 2 and 3 for other densities

Stavro