Gradient buttons for android

Just some other stuff to share with you, no 3D, no Umbraco bust some new gradient buttons for Android.

Capture
Yes I’m into android now, and I just love it. Really fun programming for Android. Because I really like a nice layout here are, for a start some nice button layouts. Use them for a better layout and replace those gray android buttons.
I’ve used two color gradients. The sdk permits a third color, I’ll use a third color maybe in a next post. For the colors I just took 2 colors,not too much differ from each other. Take your own colors if you like.

Blue button

Red button

Purple button

Green button

Yellowbutton

Blackbutton

All text on the buttons will have the same styleso we can define a style in strings.xml:

Together you’ll have a nice collection of nice buttons:
Source code of an activity layout:

Just for this post I’ve used normal colors. In a standard application you’ll define these colors in the string.xml as a color.

TIP: last but not least, read also this post from Kris, a great developer about this topic! If you have any questions from above, the post from Kris will surely answer it.

If you want to see all those buttons in action, I’ve created a demo app with all kinds of buttons and an option to create xml for a button of your choise.

Get it on Google Play

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.

114 thoughts to “Gradient buttons for android”

  1. You do have a lot of options, you can add a middle color to the gradient if you like. But a true ‘glass’ look is not possible because of the hard edges on the middle. You have to use a 9-patch image. However, looking at the Android overall design, there is hardly no glass look noticeable. The glass look fits more in a iPhone-isch environment.

        1. 2018 where is the fucking orange button ? xD

          its a joke man, thank you? hope you’re alive

  2. Really helpful stuff, I used to work the gradients out with the help of PS, but through coding I was little confused on how those different values map to the actual pic, but this post solved my issues. Thanks

  3. i have to commend you sharing your code to make it easy for android developers to create colored buttons without the use of images. i find that a big hassle when all i wanted was to change the background color

    i will write a post about your work

  4. Very useful information. Thank you. Is it possible to change the background color dynamically? e.g. start with black background color, when the button is touched, change the background color to blue. In the listener code, I tried something like this:

    acButton = (Button) findViewById(R.id.environ_ac);
    Drawable d = Drawable.createFromPath(“/mnt/sdcard/Deployment/blue_button.xml”);
    acButton.setBackgroundDrawable(d);

    but it didn’t work. Hope you can shed some light.

    1. Try something like this:
      [code lang=”java”]
      acButton = (Button) findViewById(R.id.environ_ac);
      acButton.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.blue_button));
      [/code]

  5. Wow, thanks for the great examples!

    Good Android designer UI resources are rare. Definitively bookmarked, hope we’ll get more of this good stuff 🙂

  6. Hi, thank you for this great tip.

    I am new to Android development and am slowly building up an application, but I am relying on good articles at the moment to build my knowledge.

  7. I added the following to the top of each button file so you get a grayed disabled look.

    This MUST be the first definition as Android uses them in order found in the file. I also added the following to my res\color directory:

    In a file called button_colors.xml

    Finally I added the following to my “ButtonText” style

    @color/button_colors

    All of this will give a gray button with grayed out text when the button is disabled.

  8. Hi!
    Thank you very much for this awesome post and code-sharing.

    I have one question I hope you might be able to help me with.
    I’m total newbie when it comes to xml and have spendt hours of work trying to get the xml-mojo.

    My task is to make buttons like the one you have, but using layer-list. I want to be able to set the color at just one place and put some transparent layers on white and black gradients on depending on the state of the button (pressed, enabled etc.). I just can’t get my head around this.. do you have any suggestions?

    1. I am not really sure what you mean with layer-list. But if you want transparency in your gradients, you can try to use the Alpha Channel in the color defnition. For example #44000000 (this is a semi-transparent black color, the first two digits are the alpha channel and indicate the transparency of the color).

  9. Here is an example of a red gradient background color
    [code lang=”xml”]
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <item>
    <shape >
    <solid android:color="#FF0000"/>
    <corners android:radius="10dp"/>
    <stroke
    android:width="1dp"
    android:color="#C50000" />
    </shape>
    </item>

    <item>
    <shape >
    <gradient
    android:startColor="#00000000"
    android:endColor="#4A000000"
    android:angle="315"
    />
    <corners android:radius="10dp"/>
    </shape>

    </item>

    <item>
    <shape>
    <gradient
    android:startColor="#1EFFFFFF"
    android:centerColor="#00FFFFFF"
    android:endColor="#00FFFFFF"
    android:angle="180"
    />
    <corners android:radius="10dp"/>
    </shape>
    </item>
    </layer-list>
    [/code]
    With this code I only need to change the top solid color (#FF0000) and the gradient is applied in the other layers – so its easy to make gradient backgrounds with other colors because the code only needs to change one color number.
    This work fine if I’m only setting an background color that doesn’t need to do anything fancy on press. But a Button has to change the gradient layer dependent on its state.

    Do you think it’s possible to make a gradient botton code that only needs to have the base-color set at one place by using some kind of layer?

    (if you could e-mail me if you choose to reply then I would be thankful)

  10. Thanks for the great writeup. This makes a great addition to my library of reusable code for Android. I’m always a fan of something that’s reusable rather than a one-off XML file for every single button!

    These gradient selectors also work well for image buttons, since they’re the background and can co-exist with a png with transparency as the foreground (‘src’).

  11. I’m getting just the normal button, but without and borders (so it actually looks like just text). What could I be missing? My code is android:minSdkVersion=”3″, could this have something to do?

  12. Many Thanks …
    I just have one question,

    is it possible to add a backgound image aslo.. I just would like to add one of those nice image put the button need to display a fixed image in all the states,

  13. Epic!

    Lifted the GUI on my App bigtime 🙂 For all android noobs out there (like myself), just create a xml file under res/drawable in the project. Like btn_blue.xml and so on.

  14. Dear! Folkert
    Please tell me why Im not able to make a gradient button in 4.0 API as in earlier & how to use these codes which are given up i.e Do I have to create a new xml file
    Where do I save that file and how to and in main activity

    Sorry If you feel it ugly because Im a new to this world of programming !!! So I need your help descriptively Thanks!!

  15. Thanks for this wonderful example.
    I just have a little different requirement – I need gradient background color button but I want to set the startcolor & endcolor programamtically. Is that possible ? How do I get that ?

  16. This is good stuff! Definitely helped me. Thanks. I read your other post about using 9 patch images and read the part about Apple. I thought it was spot on about what I always thought about their products! Keep those tutorials coming!

  17. Hi,

    Thank you for sharing this but it is strange that when I use this I am not able to set the layout margin left, top and bottom there is no impact of it even if i set it.

    Do you have any idea ?

    Thanks,
    Saurabh

  18. Great tutorial. Is there any way you could put together a similar tutorial for spinners that would use a similar gradient image for the background?

  19. I am trying to use the black button in my app, but am not sure exactly how to make it work. Do I just copy the text into my manifest file? I don’t understand how you are linking the buttons you make with the @drawable in the regular xml file.
    Thanks!

  20. Really nice ! Get it !

    But I just wondering if I can use styled text button depending on button state. ie having text color gray when button is disabled.

  21. i’m the beginner to learn android. can i know where to save the color buttons ? meaning that RED button, yellow button save in separate file ? in what extension ? and how to save the styles in strings.xml ?
    Thanks ..

  22. Awesome job!
    Thanks a bunch, you should put a link to your paypal here so people could donate to you =)

  23. How can I incorporate a gradient into a Button tag. Your tutorial is good but doesn’t accommodate for other attributes?

  24. Hi! really great work. I am also a c# developer who wanted to learn android. I’m glad you’ve gotten so well at android development. I’m still a beginner.

  25. Hi, Thanks for your post. I am very new to Android and just started learning. I have a basic question – where do copy the “Blue button” code? I am confused – I am sorry for this basic question.

  26. This post really use ful for me.. please post any new Information………………………
    I love my Android

  27. Lol … I am in love with you 😀
    Where design meets development … can’t get more apt than this 😀

  28. It’s not very clear where every XML piece of code should go…..
    Do I need to create new XML files? everything goes into strings.xml?

  29. This post really use full for me..
    please post any new updates..
    im Eagerly Waiting..

    Love ya..

  30. “Gradient buttons for android | Dibbus.com” was
    a splendid posting, cannot help but wait to examine a lot more of ur blog
    posts. Time to spend some time on the web haha. Thanks for the post ,Lincoln

  31. Great job! Really no other tutorials about this out there.

    I have two questions:
    (1) Where is the button id? How do I get it from R.*?
    (2) How do I create designs for other button states than android:state_pressed=”true”? It looks like, as written, the 2nd shape, with the gradient, is not associated with the state.

    Thanks!

  32. You are a really persuasive writer. I can see this in your writeup. You’ve a way of writing compelling info that sparks significantly interest. fkkfdbcecfga

  33. Hi
    Thank you very much for the article.
    I am having a problem however, when I increase the corner radius. The outline i.e. stroke remains rectangular and the button remains with round corners, It looks like button is enclosed in rectange.

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.