Dibbus.com

Where design meets development

Gradient buttons for android

| 69 Comments

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#449def" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#449def"
                android:endColor="#2f6699"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Red button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Purple button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#a276eb" />
            <stroke
                android:width="1dp"
                android:color="#6a3ab2" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#a276eb"
                android:endColor="#6a3ab2"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#6a3ab2" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Green button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#70c656" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Yellowbutton

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#f3ae1b" />
            <stroke
                android:width="1dp"
                android:color="#bb6008" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f3ae1b"
                android:endColor="#bb6008"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#bb6008" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Blackbutton

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#343434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#343434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

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

<style name="ButtonText">
    <item name="android:layout_width">fill_parent</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:textStyle">bold</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>
</style>

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

<?xml version="1.0" encoding="utf-8"?>
<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" android:background="@drawable/btn_red" style="@style/ButtonText"></Button>
   <Button android:text="Button" android:id="@+id/button2" android:background="@drawable/btn_blue" style="@style/ButtonText"></Button>
   <Button android:text="Button" android:id="@+id/button3" android:background="@drawable/btn_purple" style="@style/ButtonText"></Button>
   <Button android:text="Button" android:id="@+id/button4" android:background="@drawable/btn_green" style="@style/ButtonText"></Button>
   <Button android:text="Button" android:id="@+id/button5" android:background="@drawable/btn_orange" style="@style/ButtonText"></Button>
   <Button android:text="Button" android:id="@+id/button6" android:background="@drawable/btn_black" style="@style/ButtonText"></Button>
</LinearLayout>

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

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.

69 Comments

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

  2. 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. Great stuff, dumping my patch 9.pngs now. :) works perfect

  4. Thank you for your work! Wheres the orange?

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

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

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

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

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

  10. Wow, thanks for the great examples!

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

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

  12. Wonderful! Thanks for this. Really helped me out.

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

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

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

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

  16. Here is an example of a red gradient background color

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

    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)

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

  18. Pingback: Lots of gradients for Android | Dibbus.com

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

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

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

  22. Thanks a lot

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

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

  25. Love ur work!!! Many thanks….

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

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

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

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

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

  31. Pingback: きれいなグラデーションボタンを使う | eiKatouの日記

  32. Amazing work!! Keep it up!

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

  34. Thank you! This works brilliantly :)

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

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

  37. Brilliant ! Thanks ! Simple and clear !

  38. Cool buttons! Got anything similar for spinners? :)

  39. Pingback: Android: Introduction to a simple calculator » cloud101

  40. Great and easy !

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

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

  43. Very useful! Thank you!

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

  45. Pingback: AMS Part 4: Placing and Customizing Buttons | Super Mekanismo

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

  47. very very nice yar
    Thank you

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

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

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

  51. Great job dude!

  52. Pingback: MySQL Android App | Dave Umrysh

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

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

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

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

  57. Pingback: More buttons? | Dibbus.com

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

Leave a Reply

Required fields are marked *.

*


Page optimized by WP Minify WordPress Plugin