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!

46 thoughts on “9patch images in Android”

  1. Marc-Andre Moreau says:

    Thank you so much!!! those buttons are awesome :)

  2. Marc-Andre Moreau says:

    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!

  3. Baron Hall says:

    These are sweet. Might you have a yellow version of both the matte and glossy?

  4. Djiko says:

    Nice post but shouldn’t the ButtonText style be created in styles.xml (instead of strings.xml) ?

    1. Folkert says:

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

  5. TechnoTalkative says:

    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.

  6. eric says:

    Thank you for sharing these great buttons!

    1. Folkert says:

      Thanks!

      1. Dmitriy says:

        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.

        1. Folkert says:

          I am glad I could help!

  7. Srividya says:

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

    1. Folkert says:

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

  8. Richard says:

    Folkert, Great example again!

    Please allow me to share 500+ free 9-patch images on my blog: http://android9patch.blogspot.com/
    I also have an android viewer to browse and test the 9-patch: http://market.android.com/details?id=com.android9patch.viewer

    You and your readers can freely use those for any android projects, including commercial apps. Royaltee free!

    Enjoy!

    Richard.

    1. Folkert says:

      Looks impressive! My latest example isn’t using gradient images anymore but code gradients which gives you every possible gradient you like.

    2. Ajay says:

      Awesome !!

      Thanks for sharing the links..

  9. charmee says:

    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. Igor G. says:

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

  10. karthick says:

    Thank you brother for sharing nice atrical,,,,,

  11. Ruben says:

    Great!!

  12. Alegrandra says:

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

  13. shishir says:

    Wow!! it was helpfull..Thankyou.

  14. jakobiyem says:

    i want to say thank you.. images are pretty glossy =)

  15. Warren says:

    Thanks! – nice and clean!

  16. Jeff says:

    Awesome! Thanks so much for sharing these!

  17. TipTopJat says:

    Thank you.

  18. Waseem says:

    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.

  19. Francis Fish (@fjfish) says:

    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.

  20. Won Kook says:

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

  21. Pingback: More buttons? | Dibbus.com
  22. Trackback: More buttons? | Dibbus.com
  23. Shikha says:

    Nice Tutorial!! I love it!!..and also used it..lol

  24. Ajay says:

    Wow.. Awesome !!

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

    That would be Greattttttttttttt…….

    1. Folkert says:

      Please feel free to use these buttons.

      1. Ajay says:

        Thanks.. dude..

  25. James says:

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

  26. Mohit Soni says:

    Cool buttons! it is Awesome.

  27. Ketan says:

    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

  28. Freddy Rose says:

    Thank you.

    I have been looking for basic info on how to do this for hours.

    Peace

  29. jane says:

    Thank you for your 9patch resources!

  30. rafiq says:

    Great work!!! Really helped a lot

  31. Vinu says:

    Thank You so much for the buttons and the tutorial.. really helpful…. Best Wishes!

  32. vignesh says:

    Thank you so much.
    I couldn’t find any post like this.

  33. Pingback: 9path Button Resource | De 7 Quinn
  34. Trackback: 9path Button Resource | De 7 Quinn
  35. ifthi says:

    hhhh
    …… just use it and make tons of money with it!
    Nice.

  36. Md. Walid Islam says:

    Nice one…

  37. Nilesh says:

    Thnk You so much…………

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">