Gradient buttons for android -- Android




GOOOOOD Post....

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.


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.

출처 : http://www.dibbus.com/2011/02/gradient-buttons-for-android/


덧글

댓글 입력 영역