Beginner’s Guide on using Nine Patch

When building Android apps, we use resource images with different densities – HDPI, MDPI, LDPI etc. But this soon gets tedious and hard to manage – and that’s where 9 patch images can help us.

Using the 9 Patch image library – we can include only one image ( the smallest one ) and the device will stretch it according to it’s need. 

Creating Nine Patch Images : 

  • Open terminal, go to Android Home Directory (the location where you unzipped the Android SDK) /Sdk/tools and execute command ./draw9patch to launch the nine patch tool.
  • qice@qice:~$ cd /home/qice/Android/Sdk/tools/
    qice@qice:~/Android/Sdk/tools$ ./draw9patch
  • Drag your PNG image into draw9patch window (Or select File > Open 9-patch to locate the file). Your workplace will now open.
  • The left pane is your drawing area, in which you can edit the lines for the stretchable patches. The right pane is preview area, where you can preview different shapes of stretched image.
  • Click within the 1 pixel perimeter to draw stretchable patches.Black lines on left and top of the image shows stretchable patch.Black lines on right and bottom of the image shows fillable area (which is optional).
    Here, Pink color shows a stretchable patch and Purple color in preview area shows fillable area. You can have as many stretchable sections as you want.
  • Now save your image, select File > save 9-patch
  • The image will be saved with extension .9.png

Using the 9 Patch Image : 

With the 9 Patch image that we just created, we could use it anywhere – and the advantage is the image will scale itself to adjust to the content inside.

9 patch-bg

For ex :  The image you see – the background is generated by the image that we just created. Note how it scales to fit different type of content.

<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin">

	<TextView
   	android:id="@+id/textView1"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Text"
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<TextView
   	android:id="@+id/textView2"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Some large text"
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<TextView
   	android:id="@+id/textView3"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Bigger text. It gets stretch vertically as well as horizontally. See this background."
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<ImageView
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:padding="10dp"
   	android:src="@drawable/orange_bag" />

</LinearLayout>

Pros of using 9 Patch : 

  • Reduces the app memory usage, as well as the entire size of APK.
  • Custom Backgrounds are now easy to make, without worrying about supporting a whole lot of device resolutions.