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.

Galatia

Answer 1

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.

Guileful

You can also just set the android:button property on the radio button itself, rather than defining a separate custom style for it. – Laddie

True, but that's not too good practice, since you usually have more then just one radio button. – Guileful

@KonstantinBurov what if i'm using a 9 patch image? – Woodprint

@KonstantinBurov Unless you're adding Buttons programmatically, in which case it's great :) – Jd

For support theme might want to use <style name="CustomTheme" parent="android:Theme"> <item name="android:radioButtonStyle">@style/RadioButton</item> <item name="radioButtonStyle">@style/RadioButton</item> </style> – Stilwell

Answer 2

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" 

Thorp

Answer 3

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

Lowry

Best solution, for my case I also changed 'drawableRight' to 'button' and added some padding to the selector xml – Hel

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 ! . – Heulandite

Answer 4

yes....` from Xml

android:button="@drawable/yourdrawable" 

and from Java

myRadioButton.setButtonDrawable(resourceId or Drawable);

`

Escallop

Answer 5

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.

Rapturous

Answer 6

In case you want to do it programmatically,

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

Maharanee