Button - Tùy chỉnh kiểu Buttons

Default Button:

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Default Button” />

---

Color Button:

First we need an xml file to define colors and shapes for a button.

Create a file color_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#879548″ />

<stroke android:width=”2dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”4dp” android:bottomRightRadius=”4dp” android:topLeftRadius=”4dp” android:topRightRadius=”4dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”#879548″ android:startColor=”#c4e347″ />

<stroke android:width=”2dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”4dp” android:bottomRightRadius=”4dp” android:topLeftRadius=”4dp” android:topRightRadius=”4dp” />
</shape></item>

</selector>

For Color full Text Styles add styles.xml in res/values folder and write the following code:

Note: the “style” tag should be inside the “resource” tag

<style name=”ButtonText”>
<item name=”android:layout_width”>wrap_content</item>
<item name=”android:layout_height”>wrap_content</item>
<item name=”android:textColor”>#2e2e2e</item>
<item name=”android:gravity”>center</item>
<item name=”android:textStyle”>bold</item>
<item name=”android:textSize”>16dp</item>
</style>

So, Now we are ready to use these two files for a Button as style and background in your android layout as below

<Button
style=”@style/ButtonText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/color_button”
android:padding=”8dp”
android:text=”Colors Button” />

---

Round Button:

Same as Color Button Example above, Change radius sizes of “corner” tag as per our requirements.

First we need an xml file to define radius, colors and shapes for a button.

Create a file round_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#262523″ />

<stroke android:width=”2dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”10dp” android:bottomRightRadius=”10dp” android:topLeftRadius=”10dp” android:topRightRadius=”10dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”#262523″ android:startColor=”#8c8c8c” />

<stroke android:width=”2dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”10dp” android:bottomRightRadius=”10dp” android:topLeftRadius=”10dp” android:topRightRadius=”10dp” />
</shape></item>

</selector>

For Color full Text Styles add styles.xml(not if exists) in res/values folder and write the following code:

Note: the “style” tag should be inside the “resource” tag

<style name=”ButtonWhiteText”>
<item name=”android:layout_width”>wrap_content</item>
<item name=”android:layout_height”>wrap_content</item>
<item name=”android:textColor”>#FFFFFF</item>
<item name=”android:gravity”>center</item>
<item name=”android:textStyle”>bold</item>
<item name=”android:textSize”>16dp</item>
</style>

So, Now we are ready to use these two files for a Button as style and background in your android layout as below

<Button
style=”@style/ButtonWhiteText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/round_button”
android:padding=”8dp”
android:text=”Round Button” />

---

Log In Sign Up dual style buttons:

These are also as simple as above.

Note: Take ButtonText style from above

Create a file left_border_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#468799″ />

<stroke android:width=”1dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”0dp” android:bottomRightRadius=”4dp” android:topLeftRadius=”4dp” android:topRightRadius=”0dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”#468799″ android:startColor=”#7cc3d7″ />

<stroke android:width=”1dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”0dp” android:bottomRightRadius=”4dp” android:topLeftRadius=”4dp” android:topRightRadius=”0dp” />
</shape></item>

</selector>

Create another file right_border_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#468799″ />

<stroke android:width=”1dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”4dp” android:bottomRightRadius=”0dp” android:topLeftRadius=”0dp” android:topRightRadius=”4dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”#468799″ android:startColor=”#7cc3d7″ />

<stroke android:width=”1dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”4dp” android:bottomRightRadius=”0dp” android:topLeftRadius=”0dp” android:topRightRadius=”4dp” />
</shape></item>

</selector>

Now we are ready to use this drawable for a Button in an Android layout as below.

Create a LinearLayout in your main activity layout and add two buttons oriented horizontal as below.

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:orientation=”horizontal” >

<Button
style=”@style/ButtonText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/left_border_button”
android:padding=”8dp”
android:text=”Log In” />

<Button
style=”@style/ButtonText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginLeft=”-3dp”
android:background=”@drawable/right_border_button”
android:padding=”8dp”
android:text=”Sign Up” />
</LinearLayout>

---

Share Image Text Button:

Just Add a Button tag in your activity layout and set options as below.

Note: ButtonText in styles.xml and color_button.xml in drawable are show above.

<Button
style=”@style/ButtonText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/color_button”
android:drawableLeft=”@android:drawable/ic_menu_share”
android:drawablePadding=”5dp”
android:paddingRight=”10dp”
android:text=”Share”
android:textSize=”20dp” />

Search Button with EditText:

Create an leftroundborder.xml in res/drawable folder and write the below code.

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners
android:bottomLeftRadius=”0dp”
android:bottomRightRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”0dp” />

<stroke
android:width=”1dp”
android:color=”#44433A” />

<solid android:color=”#FFF” />

</shape>

Now use this drawable file for EditText along with button as shown below 

Note: right_border_button.xml file is as explained above.

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal” >

<EditText
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:background=”@drawable/leftroundborder”
android:hint=”Search Button”
android:padding=”8dp” />

<ImageButton
android:layout_width=”40dp”
android:layout_height=”41dp”
android:layout_marginLeft=”-1dp”
android:background=”@drawable/right_border_button”
android:src=”@drawable/ic_action_search” />
</LinearLayout>

---

Circle Style Buttons:

Create a file circle_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#677e86″ />

<stroke android:width=”3dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”16dp” android:bottomRightRadius=”16dp” android:topLeftRadius=”16dp” android:topRightRadius=”16dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”#677e86″ android:startColor=”#a3f2ff” />

<stroke android:width=”3dp” android:color=”#444″ />

<corners android:bottomLeftRadius=”16dp” android:bottomRightRadius=”16dp” android:topLeftRadius=”16dp” android:topRightRadius=”16dp” />
</shape></item>

</selector>

Create another file circle_inactive_button.xml in res/drawable folder and write the following code:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<item android:state_pressed=”true”><shape>
<solid android:color=”#677e86″ />

<stroke android:width=”3dp” android:color=”#4b4c4c” />

<corners android:bottomLeftRadius=”16dp” android:bottomRightRadius=”16dp” android:topLeftRadius=”16dp” android:topRightRadius=”16dp” />
</shape></item>
<item><shape>
<gradient android:angle=”270″ android:endColor=”@android:color/darker_gray” android:startColor=”@android:color/darker_gray” />

<stroke android:width=”3dp” android:color=”#444″ />

<corners android:bottomLeftRadius=”16dp” android:bottomRightRadius=”16dp” android:topLeftRadius=”16dp” android:topRightRadius=”16dp” />
</shape></item>

</selector>

Now use these two files to get active/selected button and inactive style circle buttons as many as you need as below.

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:orientation=”horizontal” >

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_margin=”5dp”
android:background=”@drawable/circle_button”
android:paddingLeft=”11dp”
android:paddingRight=”11dp” />

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_margin=”5dp”
android:background=”@drawable/circle_inactive_button”
android:paddingLeft=”11dp”
android:paddingRight=”11dp” />

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_margin=”5dp”
android:background=”@drawable/circle_inactive_button”
android:paddingLeft=”11dp”
android:paddingRight=”11dp” />
</LinearLayout>

Change radius of “corner” tag and colors of gradient for different shapes and colors for Stylish and Custom Android Buttons. Experiment as much you can.

Finally, fell free to suggest, ask or comment on my posts. So that we can learn new and possible things.

Thank you.