Just some other stuff to share with you, no 3D, no Umbraco bust some new gradient buttons for Android.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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:
|
1 2 3 4 5 6 7 8 9 10 |
<?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.
wow, great work. I didn’t even know you could do this without 9-patch images!
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.
Great stuff, dumping my patch 9.pngs now. 🙂 works perfect
Thank you for your work! Wheres the orange?
That’s a good one,I’ll add orange as soon as possible!
You never did add it :p
Such a useful post for us non-designers developing android apps – thanx.
Grade A stuff. I’m unqusetinobaly in your debt.
Awesome really good
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
very nice! thanks!!
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
by the way, did you ever make that post about gradient filled buttons? would be interesting to see. thanks
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.
Try something like this:
[code lang=”java”]
acButton = (Button) findViewById(R.id.environ_ac);
acButton.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.blue_button));
[/code]
That works. Thank you.
Wow, thanks for the great examples!
Good Android designer UI resources are rare. Definitively bookmarked, hope we’ll get more of this good stuff 🙂
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.
Wonderful! Thanks for this. Really helped me out.
fantastic…!!! That’s what I’m trying to do. Thanks.
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.
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).
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">
<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)
I can’t post the code.. here is the paste http://pastebin.com/rS11h0gw
gr8 job dude 😉 thanks
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.
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’).
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?
Thanks a lot
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!
How can i change styling/background color while focus or click the button.
Check the selector element in the xml.
Love ur work!!! Many thanks….
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,
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.
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!!
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
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 ?
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!
Amazing work!! Keep it up!
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
Thank you! This works brilliantly 🙂
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?
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!
Brilliant ! Thanks ! Simple and clear !
Cool buttons! Got anything similar for spinners? 🙂
Great and easy !
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.
Great Work….. It works the way I want….
Thank U…!!!
Very useful! Thank you!
it’s really fancy color , i like it so much!
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 ..
very very nice yar
Thank you
Thank you Folkert. Really great buttons for me. I will use yellow button. Thanks.
Awesome job!
Thanks a bunch, you should put a link to your paypal here so people could donate to you =)
Great work! This’s help me a lot.
Thanks!
Great job dude!
How can I incorporate a gradient into a Button tag. Your tutorial is good but doesn’t accommodate for other attributes?
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.
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.
This post really use ful for me.. please post any new Information………………………
I love my Android
Lol … I am in love with you 😀
Where design meets development … can’t get more apt than this 😀
where is the android:background=”@drawable/btn_red”?
I can’t find the drawables.
In witch xml-file commes the items?
Also there all (the collors) don’t have a id. How you call them?
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?
Thanks man!
Hello. Excellent guide. Thank you
Awesome Stuff , thanks a lot.
Thank you very much. now I have a stylish gradient blue button.
Excellent work..!!!
Amazing. Thanks for sharing! Will be reading more of your blog for design tibits!
This post really use full for me..
please post any new updates..
im Eagerly Waiting..
Love ya..
great!
great post, but where can I get the full code?
Thanks! You gave me new ideas to do my work. Thanks.
And the orange one?
Ok, I saw yellow is the orange one…
Cool blog,
Very Good , and helpful
Thank you
Great work here. Thanks for providing this
“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
awesome tutorial,thx!
Great, saved me a lot of time, thanks!
Gracias (y)
Thank you, wanna use this button in my app. .
worked really nice! thank you!
I love you!
(Pls mean it right.)
Wow, this really helped me out a lot when designing apps.
Thanks for sharing =)
Thanks, found this very helpful.
Thanks for finally talking about >Gradient buttons for android
| Dibbus.com <Liked it!
magasin louboutin homme paris
I read this post fully about the resemblance of most recent
and previous technologies, it’s remarkable article.
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!
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
WwoowW very nice
Wow…simple code with best output
What is license for this code? Can we use this in our app?
You can use it in your own app!
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.
Nice Tutorial