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.
- 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”
2. Select Android build target
3. Enter application details
<?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>
<?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
9. Applying 9-Patch on the image
A. Open the tool draw9patch which is available in the tools directory of the Android SDK
B. Open the normal image in draw9patch
C. Set the scalable portion of the image by filling left and top border pixels with black color
D. Set the content portion of the image by filling right and bottom border pixels with black color
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
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 firstname.lastname@example.org.
My other blogs