Diberdayakan oleh Blogger.

Senin, 30 Juni 2014

How To Create Button With Different Color In Android

by Joielechong sipayung  |  in Tutorial at  Senin, Juni 30, 2014

There is an easy way to change the color of default button in Android that I found from stackoverflow. We only need to create an xml for custom color (we name it custom_button.xml in res/drawable), add color value (in res/values/color.xml), and add android:background="@drawable/custom_button" tag in our button in layout. All of the code explained here can be downloaded from my github.

Here is my default button before editing:


These are the step to customize our button:

1. Add color value in res/value/color.xml. I use blue base color for button. Here the code:
    <color name="blue_middle">#3C73FF</color>    <color name="blue">#33b5e5</color>    <color name="blue_hard">#2ea9d6</color>
2. Add custom_button.xml in res/drawable. Here the code:
<?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:startColor="@color/blue_hard"
                android:endColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue_middle" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/blue"
                android:startColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue_middle" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>      
        <shape>
            <gradient
                android:endColor="@color/blue"
                android:startColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector> 
3. Add tag android:background="@drawable/custom_button" for the button in the layout. For example, here is my button code in layout (the bold text is the tag):
<Button
        android:id="@+id/buttonOpen"
        android:layout_width="300sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp"
        android:text="@string/login_screen_button_open"
        android:background="@drawable/custom_button"/>



Now, after applying these step, we will get our button like this:



 Voila, we finished it.... :D


0 comments:

Silahkan tinggalkan komentar anda: