Custom Radio Buttons
In android we can customize the default Radio Buttons.
Default Radio Buttons are small and also not attractive, By using
customized Radio Buttons we can design more attractive and better user
interface.To customize Radio Buttons we need to have two drawables
1: when radio button is selected.
2: when radio button is not selected.
In this example I have used these two drawables for selected and not selected state.
We need to define the xml for our customized Radio Buttons
create the custom_radio_button.xml file and put it in drawable folder( if drawable folder is not there ,cerate it (inside res folder, and put custom_checkbox_design.xm file in this folder). It should look like following in pacakgae explorer
res
-> drawable
-> custom_radio_button.xml
custom_radio_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/checkedradiobutton" />
<item android:state_checked="false" android:drawable="@drawable/unchekedradiobutton" />
</selector>
In RadioButton(in your .xml file) set android:button property to the custom_checkbox_design.xml drawable like
android:button="@drawable/custom_checkbox_design"
See the differences in default checkbox and customize checkbox in below screenshot
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:textSize="25dp"
android:text="Default Radio Buttons" />
<!-- Default RadioButtons -->
<RadioButton
android:id="@+id/radioButtonDeafult1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Radio Button Selected"
android:layout_marginTop="20dp"
android:checked="true"
android:textSize="20dp" />
<RadioButton
android:id="@+id/radioButtonDeafult2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Radio Button Not Selected"
android:layout_marginTop="10dp"
android:checked="false"
android:textSize="20dp" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="20dp"
android:background="#B8B894" />
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:textSize="25dp"
android:text="Customized Radio Buttons" />
<!-- Customized RadioButtons -->
<RadioButton
android:id="@+id/radioButtonCustomized1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Radio Button Selected"
android:layout_marginTop="20dp"
android:checked="true"
android:button="@drawable/custom_radio_button"
android:textSize="20dp" />
<RadioButton
android:id="@+id/radioButtonCustomized2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Radio Button Not Selected"
android:layout_marginTop="10dp"
android:checked="false"
android:button="@drawable/custom_radio_button"
android:textSize="20dp" />
</LinearLayout>
