How to use apply a custom drawable to RadioButton?

Question

It looks like we can use the following in a RadioButton:

android:button="@drawable/myCustomStateBackground"

but that drawable only occupies the spot where the radio drawable would normally go. Ideally I want my entire button background to be stateful. So when pushed, I want the entire button to look like its stuck in the pressed state. To do that, I was hoping I could do something like:

android:button="null"
android:background="@drawable/myCustomStateBackground"

but then the background drawable doesn't know about push state, like the button attribute does. Is there a way around it?

Rather than changing the background, you're probably looking for the `android:button` attribute. — MH., Sep 14 '12 at 22:22

score 132 · Accepted Answer · answered Sep 14 '12 at 22:21

Give your radiobutton a custom style:

<style name="MyRadioButtonStyle" parent="@android:style/Widget.CompoundButton.RadioButton">
    <item name="android:button">@drawable/custom_btn_radio</item>
</style>

custom_btn_radio.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false"
          android:drawable="@drawable/btn_radio_on" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:drawable="@drawable/btn_radio_off" />

    <item android:state_checked="true" android:state_pressed="true"
          android:drawable="@drawable/btn_radio_on_pressed" />
    <item android:state_checked="false" android:state_pressed="true"
          android:drawable="@drawable/btn_radio_off_pressed" />

    <item android:state_checked="true" android:state_focused="true"
          android:drawable="@drawable/btn_radio_on_selected" />
    <item android:state_checked="false" android:state_focused="true"
          android:drawable="@drawable/btn_radio_off_selected" />

    <item android:state_checked="false" android:drawable="@drawable/btn_radio_off" />
    <item android:state_checked="true" android:drawable="@drawable/btn_radio_on" />
</selector>

Replace the drawables with your own.

Ah sorry - this will only modify the "button" drawable - I'd like to modify the background drawable - but also have its state behave like the "button" attribute - doesn't look like RadioButton supports that? — user291701, Sep 14 '12 at 22:30
using this drawable once my radio button gets checked it's never get unchecked — umerk44, Apr 25 '16 at 07:49
@umerk44 That's the way a RadioButton works if it's not part of a group. If you need it to be unselectable you can use a CheckBox. — Ivan Wooll, Nov 26 '18 at 15:51

score 45 · Answer 2 · edited Jun 08 '17 at 04:48

45

You should set android:button="@null" instead of "null".

You were soo close!

edited Jun 08 '17 at 04:48

fluffyBatman

6,524
3
24
25

answered Jun 26 '13 at 09:38

Tore Rudberg

1,594
15
16

score 43 · Answer 3 · edited Jul 17 '17 at 22:14

full solution here:

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

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

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/oragne_toggle_btn"
        android:layout_marginTop="20dp"
        android:text="RadioButton" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/oragne_toggle_btn"
        android:layout_marginTop="20dp"
        android:text="RadioButton" />
</RadioGroup>

selector XML

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

<item android:drawable="@drawable/orange_btn_selected" android:state_checked="true"/>
<item android:drawable="@drawable/orange_btn_unselected"    android:state_checked="false"/>

 </selector>

or you could use `android:button="@drawable/oragne_toggle_btn"` — pepela, Aug 05 '14 at 09:32
Do not use background attribute use >android:button="@drawable/oragne_toggle_btn" — Biswatma, Feb 24 '17 at 08:19
Old thread, I know... It looks like the above solutions `android:button="@drawable/oragne_toggle_btn"` or `android:button="@null"` and `android:background="@drawable/oragne_toggle_btn"` are not working when using an API < API 21. Any alternatives for API 18 that makes it possible to replace the default radiobutton image with your own? — GeertVc, Jul 24 '21 at 11:56

John smith · Answer 4 · 2017-03-08T08:30:07.910

12

if you want to change the only icon of radio button then you can only add android:button="@drawable/ic_launcher" to your radio button and for making sensitive on click then you have to use the selector

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

<item android:drawable="@drawable/image_what_you_want_on_select_state" android:state_checked="true"/>
<item android:drawable="@drawable/image_what_you_want_on_un_select_state"    android:state_checked="false"/>


 </selector>

and set to your radio android:background="@drawable/name_of_selector"

edited Mar 08 '17 at 08:30

answered Feb 26 '15 at 12:46

John smith

1,781
17
27

If m using android:button="@null" android:background="@drawable/myCustomStateBackground" for a radio button which is located in navigation drawer menu. It is not working properly. Some times background images are visible but sometimes not. Please help regarding same. – Whisky Aug 10 '17 at 10:51

Gayathri · Answer 5 · 2019-03-14T11:14:38.043

0

In programmatically, add the background image

minSdkVersion 16

RadioGroup rg = new RadioGroup(this);
RadioButton radioButton = new RadioButton(this);
radioButton.setBackground(R.drawable.account_background);
rg.addView(radioButton);

edited Mar 14 '19 at 11:14

answered Mar 14 '19 at 11:08

Gayathri

249
3
13

How to use apply a custom drawable to RadioButton?

5 Answers5

Linked

Related