Home » Android » Adding custom radio buttons in android

Adding custom radio buttons in android

Posted by: admin November 29, 2017 Leave a comment

Questions:

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

Answers:

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

Questions:
Answers:

Use the same XML file format from Evan’s answer, but one drawable file is all you need for formatting.

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

And your separate drawable file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>

Questions:
Answers:

You must fill the “Button” attribute of the “CompoundButton” class with a XML drawable path (my_checkbox).
In the XML drawable, you must have :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

Don’t forget to replace my_checkbox by your filename of the checkbox drawable , checkbox_not_checked by your PNG drawable which is your checkbox when it’s not checked and checkbox_checked with your image when it’s checked.

For the size, directly update the layout parameters.

Questions:
Answers:

In order to hide the default radio button, I’d suggest to remove the button instead of making it transparent as all visual feedback is handled by the drawable background :

android:button="@null"

Also it would be better to use styles as there are several radio buttons :

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

You’ll need the Seslyn customButtonBackground drawable too.

Questions:
Answers:

Best way to add custom drawable is:

 <RadioButton
                                android:id="@+id/radiocar"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@android:color/transparent"
                                android:button="@drawable/yourbuttonbackground"
                                android:checked="true"
                                android:drawableRight="@mipmap/car"
                                android:paddingLeft="5dp"
                                android:paddingRight="5dp"
                                android:text="yourtexthere"/>

Shadow overlay by custom drawable is removed here.

Questions:
Answers:

Simple way try this

  1. Create a new layout in drawable folder and name it custom_radiobutton (You can rename also)

     <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_checked="false" 
    android:drawable="@drawable/your_radio_off_image_name" />
     <item android:state_checked="true" 
    android:drawable="@drawable/your_radio_on_image_name" />
    </selector>
    
  2. Use this in your layout activity

    <RadioButton
     android:id="@+id/radiobutton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:button="@drawable/custom_radiobutton"/>
    
Questions:
Answers:

Hello here is a modern way to do just what you want.
Generate the theme here, ideally on the very begining of project.

Android Holo Colors Generator

Then you will see how it is done and can customize it however you want.
Enjoy!

Questions:
Answers:

I realize this is a belated answer, but looking through developer.android.com, it seems that the Toggle button would be ideal for your situation.

Toggle button image http://developer.android.com/guide/topics/ui/controls/togglebutton.html

And of course you can still use the other suggestions for having a background drawable to get a custom look you want.

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

Now if you want to go with your final edit and have a “halo” effect around your buttons, you can use another custom selector to do just that.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>

Questions:
Answers:

Below code is example of custom radio button. follow below steps..

  1. Xml file.

                        <FrameLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="0.5">
    
    
                            <TextView
                                android:id="@+id/text_gender"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="left|center_vertical"
                                android:gravity="center"
                                android:text="@string/gender"
                                android:textColor="#263238"
                                android:textSize="15sp"
                                android:textStyle="normal"
    
                                />
    
                            <TextView
                                android:id="@+id/text_male"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginLeft="10dp"
                                android:gravity="center"
                                android:text="@string/male"
                                android:textColor="#263238"
                                android:textSize="15sp"
                                android:textStyle="normal"/>
    
                            <RadioButton
                                android:id="@+id/radio_Male"
                                android:layout_width="28dp"
                                android:layout_height="28dp"
                                android:layout_gravity="right|center_vertical"
                                android:layout_marginRight="4dp"
                                android:button="@drawable/custom_radio_button"
                                android:checked="true"
                                android:text=""
                                android:onClick="onButtonClicked"
                                android:textSize="15sp"
                                android:textStyle="normal"
    
                                />
                        </FrameLayout>
    
                        <FrameLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="0.6">
    
                            <RadioButton
                                android:id="@+id/radio_Female"
                                android:layout_width="28dp"
                                android:layout_height="28dp"
                                android:layout_gravity="right|center_vertical"
                                android:layout_marginLeft="10dp"
                                android:layout_marginRight="0dp"
                                android:button="@drawable/custom_female_button"
                                android:text=""
                                android:onClick="onButtonClicked"
                                android:textSize="15sp"
                                android:textStyle="normal"/>
    
                            <TextView
                                android:id="@+id/text_female"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="left|center_vertical"
                                android:gravity="center"
                                android:text="@string/female"
                                android:textColor="#263238"
                                android:textSize="15sp"
                                android:textStyle="normal"/>
    
                            <RadioButton
                                android:id="@+id/radio_Other"
                                android:layout_width="28dp"
                                android:layout_height="28dp"
                                android:layout_gravity="center_horizontal|bottom"
                                android:layout_marginRight="10dp"
                                android:button="@drawable/custom_other_button"
                                android:text=""
                                android:onClick="onButtonClicked"
                                android:textSize="15sp"
                                android:textStyle="normal"/>
    
                            <TextView
                                android:id="@+id/text_other"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="right|center_vertical"
                                android:layout_marginRight="34dp"
                                android:gravity="center"
                                android:text="@string/other"
                                android:textColor="#263238"
                                android:textSize="15sp"
                                android:textStyle="normal"/>
                        </FrameLayout>
                    </LinearLayout>
    

    2.add the custom xml for the radio buttons

    2.1.other drawable

    custom_other_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
    

    2.2.female drawable

    custom_female_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
    

    2.3. male drawable

    custom_radio_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
    

    1. Output:
      this is the output screen