Gradient buttons for android

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

Blue button

XHTML

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

Redbutton

XHTML

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

Purple button

XHTML

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

Green button

XHTML

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

Yellow button

XHTML

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

Black button

XHTML

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:

strings.xml

XHTML

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:

About The Author

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.

101 Comments

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.

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

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

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.

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

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

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

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

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!

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

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.

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.