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
<?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.
08/03/2011 at 23:19
wow, great work. I didn’t even know you could do this without 9-patch images!
09/03/2011 at 07:45
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.
16/03/2011 at 14:43
Great stuff, dumping my patch 9.pngs now.
works perfect
30/04/2011 at 14:37
Thank you for your work! Wheres the orange?
02/05/2011 at 14:08
That’s a good one,I’ll add orange as soon as possible!
01/05/2011 at 14:50
Such a useful post for us non-designers developing android apps – thanx.
26/08/2011 at 08:11
Grade A stuff. I’m unqusetinobaly in your debt.
02/05/2011 at 14:06
Awesome really good
07/05/2011 at 09:10
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
16/05/2011 at 19:41
very nice! thanks!!
18/05/2011 at 06:00
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
18/05/2011 at 06:03
by the way, did you ever make that post about gradient filled buttons? would be interesting to see. thanks
26/06/2011 at 15:01
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.
27/06/2011 at 10:40
Try something like this:
27/06/2011 at 14:52
That works. Thank you.
11/07/2011 at 17:31
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/07/2011 at 00:41
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.
04/08/2011 at 22:17
Wonderful! Thanks for this. Really helped me out.
12/08/2011 at 03:29
fantastic…!!! That’s what I’m trying to do. Thanks.
18/08/2011 at 14:34
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?
18/08/2011 at 14:40
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).
19/08/2011 at 14:56
19/08/2011 at 14:55
Here is an example of a red gradient background color
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/08/2011 at 14:58
I can’t post the code.. here is the paste http://pastebin.com/rS11h0gw
19/08/2011 at 15:48
gr8 job dude
thanks
Pingback: Lots of gradients for Android | Dibbus.com
18/09/2011 at 16:17
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/09/2011 at 03:23
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’).
04/10/2011 at 19:01
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?
05/10/2011 at 12:57
Thanks a lot
06/10/2011 at 19:29
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!
19/10/2011 at 17:14
How can i change styling/background color while focus or click the button.
23/10/2011 at 10:39
Check the selector element in the xml.
25/10/2011 at 17:35
Love ur work!!! Many thanks….
10/11/2011 at 15:36
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/11/2011 at 22:46
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.
22/11/2011 at 13:50
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!!
06/01/2012 at 09:47
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 ?
08/01/2012 at 02:49
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!
Pingback: きれいなグラデーションボタンを使う | eiKatouの日記
04/02/2012 at 10:24
Amazing work!! Keep it up!
08/02/2012 at 09:57
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
12/02/2012 at 18:44
Thank you! This works brilliantly