160

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

Devrath
  • 42,072
  • 54
  • 195
  • 297

12 Answers12

273

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="@null"
    android:button="@drawable/yourbuttonbackground"
    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

Community
  • 1
  • 1
Evan Bashir
  • 5,501
  • 2
  • 25
  • 29
  • 1
    Hey , thanks i got the functionality done ... But the button name is being overwritten by the select option ..... how to remove that ... keeping the functionality intact .... All i am trying to achieve as i showed in my question ... Any further directions ! [Note:: please look at the updated question] – Devrath Oct 03 '13 at 16:41
  • 2
    @Unicorn Add `android:button="@android:color/transparent"` to remove it. – Evan Bashir Oct 03 '13 at 17:16
  • @ Evan B ...... that works but ... i need to know which button is selected & also text bust not be overshadowed by anything.... i have modified the question ... please have a look at updated question... this is the final piece of info ..i am looking for :) – Devrath Oct 03 '13 at 17:23
  • 3
    @Unicorn Yes, I understand. All you need to do is create a selector drawable like I stated within my answer. You would create two drawables. One for regular button style, and one for the pressed button style. I will update my answer with code for these drawables. – Evan Bashir Oct 03 '13 at 17:27
  • 1
    To fit the text instead of overlapping it, set the button drawable, not the background, and make sure it is a 9-patch with stretch points and content areas indicated to fit the text. – Lance Nanek Feb 27 '14 at 13:27
  • @EvanB, I tried your solution, I used a different background image to indicate different selected/unselected state instead. But the custom selected background image was not kept after click in my test. How to keep it? – fifth Aug 28 '14 at 03:36
  • @fifth Was the drawable attached to the selected state? Please open a question with more details. – Evan Bashir Aug 28 '14 at 04:04
  • @EvanB, I just figured it out, I removed all "pressed" state from selector in the yourbuttonbackground.xml, remained only "checked" state, it's now working. This [question](http://stackoverflow.com/questions/6245484/android-radiobutton-background-style-when-selected) did the answer. The rest was exactly what you did – fifth Aug 28 '14 at 04:53
  • What is the equivalent of android:button="@android:color/transparent" in java (I'm adding the buttons dynamically) setBackgroundColor or setAlpha both make the whole button transparent so the drawable doesn't show up at all. – Nonos May 06 '15 at 15:59
  • Ok found it: setButtonDrawable(android.R.color.transparent); – Nonos May 06 '15 at 16:16
  • 1
    it's not working for unchecked state once i touch the button it gets checked when i touch again it never get unchecked ? – user2934930 Apr 11 '16 at 11:36
  • 3
    Normal behaviour for a RadioButton, are you looking for checkbox? – Vincent D. May 17 '16 at 15:38
  • Thanks. You saved by ass. – viper May 31 '19 at 11:40
  • Instead of android:background="@null" android:button="@drawable/yourbuttonbackground" as described here, android:background="@drawable/yourbuttonbackground" worked for me. – bikram Aug 17 '20 at 12:08
98

I have updated accepted answer and removed unnecessary things.

I have created XML for following image.

enter image description here

Your XML code for RadioButton will be:

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="@dimen/_80sdp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

radio_flat_selector.xml for background selector:

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

radio_flat_selected.xml for selected button:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="1dp"
        />
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

radio_flat_regular.xml for regular selector:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

All the above 3 file code will be in drawable/ folder.

Now we also need Text Color Selector to change color of text accordingly.

radio_flat_text_selector.xml for text color selector

(Use color/ folder for this file.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="false" />
    <item android:color="@color/colorWhite" android:state_checked="true" />
</selector>

Note: I refereed many answers for this type of solution but didn't found good solution so I make it.

Hope it will be helpful to you.

Thanks.

Pratik Butani
  • 60,504
  • 58
  • 273
  • 437
  • I get really close to what I want with this, but I see the corner radius in between items too. When I have three buttons, I get this. Is there any way to make sure the radius only applies to the group itself? https://imgur.com/mP8dtKR – AdamMc331 May 22 '19 at 21:33
  • 2
    @AdamMc331, you will have to create 3 selectors, one for the button at the beginning of the row, one for the ones in the middle and another one for the last one, were you can then adjust and just have rounded corner one of the edges, and also hide one of them with negative marking if you wrap the inside an thats inside a – Benny Jun 12 '19 at 19:30
  • 1
    How do i create color/ folder ? Can you please help me – Kamrujjaman Joy Jan 12 '20 at 10:32
  • Yeah, It will work. Do let me know if you get any problem. – Pratik Butani Jan 18 '20 at 04:40
  • I tried on android 4 and got this https://ibb.co/jyHVXHS with Appcompat activity, but works well when I extend with Activity – kartoos khan Jan 18 '20 at 16:22
  • This works, but the change between the buttons is really abrupt. Is it possible to set some fade or anything else? – Andrew Jan 10 '21 at 14:46
  • what if I need both different colors on daily and weekly like when I click on daily the color will be red and when I click on weekly the color will be green with an outline also, what will I do for it? – Tushar Patel Sep 21 '21 at 06:02
  • I love this answer – PangoSea Jul 27 '22 at 08:46
  • 1
    Thank you for the elaborate answer and the resource files, to anyone confused on where to put the color resource xml file, if you already do not have a color folder (not strings>color.xml), just right click on the res folder > create android resource directory>color – Abhishek C. Gidde Jan 23 '23 at 10:31
44

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>
amithgc
  • 6,167
  • 6
  • 29
  • 38
Seslyn
  • 807
  • 10
  • 19
  • 1
    Thanks for this ... it looks helpful. Still working on trying it out. The name of the drawable, customButtonBackground, is not allowed to have uppercase in it -- at least that's what Android Studio tells me. – LarsH Mar 11 '15 at 15:53
13

Setting android:background and android:button of the RadioButton like the accepted answer didn't work for me. The drawable image was being displayed as a background(eventhough android:button was being set to transparent ) to the radio button text as enter image description here

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

so gave radiobutton as the custom drawable radiobuttonstyle.xml

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

and radiobuttonstyle.xml is as follows

<?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/ic_radio_checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>

and after this radiobutton with custom button style worked.

enter image description here

Community
  • 1
  • 1
Annu
  • 449
  • 6
  • 18
8

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.

flchaux
  • 100
  • 1
  • 13
  • 1
    I believe the OP would like the text within the button. I think the only way to do that is apply the drawable to the `android:background` vs the `android:button`; then declaring the `android:button` as transparent. This way the text can sit inside the button. – Evan Bashir Oct 03 '13 at 16:17
5

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.

Community
  • 1
  • 1
McX
  • 1,296
  • 2
  • 12
  • 16
5

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.

Gary Chen
  • 248
  • 2
  • 14
Abhilasha Sharma
  • 167
  • 2
  • 5
  • I chose this option too over the `background` one. If you set the background, you cannot add text to the RadioButton, and need to place your own TextView – voghDev Dec 12 '16 at 06:54
4

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"/>
Community
  • 1
  • 1
Sunil
  • 3,785
  • 1
  • 32
  • 43
4

Anybody getting here because setting a custom button doesnt work? I noticed that RadioButton didn't work, but androidx.appcompat.widget.AppCompatRadioButton did.

So a radiobutton like this

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

With a selector like this

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

will work.

Bruce Wayne
  • 435
  • 3
  • 7
1

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>

2.add the custom xml for the radio buttons

2.1.other drawable

custom_other_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/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.female drawable

custom_female_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/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3. male drawable

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/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>
  1. Output: this is the output screen
Gary Chen
  • 248
  • 2
  • 14
sachin pangare
  • 1,527
  • 15
  • 11
1

TL;DR use android:drawableStart for our custom drawable selector file instead of android:button. Set the android:button to @null. Example:

android:button="@null"
android:drawableStart="@drawable/radio_selector"

Long version:

Not aware of the reason but the existing answers here didn't work for me when I tested it on a device running Android 11 (API level 30). So tried the following alternative or hack and it worked. Sample xml for of the radio button component for reference:

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:drawableStart="@drawable/radio_selector"
    android:drawablePadding="5dp"
    android:text="@string/radioOption1" />

We are using android:drawableStart for our custom drawable image of the radio or checked icon for selector instead of android:button. And don't forget to set the android:button to @null

Dhananjay M
  • 1,851
  • 22
  • 18
0

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>
amithgc
  • 6,167
  • 6
  • 29
  • 38
Arthulia
  • 190
  • 13
  • Would this still allow radio button behavior in that when one button is checked, any others are unchecked? – LarsH Mar 11 '15 at 15:47