Android Custom Radio Button

In Android, Radio buttons allow the user to select one option from a set.  RadioButton are mainly used together in a RadioGroup. In RadioGroup checking the one radio button out of several radio button added in it will automatically unchecked all the others.

The most common use of radio button is in Quiz App. More information about Radio Button can be found at official Android Developer website.

In this post, I’ll try to write how I create a custom Radio Button group inside a container box, and show only text until on of the buttons selected.

  

<!-- outer container, create left right margin -->
<LinearLayout android:orientation="horizontal"
   android:layout_width="fill_parent" android:layout_height="wrap_content"
   android:paddingLeft="5dip" android:paddingRight="5dip"
   android:gravity="center_horizontal">
       <!-- radio group container -->        
       <LinearLayout android:orientation="horizontal"
           android:layout_width="fill_parent" android:layout_height="wrap_content"
           android:paddingLeft="5dip" android:paddingRight="5dip"
           android:gravity="center_horizontal" android:background="@drawable/container_border">
   <RadioGroup android:layout_width="fill_parent"
      android:layout_height="wrap_content" android:orientation="vertical"
      android:id="@+id/group1" android:layout_margin="15dp">
      <RadioButton android:checked="false" android:id="@+id/answer1"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
               android:background="@drawable/custom_radiogroup_divider"
               android:gravity="center_vertical"
               android:layout_marginBottom="10dp"
               android:paddingLeft="2dp"
               android:textColor="@color/birutua"/>
      
      <RadioButton android:checked="false" android:id="@+id/answer2"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
               android:background="@drawable/custom_radiogroup_divider"
               android:gravity="center_vertical"
               android:layout_marginBottom="10dp"
               android:paddingLeft="2dp"
               android:textColor="@color/birutua"/>
      
      <RadioButton android:checked="false" android:id="@+id/answer3"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
               android:background="@drawable/custom_radiogroup_divider"
               android:gravity="center_vertical"
               android:layout_marginBottom="10dp"
               android:paddingLeft="2dp"
               android:textColor="@color/birutua"/>
      
      <RadioButton android:checked="false" android:id="@+id/answer4"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/custom_radiogroup_divider"
               android:gravity="center_vertical"
               android:layout_marginBottom="10dp"
               android:paddingLeft="2dp"
               android:textColor="@color/birutua" />

   </RadioGroup>
       </LinearLayout>
</LinearLayout>

And don’t forget to create drawable xml for container and radio button

Container xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <solid
        android:color="@color/white" />
    <stroke
        android:width="0.6dp"
        android:color="@color/birutua"  />

    <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
        android:bottomLeftRadius="0.1dp" android:bottomRightRadius="10dp"/>
    <padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp"  />

</shape>

Button Divider XML

<shape xmlns:android="http://schemas.android.com/apk/res/android"
     >
    <solid
        android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="@color/birutua" />

    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
        android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp"/>
    <padding android:left="20dp" android:top="10dp" android:right="10dp" android:bottom="10dp"  />

</shape>

Last, we have to create xml contains colors resources.

<color name="birutua">#4C90BD</color>
<color name="birumuda">#7CBCE8</color>

Leave a Reply

Your email address will not be published. Required fields are marked *

one + fifteen =