自定义Button按钮样式，减少应用大小

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:

Layout

XHTML

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.

Posted on 18/02/2011 by Folkert. This entry was posted in Android, Blog and taggedandroid, button, gradient. Bookmark the permalink.

 Another vehicle

Equal width in Android TableLayout 

108 thoughts on “Gradient buttons for android”

1. Jarrette
   08/03/2011 AT 23:19

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

   REPLY
2. Folkert
   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.

   REPLY