Is it possible to change the radio button icon in an android radio button group

Question

I am wanting to allow the user of my android application the ability to set some parameters. The radio button is ideal for this situation. However, I don't like the radio buttons are rendered.

Is it possible to change the radio button icon? For example, is it possible to create a custom layout for each row and in that layout reference my own icon and change the font et al.

score 171 · Accepted Answer · answered Aug 26 '10 at 15:37

Yes that's possible you have to define your own style for radio buttons, at res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme">
   <item name="android:radioButtonStyle">@style/RadioButton</item>
</style>
<style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton">
   <item name="android:button">@drawable/radio</item>
</style>
</resources>

'radio' here should be a stateful drawable, radio.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_window_focused="false"
        android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="false" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/radio_normal_off" />
    <item android:state_checked="false" android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:drawable="@drawable/radio_hover" />
    </selector>

Then just apply the Custom theme either to whole app or to activities of your choice.

For more info about themes and styles look at http://brainflush.wordpress.com/2009/03/15/understanding-android-themes-and-styles/ that is good guide.

You can also just set the android:button property on the radio button itself, rather than defining a separate custom style for it. — Yoni Samlan, Aug 26 '10 at 15:49
True, but that's not too good practice, since you usually have more then just one radio button. — Konstantin Burov, Aug 26 '10 at 15:53
@KonstantinBurov Unless you're adding Buttons programmatically, in which case it's great :) — Cornholio, Apr 29 '13 at 16:26

score 32 · Answer 2 · edited Dec 28 '11 at 08:28

You can put custom image in radiobutton like normal button. for that create one XML file in drawable folder e.g

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/sub_screens_aus_hl" 
    android:state_pressed="true"/>  
<item android:drawable="@drawable/sub_screens_aus" 
    android:state_checked="true"/>  
<item android:drawable="@drawable/sub_screens_aus" 
    android:state_focused="true" />
<item android:drawable="@drawable/sub_screens_aus_dis" />  
</selector>

Here you can use 3 different images for radiobutton

and use this file to RadioButton like:

android:button="@drawable/aus"
android:layout_height="120dp"
android:layout_width="wrap_content"

score 19 · Answer 3 · answered Mar 12 '16 at 12:23

19

The easier way to only change the radio button is simply set selector for drawable right

<RadioButton
    ...
    android:button="@null"
    android:checked="false"
    android:drawableRight="@drawable/radio_button_selector" />

And the selector is:

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

That's all

answered Mar 12 '16 at 12:23

topcbl

799
6
20

2

Best solution, for my case I also changed 'drawableRight' to 'button' and added some padding to the selector xml – F-1 Mar 12 '19 at 11:32
This is best solution . I was used this manner and it works fine.But after migrating to andoidx android:button="@null" does not work and we see two radio button icon for every item ! . – maniaq Oct 29 '19 at 09:53

score 3 · Answer 4 · answered Mar 16 '17 at 12:47

3

yes....` from Xml

android:button="@drawable/yourdrawable"

and from Java

myRadioButton.setButtonDrawable(resourceId or Drawable);

`

answered Mar 16 '17 at 12:47

shweta jariya

233
4
7

score 0 · Answer 5 · answered Oct 12 '15 at 13:36

Here's probably a quick approach,

With two icons shown above, you shall have a RadioGroup something like this

change the RadioGroup's orientation to horizontal
for each RadioButton's Properties, try giving the icon for Button under CompoundButton,
adjust the Padding and size,
and set the Background attribute when checked.

score 0 · Answer 6 · answered Apr 23 '20 at 06:56

0

In case you want to do it programmatically,

checkBoxOrRadioButton.setButtonDrawable(null);
checkBoxOrRadioButton.setBackgroundResource(R.drawable.resource_name);

answered Apr 23 '20 at 06:56

Abhishek Kumar

4,532
5
31
53

Is it possible to change the radio button icon in an android radio button group

6 Answers6

Linked

Related