Android 9-Patch Images

In an effort to make my Android app as flashy as my iPhone app I ran into something just plain odd.  All of the images looked furry.  It seems Android uses something called 9-Patch images.  9-patch graphics get their name for the fact they have 9 areas called patches that scale separately. 

So now I figured out my problem I figured there had to be a Photoshop plug-in that allowed me to convert my existing png or psd into 9-Patch format.  Unfortunately it seems the only way to do this currently is to use the draw9patch utility that ships with the Android SDK.

I’m still working on converting and will provide an update if there is any interesting tips or tricks that surface during the process.

To convert and set my areas I’m using the below references.

 

4 comments:

vaasu said...

What is the photoshop plug-inn, please tell me

Ben Bahrenburg said...

@Vaasu doesn't look like there is a photoshop plugin yet.

Here is another good tutorial on the subject though.

http://www.androidacademy.com/3-tutorials/43-hands-on/154-device-independent-display-scaling?start=1

Super Kinz said...

You don't need a photoshop plugin, just use photoshop to take an existing asset, add 1px of transparent space to each side, then use your pencil on black color to identify the stretchable areas on top and left sides. Then save as "filename.9.png" and you're good. That's all android's WYSIWYG editor does.

Bob Wold said...

Yep... just be careful that all pixels are either completely transparent, or completely visible :-)

If you goof, just open it with the android-sdk/tools/draw9patch and re-save it to resolve issues.

Post a Comment