Dibbus.com

Where design meets development

9patch

9patch images in Android

| 34 Comments

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:

<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>

Thenn, just create a layout with some buttons:

<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>

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:

<?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>

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!

Author: 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.

34 Comments

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

  2. 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. These are sweet. Might you have a yellow version of both the matte and glossy?

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

    • 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. 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. Thank you for sharing these great buttons!

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

    • 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. 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.

  9. 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

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

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

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

  12. Wow!! it was helpfull..Thankyou.

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

  14. Thanks! – nice and clean!

  15. Awesome! Thanks so much for sharing these!

  16. Thank you.

  17. 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.

  18. 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.

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

  20. Pingback: More buttons? | Dibbus.com

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

  22. Wow.. Awesome !!

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

    That would be Greattttttttttttt…….

Leave a Reply

Required fields are marked *.


Page optimized by WP Minify WordPress Plugin