September 23, 2018
Hot Topics:

Working with NinePatch Stretchable Graphics in Android, Page 2

  • June 22, 2010
  • By Lauren Darcey, Shane Conder
  • Send Email »
  • More Articles »

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"
   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"
      <Button android:id="@+id/Button01" android:layout_width="wrap_content"
         android:padding="30dp" android:text="CLICK HERE! "
      <Button android:id="@+id/Button02" android:layout_width="wrap_content"
         android:textColor="#ffcc00" android:padding="30dp"
         android:text="NO! NO! CLICK HERE! "
      <Button android:id="@+id/Button03" android:layout_width="wrap_content"
         android:textColor="#ffcc00" android:padding="30dp"

You can then create different AVDs (Android Virtual Devices) to emulate different screen sizes and run your application.

Figure 3 shows what this layout would look like with several different screens and orientations.

Click here for larger image Click here for larger image Click here for larger image

Figure 3. Application Layout with Different Screens and Orientations

Figure 4 shows the same application, except using the original non-stretchy version of the blue graphic.

Click here for larger image Click here for larger image Click here for larger image

Figure 4. Application Layout with Non-stretchy Blue Graphic

Note: On the landscape mode screens, you can scroll down to see that the stretchable graphic is complete.

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's getDrawable() 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.


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.

About the Authors

Lauren Darcey and Shane Conder have coauthored two books on Android development: an in-depth programming book entitled "Android Wireless Application Development" (ISBN-13: 978-0-321-62709-4) and "Sams Teach Yourself Android Application Development in 24 Hours" (ISBN-13: 978-0-321-67335-0). When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at androidwirelessdev+dc@gmail.com and via their blog at http://androidbook.blogspot.com.

Originally published on https://www.developer.com.

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.


Thanks for your registration, follow us on our social networks to keep up-to-date