Devrath Devrath - 1 month ago 20
Android Question

Adding custom radio buttons in android

I am trying to get radiobutton effect for regular buttons in android



I have a simple android radio button below

enter image description here

Code for this is ::

activity_main.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >

<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="RadioButton1" />

<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton2" />

<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton3" />
</RadioGroup>


</RelativeLayout>





How to customize it as below::



enter image description here

Thanks !

[EDIT] using code from one of the answers



enter image description here

But the button name is overshadowed by the select option how to remove it ?




{EDIT} more changes



Finall changes should atleast i should know which button i have selected out of three radio buttons .... is it possible to get as below ?

enter image description here

Answer

Add a background drawable that references to an image, or a selector (like below), and make the button transparent:

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/yourbuttonbackground"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

If you would like your radio buttons to have a different resource when checked, create a selector background drawable:

res/drawable/yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

In the selector above, we reference two drawables, a and b, here's how we create them:

res/drawable/a.xml - Selected State

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res/drawable/b.xml - Regular State

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

More on drawables here: http://developer.android.com/guide/topics/resources/drawable-resource.html

Comments