Tutorial details

Creating 9 Patch Images – Android Asset Studio | App Code for Sale | Preview

Creating 9 Patch Images – Android Asset Studio | Android Tutorial

How to work with 9 Patch Images

Overview PAGE TOP

If your here you already know what a 9 patch image is.

9 Patch images are stretchable, repeatable images reduced to their smallest size.

You define what regions you want to stretch and where your content is.

For background reading take a look at: Simple Guide to 9 Patches

The great thing about Android Asset Studio is. It lets you pass in one image, use a wysiwyg tool to define what regions should stretch, then download that image 9 patched in mdpi, hdpi and xhdpi. Such a time saver compared to going through each image manually adding the patchable regions.

Here’s a walk through:

First off select your source graphic and the density that it is based upon. I’d always recommend uploading the xhdpi image and letting the asset studio scale it down. That way you’ll get better image quality and still use 9 patching to stretch it back up.

nine_patch_1-300x10897.png

Then name your drawable, this is the name you want your final image for each density to have. It will be used to reference the image when you move the drawables into your project. It ends in ‘.9.png’ to show it is a 9 patch.

n.b. if you already have a file called somedrawable.png and you move somedrawable.9.png into the same folder, Android will take it as the same name and throw an error, you need to remove the non 9patched image.

nine_patch_2-300x76.png

Now you define what part of the image needs 9patching, using the Edit Mode tool. ‘STRETCH REGIONS’ is used to define what part of the image you want to stretch when the image needs scaling up. ‘CONTENT PADDING’ is used to define the region of the image that is used for labels, text etc. Setting content padding is optional. In the example below I have defined a region in the bottom right that can be stretched. The image will stay uniform and the space the 9patch is stretching into will be taken up by more blue background.

nine_patch_3-274x300.png

Now you can hit the download button, this will give you a zip file containing a ‘res’ folder, the three drawable folders and your correctly named drawables. Tip for eclipse users. If you just drag this folder onto the base directory of your project. It will ask you to ‘overwrite’ just hit yes and it will merge your current res folder with these new images (saves you dragging them one by one).

You can see a one pixel border has been added that holds the 9patch description. The stretchable regions are defined on the top and left and the content padded regions right and bottom.

nine_patch_4-300x286.png

So checkout: Android Asset Studio !

Reference PAGE TOP

http://blog.blundell-apps.com/creating-9-patch-images-android-asset-studio/

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.