Developer's Blog

[Android App Design Tips] How to improve App UI with NINE Patch

Firstly, if you have not already tried out Sleipnir Mobile for Android, please download it from the Sleipnir Mobile for Android product page.

Android devices use many different resolutions, so in order to prevent buttons, etc. from looking untidy when expanding them, it is necessary to optimize images so that they can change to tidy-looking shapes.

One such specified enlarged image for Android OS is NINE Patch image.

Today, I will introduce the basic way to make and structure of NINE Patch images.

I will use a tool called draw9patch is supplied at Android SDK for creating NINE Patch images.
draw9patch can be located in <Android SDK folder>/tools.

The stucture of and how to make NINE Patch images

1. Firstly

Create the image(png format) you want to enlarge, and then open in Draw 9-patch.
When you open an image in Draw 9-patch, a 1px blank border will be added around the image.
Use that area to enlarge the image and specify the domain of the contents.

The image on the left is for editing, the images on the right show previews of the enlargened image.
Because the domain to englargen is currently not specified, if you enlarge the image now, the rounded edges will break up and the borders will consequently become thicker.

Please check the link below for more details:

http://developer.android.com/intl/ja/guide/developing/tools/draw9patch.html

2. Specify the domain to be enlargened

Drawing a black line in the top and left 1px of the image specifies that area to be enlargened.
Specify the area by drawing a horizontal line in the top 1px, and a vertical line in the most-left 1px.

The green and pink parts will be enlargened. Because the rounded corners will not be enlargened, the image will remain tidy.

You can set multiple domains to be enlarged.
If there are areas that you do not want to be enlarged in the centre of an image(The downwards arrow in the image below), you can also choose to avoid that area when enlargening.

3. Specify the contents domain

The contents domain is the area where icons and text will be placed inside the image.

The blue area displayed to the right of the screen is the contents domain. Areas that are not in blue are left blank.
If you want to use a lot of space for icons and text, please make sure to set the contents domain as wide as possible.

4. Save the NINE Patch image.

[.9] is added to the end of file names saved with Draw 9-patch.
For example: [hogehoge.9.png].
Android recognizes files as NINE Patch images by the [.9] attached at the end of file names.

Practical uses

You can make use of the NINE Patch image multiple specifying of enlargement domains to create NINE Patch images like below:

Ichimatsu pattern:

Polka Dot pattern:

Curved arrow pattern:

As you can see, you can create quite a lot! The Ichimatsu pattern and Polka Dot pattern both require parts with enlargement rates that do not change.

NINE Patch is very simple to use and flexible.
The practical use examples shown above may be only usable in a few scenarios, but it does show you what you can do to improve designs of apps for Android.

 

Please join us on Facebook for Sleipnir Mobile!


Please follow us on Twitter!

Facebook Comments