9-patch image in android?

Android devices come in many shapes and sizes, often making it very difficult for developers to design applications that look great on all the various screen sizes and orientations. For addressing this challenge, NinePatch graphics can be indispensable. In this article, we discuss what the NinePatch graphics format is, how it works, and when to use it.

What Is NinePatch?

Android supports NinePatch Stretchable Graphics for the controlled scaling of images. NinePatch graphics are simply PNG graphics that have patches, or regions of the image, defined to scale and stretch in the appropriate areas instead of scaling the entire image as one unit, which often obscures the details of the graphic. Generally, the center patch is transparent or solid, with parts of the edges set to remain fixed, other edge parts set to stretch, and the corners set to remain fixed.

Figure 1 illustrates how an image (in this case, a square) is divided into nine patches.

When to Use NinePatch Graphics

Stretchable graphics can be used anywhere in your application where the size of the graphic may vary. They are especially useful for:

• Button backgrounds (where the text strings are various sizes)
• Frames (where the inner picture comes in various sizes and aspect ratios)
• Any time you're using a Drawable with at least one dimension set to wrap_content
  


  Using the draw9patch Application

  NinePatch stretchable graphics can be created from PNG files using the draw9patch application included with the /tools directory of the Android SDK. The interface for the Draw 9-patch tool allows you to load a PNG file, define the stretchable regions, and save the resulting graphic as a .9.png file.
  The Draw 9-patch user interface is pretty easy when you get used to it. In the left pane, you use the NinePatch guides (the lines) to define where the graphic will scale when stretched. In the right pane, you can preview how your graphic will behave when scaled with the patches you defined.
  Figure 2 shows the user interface of the draw9patch application.
  
  
  

  Creating NinePatch Graphics

  Let's give it a try. I've created a really basic PNG file called bluenotstretchy.png. To create a NinePatch graphic from this PNG file using the Draw 9-patch tool, perform the following steps:
  1. Launch Draw 9-patch.bat in your Android SDK /tools directory.
  2. Drag the PNG file into the left-hand pane (or use File -> Open NinePatch…)
  3. Click the "Show Patches" checkbox at the bottom of the left pane.
  4. Set your Patch Scale appropriately (higher to see more obvious results).
  5. To set a horizontal patch guide, click along the right edge of your graphic.
  6. To set a vertical patch guide, click along the top edge of your graphic.
  7. View the results in the right pane, and move patch guides until the graphic stretches the way you intend it. For this example, see the guides in Figure 2 for a good idea of how to place your guides.
  8. If you need to delete a patch guide, press Shift and click on the guide pixel (black).
  9. Save your graphic with the extension .9.png (e.g., blue.9.png).

  Using NinePatch Graphics

  When you've created a NinePatch graphic, you can use it like any other Drawable resource. For example, the following layout uses the same NinePatch graphic resource (@drawable/blue) four times: three times as a Button background drawable, and once as the background on the parent LinearLayout:

  <?xml version="1.0" encoding="utf-8"?>
  <ScrollView android:id="@+id/ScrollView01"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:isScrollContainer="true" android:layout_height="fill_parent"
     android:layout_width="fill_parent" android:scrollbars="horizontal">
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:background="@drawable/blue"
        android:padding="50dp">
        <Button android:id="@+id/Button01" android:layout_width="wrap_content"
           android:layout_height="wrap_content" 
           android:background="@drawable/blue"
           android:textColor="#ffcc00" 
           android:padding="30dp" android:text="CLICK HERE! "
           android:layout_gravity="center"></Button>
        <Button android:id="@+id/Button02" android:layout_width="wrap_content"
           android:layout_height="wrap_content" 
           android:background="@drawable/blue"
           android:textColor="#ffcc00" android:padding="30dp"
           android:text="NO! NO! CLICK HERE! "
           android:layout_gravity="center"></Button>
        <Button android:id="@+id/Button03" android:layout_width="wrap_content"
           android:layout_height="wrap_content" 
           android:background="@drawable/blue"
           android:textColor="#ffcc00" android:padding="30dp"
           android:layout_gravity="center"
           android:text="@string/button3text"></Button>
        </LinearLayout>
  </ScrollView>

  
  Loading NinePatch Graphic Resources Programmatically
  
  NinePatch resources are simply another kind of Drawable subclass called NinePatchDrawable. Most of the time, you'll need only the resource ID of the image, to set as an attribute of View or layout. Occasionally you might need to act on the resource programmatically.
  
  To create a NinePatchDrawable object from a NinePatch drawable resource, use the resource'sgetDrawable() method. If the drawable is a NinePatch, the getDrawable() method will return a NinePatchDrawable instead of a generic BitmapDrawable object.
  
  For example, to load a NinePatch drawable resource called blue.9.png, you could use the following code:
  
  
   
   
   
  
  
  
  import android.graphics.drawable.NinePatchDrawable;
  …
  NinePatchDrawable myNinePatchDrawable = (NinePatchDrawable) getResources().getDrawable(R.drawable.blue);
  
  You can then use the NinePatchDrawable object much as you would any BitmapDrawable.
  
  Conclusion
  
  NinePatch graphics are one of the most important tricks of the trade for the Android graphic designer. Using stretchable graphics can reduce Android package size by reducing the number of drawable resources required by an application. NinePatch graphics are an easy way to enable smart stretchable graphics in your applications.