Android tip #026 – Create nice buttons with XML

Platform/Language: XML/Android

Description: We can create nice buttons simply using few colors and gradients. We need to create a Selector resource and attach all the shape items for every state: pressed, focussed, disabled and normal. In the most common cases, focussed and normal could show the same result. In the case of pressed and normal, we will invert the colors. And in the case of disabled, we will use other colors (like a gray color).

Result

Custom nice button

Code:

colors.xml in /values/

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="NiceButtonStartColor">#4AA02C</color>
<color name="NiceButtonEndColor">#348017</color>
<color name="NiceButtonDisabledStartColor">#565051</color>
<color name="NiceButtonDisabledEndColor">#736F6E</color>
<color name="NiceButtonBorderColor">#254117</color>
</resources>

nice_button.xml in /drawables/

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" >
<shape>
<gradient
android:endColor="@color/NiceButtonStartColor"
android:startColor="@color/NiceButtonEndColor"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/NiceButtonBorderColor" />
<corners
android:radius="3dp" />
<padding
android:left="0dp"
android:top="10dp"
android:right="0dp"
android:bottom="10dp" />
</shape>
</item>

<item android:state_focused="true" >
<shape>
<gradient
android:startColor="@color/NiceButtonStartColor"
android:endColor="@color/NiceButtonEndColor"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/NiceButtonBorderColor" />
<corners
android:radius="3dp" />
<padding
android:left="0dp"
android:top="10dp"
android:right="0dp"
android:bottom="10dp" />
</shape>
</item>

<item android:state_enabled="false">
<shape>
<gradient
android:startColor="@color/NiceButtonDisabledStartColor"
android:endColor="@color/NiceButtonDisabledEndColor"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/NiceButtonBorderColor" />
<corners
android:radius="3dp" />
<padding
android:left="0dp"
android:top="10dp"
android:right="0dp"
android:bottom="10dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="@color/NiceButtonStartColor"
android:endColor="@color/NiceButtonEndColor"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/NiceButtonBorderColor" />
<corners
android:radius="3dp" />
<padding
android:left="0dp"
android:top="10dp"
android:right="0dp"
android:bottom="10dp" />
</shape>
</item>
</selector>

my_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<Button
android:id="@+id/btnStart"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_margin="3dp"
android:gravity="center"

android:background="@drawable/nice_button"

android:text="@string/labelStart"
android:textColor="@android:color/white"
android:textSize="18sp"
android:shadowRadius="1"
android:shadowDx="1"
android:shadowDy="1"
android:shadowColor="@android:color/black"
></Button>

2 Responses To “Android tip #026 – Create nice buttons with XML”

Aki143S
December 25, 2011 · Reply

Thanks a lot
Thanks too much
January 5, 2013 · Reply

Thanks too much save my lot of time..

Android tip #026 – Create nice buttons with XML

2 Responses To “Android tip #026 – Create nice buttons with XML”

Leave A Reply