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

108 thoughts on “Gradient buttons for android”

  1. Jarrette says:

    wow, great work. I didn’t even know you could do this without 9-patch images!

  2. Folkert says:

    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.

  3. Bojan says:

    Great stuff, dumping my patch 9.pngs now. :) works perfect

  4. Ryan says:

    Thank you for your work! Wheres the orange?

    1. Folkert says:

      That’s a good one,I’ll add orange as soon as possible!

      1. Waseem says:

        You never did add it :p

  5. Arik says:

    Such a useful post for us non-designers developing android apps – thanx.

    1. Sherlyn says:

      Grade A stuff. I’m unqusetinobaly in your debt.

  6. Kishore says:

    Awesome really good

  7. John Mabassa says:

    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

  8. Tobias L. says:

    very nice! thanks!!

  9. tech says:

    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

  10. tech says:

    by the way, did you ever make that post about gradient filled buttons? would be interesting to see. thanks

  11. nautilus says:

    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. Folkert says:

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

      1. nautilus says:

        That works. Thank you.

  12. Bachi says:

    Wow, thanks for the great examples!

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

  13. Justin Phillips says:

    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.

  14. SR says:

    Wonderful! Thanks for this. Really helped me out.

  15. ppshein says:

    fantastic…!!! That’s what I’m trying to do. Thanks.

  16. Kevin Peck says:

    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.

  17. Norfeldt says:

    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. Folkert says:

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

  18. Norfeldt says:

    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)

  19. Norfeldt says:

    I can’t post the code.. here is the paste http://pastebin.com/rS11h0gw

  20. sadegh says:

    gr8 job dude ;) thanks

  21. Pingback: Lots of gradients for Android | Dibbus.com
  22. Trackback: Lots of gradients for Android | Dibbus.com
  23. miha says:

    For Spinner I remembered I can use custom dropdown with ArrayAdapter subclass http://android-er.blogspot.com/2010/12/custom-arrayadapter-for-spinner-with.html

    Still don’t know what to do with ToggleButton.

  24. ProjectJourneyman says:

    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’).

  25. Sandy says:

    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?

  26. Ravi says:

    Thanks a lot

  27. Rob says:

    I’m trying to follow this tutorial but its not working. I’ve posted a longer description here: http://stackoverflow.com/questions/7657037/drawable-resource-not-displaying-with-button

    Any ideas? Thanks!

  28. Pankaj says:

    How can i change styling/background color while focus or click the button.

    1. Folkert says:

      Check the selector element in the xml.

  29. Ashish says:

    Love ur work!!! Many thanks….

  30. Ahmed says:

    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,

  31. Ludvig says:

    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.

  32. Arshad Ali Soomro says:

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

  33. ed says:

    Thanks for the tutorial.. one question I’ve raised out of this on stack overflow is that it doesn’t appear to work when applying a buttonStyle to a theme.

    http://bit.ly/sBwHTP

  34. Trupti says:

    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 ?

  35. Praneet says:

    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!

  36. Pingback: きれいなグラデーションボタンを使う | eiKatouの日記
  37. Trackback: きれいなグラデーションボタンを使う | eiKatouの日記
  38. JuJu Cool says:

    Amazing work!! Keep it up!

  39. Saurabh says:

    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

  40. atc says:

    Thank you! This works brilliantly :)

  41. Chris Ondrovic says:

    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?

  42. coolbeans says:

    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!

  43. Luca Stucchi says:

    Brilliant ! Thanks ! Simple and clear !

  44. foggy says:

    Cool buttons! Got anything similar for spinners? :)

  45. Pingback: Android: Introduction to a simple calculator » cloud101
  46. Trackback: Android: Introduction to a simple calculator » cloud101
  47. exae says:

    Great and easy !

  48. glob says:

    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.

  49. Naresh says:

    Great Work….. It works the way I want….
    Thank U…!!!

  50. Laysa says:

    Very useful! Thank you!

  51. derek says:

    it’s really fancy color , i like it so much!

  52. Pingback: AMS Part 4: Placing and Customizing Buttons | Super Mekanismo
  53. Trackback: AMS Part 4: Placing and Customizing Buttons | Super Mekanismo
  54. july says:

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

  55. Pratik says:

    very very nice yar
    Thank you

  56. Ozgur says:

    Thank you Folkert. Really great buttons for me. I will use yellow button. Thanks.

  57. Pingback: Fancy Gradient Buttons for Android | Technical Notes
  58. Trackback: Fancy Gradient Buttons for Android | Technical Notes
  59. Felipe Archangelo says:

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

  60. Leandro Simões says:

    Great work! This’s help me a lot.
    Thanks!

  61. Ido Sofi says:

    Great job dude!

  62. Pingback: MySQL Android App | Dave Umrysh
  63. Trackback: MySQL Android App | Dave Umrysh
  64. Daniel says:

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

  65. Noha says:

    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.

  66. Anudeep says:

    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.

  67. Prakash says:

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

  68. Suhas says:

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

  69. Nizzy says:

    where is the android:background=”@drawable/btn_red”?

    I can’t find the drawables.

  70. Pingback: More buttons? | Dibbus.com
  71. Trackback: More buttons? | Dibbus.com
  72. Frank says:

    In witch xml-file commes the items?
    Also there all (the collors) don’t have a id. How you call them?

  73. qdb says:

    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?

  74. Tobias Manthey says:

    Thanks man!

  75. Pingback: Contador de Passos usando a plataforma Android SDK « ismaiasmoreira
  76. Trackback: Contador de Passos usando a plataforma Android SDK « ismaiasmoreira
  77. blog reader says:

    Hello. Excellent guide. Thank you

  78. Balaji says:

    Awesome Stuff , thanks a lot.

  79. Arise Peter says:

    Thank you very much. now I have a stylish gradient blue button.

  80. Babu says:

    Excellent work..!!!

  81. Daniel says:

    Amazing. Thanks for sharing! Will be reading more of your blog for design tibits!

  82. annadurai says:

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

    Love ya..

  83. Thiago says:

    great!

  84. appdoll says:

    great post, but where can I get the full code?

  85. Raul says:

    Thanks! You gave me new ideas to do my work. Thanks.

  86. Roberto says:

    And the orange one?

    1. Roberto says:

      Ok, I saw yellow is the orange one…

  87. Yene says:

    Cool blog,

  88. Ahmed Gawad says:

    Very Good , and helpful
    Thank you

  89. Keith says:

    Great work here. Thanks for providing this

  90. Heather says:

    “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

  91. Pingback: Clickable effect for a Button | Programmers Universe
  92. Trackback: Clickable effect for a Button | Programmers Universe
  93. harga terbaru says:

    awesome tutorial,thx!

  94. w.pasman says:

    Great, saved me a lot of time, thanks!

  95. Miguel Rodríguez says:

    Gracias (y)

  96. Dea Vendi says:

    Thank you, wanna use this button in my app. .

  97. prakriti says:

    worked really nice! thank you!

  98. George Wilde says:

    I love you!
    (Pls mean it right.)

  99. CAV says:

    Wow, this really helped me out a lot when designing apps.

    Thanks for sharing =)

  100. Dickson Owuor says:

    Thanks, found this very helpful.

  101. magasin louboutin homme paris says:

    Thanks for finally talking about >Gradient buttons for android
    | Dibbus.com <Liked it!

    magasin louboutin homme paris

  102. Pingback: Blog ecerpa.com | Aplicando un poco de estilo a nuestras Apps Android
  103. Trackback: Blog ecerpa.com | Aplicando un poco de estilo a nuestras Apps Android
  104. güncel film paylaşımları says:

    I read this post fully about the resemblance of most recent
    and previous technologies, it’s remarkable article.

  105. Ariel Balter says:

    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!

  106. Johnf231 says:

    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

  107. behzad says:

    WwoowW very nice

  108. Pingback: How To Make A Decent Looking App, Lessons Learned Making Android Apps As A Side Project - rm core
  109. Trackback: How To Make A Decent Looking App, Lessons Learned Making Android Apps As A Side Project - rm core
  110. Mukund says:

    Wow…simple code with best output

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