9patch images in Android

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.

GlossyImages

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>
</style>
[/code]
Thenn, just create a layout with some buttons:
[code lang=”xml”]
<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: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>
</LinearLayout>
[/code]

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="http://schemas.android.com/apk/res/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" />
</selector>
[/code]

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!

Folkert

I'm a webdeveloper, looking for the best experience, working between development and design. Just a creative programmer. When I'm getting tired of programming C#, i'd love to create 3D images in 3D Studio Max, play the guitar, create an app for Android or crush some plastics on a climbing wall or try to stay alive when i´m descending some nice white powdered snowy mountains on my snowboard.

47 thoughts to “9patch images in Android”

  1. I would have a special request if you have time, which would be great for another set of images:

    Could you adapt the current button set images so that they can be used as headers and footers in an application? With that, if you could make a set of the same buttons that would be small enough to fit within the headers, it would be perfect.

    That would be great!

    1. Yes, that’s an option. Definitions in strings.xml will work too. For better organizing, it’s better to put them in styles.xml

  2. Superb, mind blowing, only one word for this article: “Its awesome”.

    This is the great article in the sense he has created awesome 9-patch images by using 9-patch tool and also provided here for our reference.

    Great work.

      1. I also want to thank you for your articles. This great example how to use nine-path and other design features in interfaces of Android. It very helpfull for me and other programmers.

        Thank you.

  3. I got some problem with the display of text …i lost half of the text and it jump to top of the button….

    1. Please check the dark lines at the right/bottom side. Those lines indicate the space inside the image where the text can be placed.

  4. I have an error of
    [2011-09-20 11:27:32 – ImageButton02] /root/home/main/Android Linux/Android_workspace/ImageButton02/res/drawable-hdpi/simple.xml:8: error: Error: No resource found that matches the given name (at ‘drawable’ with value ‘@drawable/btn_blue_pink_glossy.9.png’).

    I have copied images in drawable folder with 9.png

    Plz, suggest me something

    1. charmee: have you checked your generated R.java to make sure that it got updated with the drawable?

  5. hello! on the issue of android rookie but seriously I really thanks for the input is great

  6. Nicely done, didn’t realize you could put styles in strings.xml, but of course, like you said, for organization purposes, it would be better to uses styles.xml.

    I also appreciate the usage of XML to style the gradients, as opposed to relying on the 9patch image. I’m going to try it out this way and see if it’s as flexible as it appears to be.

  7. I keep returning to this page to find these. I’ve found them so useful over the last month or so. I know that lots of “thanks” comments seem to go on too much, but I am really grateful that you took the time to do this for the rest of us.

  8. Thank you Thank you Thank you SOOOOOOOOOOOOOOOO MUCH!!!!!
    I sincerely appreciate for your generosity.
    It is so much help for a noob like me.

  9. Wow.. Awesome !!

    Can I use some of your button in my personal project.

    That would be Greattttttttttttt…….

  10. This is great!
    But how about android:drawable=”@drawable/button_selected” in the selector?
    Is it image or XML file?

  11. How can i adjust the buttons in top of tab bar with same boundries?
    because when i rotate mobile their size get changed. I hav 4 buttons in linear layout above list view

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.