Working with 9-patch (Nine Patch) images in Android

July 12, 2012
By

Nine patch ( 9-patch ) images are normal images with an additional 1 pixel border. This additional 1 pixel border is used to define

1. the scalable portion of the image

2. the portion of the image where the Android’s view object can render the content ( eg : caption of a button )


Demonstrating the use of 9-patch image

Please see the images( Figure1, Figure2 and Figure3 )  given below.

A background image for Button

Figure 1 : Normal image

Patched Image

Figure 2 : Patched Image

Buttons with Normal Image and Patched Image

Figure 3 : Buttons with Normal Image and Patched Image

  • Button1 uses the image shown in Figure1 as background image
  • Button2 uses the patched image shown in Figure2 as background image
  • In the case of Button1, the whole shape of the button is changed from its original background image. Also the edges of the button is blurred.
  • In the case of Button2, the shape of the button remains unchanged as well as the edges are still sharp in appearance. Due to these reasons, the use of nine patch ( 9-patch) images are highly entertained.

Now let us see, how the application shown in Figure3 is developed.

For its development, Eclipse 3.7.2 is used and is tested in Android Virtual Device of API 2.3.

The patched image is created using the tool draw9patch which is shipped with Android SDK and is available in its tools directory.


1. Create a new Android project namely “NinePatchDemo”

New Android Project

Figure 4 : New Android Project


2. Select Android build target

Select Androd Built Target

Figure 5: Select Androd Built Target


3. Enter application details

Enter Application Details

Figure 6 : Enter Application Details


4.res/values/strings.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">NinePatchDemo</string>
    <string name="normal_button">Button1 with Normal Image</string>
    <string name="patched_button">Button2 with Patched Image</string>
</resources>

5. res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/normal_button"
        android:background="@drawable/normal_button"
    />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/patched_button"
        android:background="@drawable/patched_button"
    />

</LinearLayout>

6. Get a background image

Create a new background image with a size of approximately 64 x 48 px and store it in the folder res/drawable-mdpi. The background  image used in this application is available here.


7. Apply 9-patch to the above image

On the above image, apply 9-patch. How to apply 9-patch is described in step 9. The 9-patch image used in this application is available here.


8. Run the application

Buttons with Normal Image and Patched Image

Figure 7 : Application in execution


9. Applying 9-Patch on the image

A. Open the tool draw9patch which is available in the tools directory of the Android SDK

Open draw9patch

Figure 8 : Open draw9patch

B. Open the normal image in draw9patch

Open the normal image

Figure 9 : Open the normal image

C. Set the scalable portion of the image by filling left and top border pixels with black color

Mark Scalable portion

Figure 10 : Mark Scalable portion

D. Set the content portion of the image by filling right and bottom border pixels with black color

Mark the content Portion

Figure 11 : Mark the content Portion

E. Save the file with an extension of .9.png

F. The patch file is ready now, and it can be used in the application


10. Download


11. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , ,

3 Responses to Working with 9-patch (Nine Patch) images in Android

  1. Akash Khaitan on October 8, 2012 at 11:47 am

    Thanks a lot George for a such a clear and simple demonstration on nine patch image

  2. Zubair on January 3, 2013 at 12:25 am

    Thanx
    I was going to use 9patch image for my buttons and this really helped

  3. Zoerrvivor on June 3, 2013 at 1:56 am

    nice tutorial. thanks a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner