Using and creating 9-patch images is actually quit simple. Just keep in mind which area is stretched and which area will be repeated. Because I couldn’t find any resources ofor this topic I’ve created some 9 patch images myself. Use it for your own projects. No, I don’t use any licence for this, just use it and make tons of money with it!

I’ve created two sets of images:

  1. Matte images, best for android and stretchable buttons.
  2. Glossy images, use this when there is just a single line of text.

Matte images

Here some matte images, stretched to full width.

Used images:

These are the original images used to create the screenshot. Right click, save as etc…
Make sureto save the images with a filename.9.png name. Otherwise it won’t work.


Used images:

How to use these images?

Well, that’s quit simple,just drop these images in a drawable folder of your project and set it as a background of a button. I’ve put all these images in the drawable-hdpi folder. Created a button style in strings.xml like:
[code lang=”xml”]
<style name="ButtonText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#ffffff</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">3dp</item>
<item name="android:textSize">30dp</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">2</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
Thenn, just create a layout with some buttons:
[code lang=”xml”]
<LinearLayout xmlns:android=""
android:layout_width="fill_parent" android:layout_height="fill_parent"
<Button android:text="Button" android:id="@+id/button1" style="@style/ButtonText" android:background="@drawable/btn_army_glossy"></Button>
<Button android:text="Button" android:id="@+id/button2" style="@style/ButtonText" android:background="@drawable/btn_blue_glossy"></Button>
<Button android:text="Button" android:id="@+id/button3" style="@style/ButtonText" android:background="@drawable/btn_blue_pink_glossy"></Button>
<Button android:text="Button" android:id="@+id/button4" style="@style/ButtonText" android:background="@drawable/btn_green_glossy"></Button>
<Button android:text="Button" android:id="@+id/button5" style="@style/ButtonText" android:background="@drawable/btn_lightblue_glossy"></Button>
<Button android:text="Button" android:id="@+id/button6" style="@style/ButtonText" android:background="@drawable/btn_pink_glossy"></Button>

Ofcourse it is possible to setup a more rubust environment where a button will have multiple states. Therefore we need a selector file which is just a simple xml file stored in the drawablefolder. Just call it btn_blue_states.xml or something like that. This file will contain state definitions of the buttons:
[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/button_selected" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/btn_blue_glossy" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/btn_blue_pink_glossy" />
<item android:drawable="@drawable/btn_blue_glossy" />

Now, use the file name as a background for a button and you can use multiple states for a button while using 9-patch images!