Android Colored Gradient Buttons Using XML

Now, this is more like it. After so many searching, I stumbled upon Folkert’s code wherein he was able to create gradient buttons in Android using just XML. That’s right! XML! I never liked having to create a colored button in Android using a 9 patch image. It is a hassle.

No matter what other developers say how easy it is to create a 9 patch image, doing it in XML is better. It is just a matter of copy-paste right? The sample codes for these gradient buttons contain only two color gradients.

The Android SDK permits a third color but for these XML codes, Folkert used only 2 colors. Now, it’s bye bye to those dull gray default Android buttons.

Here are the XML codes:
Blue

Red

Purple

Yellow

Black

All these buttons have the same text style so define a style in strings.xml:

And use it like this

Related Posts Plugin for WordPress, Blogger...

23 comments

  1. Hi, this was extremly helpful today, thank you so much.
    I have a question though, when I set my button’s to use android:background=”@drawable/btn_red” they get smaller in height, even tough they still use the same layout-height. Should I change their height using dp? Or is there some other way around it?

  2. @Emanuel: do +1 the post ;). im not sure about your question because in my case the button’s height never got smaller.

    but if you want to physically alter the button’s height, you can modify android:layout_height in the button tag

  3. I’m new to XML so could you tell me how to use these XML codes πŸ™‚ Where should I put it in my project πŸ™‚

    Thank you very much πŸ™‚

  4. anyone answer my question, please πŸ™ or could you send me the source code of this above project πŸ™ thanks in advance πŸ™‚

  5. you need to create a color folder under the res folder, then copy(then make btn_blue.xml or what ever color you want) or download the text and place it in that folder ( you will need to “clean” if you download it, then reference it like this

    mines looks like this

    hope this helps

  6. Hey there, there is a tiny error in this article:

    ‘All these buttons have the same text style so define a style in strings.xml:’

    Should be styles.xml instead of strings.xml, although you could define a style in the strings.xml resources file, you’re still referencing the style by using @style.

  7. I second Emmy…I wanted orange. Guess I’ll go play wit a color picker now. Thanks so much for the post. Didn’t want to learn patch 9 for my first android app

    1. @anthony, @emmy: none. but as @anthony pointed out, you can play around with the color picker and get the corresponding html value then pick another lighter orange related color and use that as the value for endColor

  8. I thought of this, but my XML skill is not very good, so i could not do it without compilation error.
    Thanks for saving my day. πŸ™‚

    A question: XML and 9.patch png, which one will be rendered faster?

  9. Thanks for the article – it was really helpful. It’s recommended to use sp instead of dp for android:textSize in the styles by the way. For any beginner, I could also add that those XML files should be in the drawable folder πŸ™‚

    1. @emil: yes you are right. I recently found out that sp works better and without headaches when you want to work on different screen sizes

Leave a Reply

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