Tuesday, December 13, 2011

Android Custom Transparent Button Style

A fancy button/layout style is one of the most common things to use in a mobile application. This is how I use to do it..
<Button android:id="@+id/createNewBtn" 
android:background="@drawable/custom_button"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Create New"
android:textColor="#FFF8C6"
android:textSize="15dip"/>

drawable-hdpi/custom_button.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:startColor="#FBB117"
android:endColor="#F88017"
android:angle="270" />
<stroke
android:width="2dp"
android:color="#646060" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="5dp"
android:right="10dp" android:bottom="5dp" />
</shape>
</item>

<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#7E3117"
android:startColor="#7E3817"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#646060" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="5dp"
android:right="10dp" android:bottom="5dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="#991A1111"
android:endColor="#991A1111"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#646060" />
<corners android:radius="5dp" />
<padding android:left="10dp" android:top="5dp"
android:right="10dp" android:bottom="5dp" />
</shape>
</item>
</selector>

No comments: