Saturday, September 12, 2015

Create custom color button, in Android Studio


To create custom buton, create a XML file under drawable folder.


drawable/colorbutton.xml
<?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:angle="90"
                android:endColor="#000050"
                android:startColor="#0000E0" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#500000"
                android:startColor="#E00000" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#005050"
                android:startColor="#00E0E0" />
            <stroke
                android:width="3dp"
                android:color="#303030" />
            <corners
                android:radius="10dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
</selector>

Use it in layout file, layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color Button"
        android:background="@drawable/colorbutton"
        android:textColor="@android:color/white"/>

</LinearLayout>



How to do it in Android Studio:




Related:
- Android pre-defined Button style - buttonStyle, borderlessButtonStyle, buttonStyleToggle and buttonStyleInset

No comments: