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

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.

Figure 1 : Normal image

Figure 2 : 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”

Figure 4 : New Android Project

2. Select Android build target

Figure 5: Select Androd Built Target

3. 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

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

Figure 8 : Open draw9patch

B. Open the normal image in draw9patch

Figure 9 : Open the normal image

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

Figure 10 : Mark Scalable portion

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

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

NinePatchDemo 159.85 KB

Download Full Source Code

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: 9-patch, draw9patch, themes