Change the circle color of radio button

Question

I want to change the color of the circle of RadioButton in one of my projects, but I could not understand which property to set. The background color is black, so it gets invisible. I want to set the color of the circle to white.

Solution 1

It is simpler just setting the buttonTint color (only works on API level 21 or above):

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="true"
    android:buttonTint="@color/your_color"/>

In your values/colors.xml file, put your color, in this case a reddish one:

<color name="your_color">#e75748</color>

Result:

If you want to do it by code (also API 21 and above):

if(Build.VERSION.SDK_INT >= 21)
{
    ColorStateList colorStateList = new ColorStateList(
            new int[][]
            {
                new int[]{-android.R.attr.state_enabled}, // Disabled
                new int[]{android.R.attr.state_enabled}   // Enabled
            },
            new int[]
            {
                Color.BLACK, // disabled
                Color.BLUE   // enabled
            }
        );

    radio.setButtonTintList(colorStateList); // set the color tint list
    radio.invalidate(); // Could not be necessary
}

Solution 2

Update:

1. use this one instead

   <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />
   

2. Then add this line into parent layout or Alt + Enter in Android Studio to auto-add xmlns:app="http://schemas.android.com/apk/res-auto"

A minimum example should look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />

</LinearLayout>

3. In your program, you should call it like this: AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

Basically, this kind of pattern can be applied for all AppCompact types such as AppCompatCheckBox, AppCompatButton, and so on.

Old Answer:

In order to support below android API 21, you can use AppCompatRadioButton. Then use setSupportButtonTintList method to change the color. This is my code snippet to create a radio button.

    AppCompatRadioButton rb;
    rb = new AppCompatRadioButton(mContext);

    ColorStateList colorStateList = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{

                    Color.DKGRAY
                    , Color.rgb (242,81,112),
            }
    );
    rb.setSupportButtonTintList(colorStateList);

Tested result at API 19:

See the Android reference link for more detail.

Solution 3

<android.support.v7.widget.AppCompatRadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buttonTint="@color/Color" />

Solution 4

This is working on API pre 21 as well as post 21.

In your styles.xml put:

<!-- custom style -->
<style name="radionbutton"
       parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:button">@drawable/radiobutton_drawable</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

Your radio button in XML should look like:

<RadioButton
    android:layout_width="wrap_content"
    style="@style/radionbutton"
    android:checked="false"
    android:layout_height="wrap_content"
    />

Now all you need to do is make a radiobutton_drawable.xml in your drawable folder. Here is what you need to put in it:

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

Your radio_unchecked.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <stroke android:width="1dp" android:color="@color/colorAccent"/>
  <size android:width="30dp" android:height="30dp"/>
</shape>

Your radio_checked.xml file:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <stroke android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="30dp" android:height="30dp"/>
    </shape>
  </item>
  <item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
    <shape android:shape="oval">
      <solid android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="10dp" android:height="10dp"/>
    </shape>
  </item>
</layer-list>

Just replace @color/colorAccent with the color of your choice.

Solution 5

1. Declare a custom style in your styles.xml file.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>
   

2. Apply this style to your RadioButton via the android:theme attribute.

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Radio Button"
        android:theme="@style/MyRadioButton"/>
   

But only if your activity extends AppCompatActivity.

View more solutions

Comments

[Android Developer]

refer this link: heliodorj.blogspot.in/2009/04/…

[SAURABH_12]

Use two image for radio button one is selected and another is not, chane this images on Radiobutton click either by using setbackground resource or by using selector xml.

[Jorge Arimany]

@emaillenin, if you want to change the color tint by code you should use control.getDrawable().setColorFilter(getResources().getColor‌​(color), PorterDuff.Mode.SRC_IN); where control is the control you want to change the tint and color is an integer value of the color you want e.g.R.color.red

[Raj]

@JorgeArimany For a RadioButton, is it getButtonDrawable or getCompoundDrawables? getCompoundDrawables returns a List

[Jorge Arimany]

@emaillenin, thank you, my answer to your comment was for other controls like a button, I've upgraded my answer by adding the code you are looking for, hope that helps you

[Raj]

@JorgeArimany I got it working for > 21 already.. I am looking for answers specifically for < 21

[Vinayak Garg]

This answer should be the accepted one. If you want to add this support radio button through xml, use <android.support.v7.widget.AppCompatRadioButton ../>

[miracle-doh]

This is only after API 21

[wampastompa]

setSupportButtonTintList is a private method you are not intended to use. The radio buttons will behave oddly on certain versions of Android. Instead, use CompoundButtonCompat.setButtonTintList(rb, colorStateList).

[semirturgay]

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

[Iturbo]

My answer is change the app's basic color and of course it can change radiobutton's color to white.

[Nino van Hooff]

@wampastompa is right. On API 22, the result was that I saw only an outer circle, never filled when checked. @aknay; please update your answer

[tccpg288]

How would I do this programmatically?

[Vaibhav Sharma]

@tccpg288 If you use this xml and if you want to change the color programmatically, simply use radioButton.setChecked(false) or radioButton.setChecked(true)

[Vaibhav Sharma]

I don't understand your question. Can you please elaborate?

[tccpg288]

My mistake, does it matter if I use the regular RadioButton or the AppCompat RadioButton?

[tccpg288]

It is not working, what about when I initialize the RadioButton? Here is my code: mPollAnswerArrayList.add((indexCreated), new RadioButton((getActivity().getApplicationContext()),null,R.s‌​tyle.radiobutton));

[tccpg288]

I am on API 16. I add the AppCompat Radio buttons as listed above, however it is still not displaying correctly.

[Vaibhav Sharma]

You can use radio button. You have set the attribute set as null. I am not sure, but maybe that is causing an issue.

[Vaibhav Sharma]

I have referenced the style in the radio button xml in my answer

[Waza_Be]

But not the ripple ;-)

[sdelvalle57]

This is the answer for pre, current, and post lollypop devices!! Great

[Kirill Karmazin]

This should be the accepted answer. Short and perfect. NOTE: use app:buttonTint="@color/Color" but not andoid:buttonTint="@color/Color" !

[Kirill Karmazin]

you don't need any code, see IgorOliveira's answer. Works for all versions.

[Bevor]

Theme inside the RadioButton doesn't work (anymore?). It crashes while clicking the button, because the onClick method is not found, although it is here.

[user924]

@KirillKarmazin accepted should be which works for <21

[Jcorretjer]

Make sure your min API is higher then 21 or this won't work

[Jaura]

this issue will have some other reason. Make sure you are getting the correct view's ID before implementing the onClick on that view.

[erickva]

This solution is incredible! Just wish we would not lose the default buttons animations.

[Mridul Das]

you can use this for backward compatibility: app:buttonTint="your_color"

[Chisko]

"Make sure your min API is higher then 21 or this won't work" that is false. I'm targeting API 17 with AndroidX and this is the only thing that worked for me

[Chisko]

Should be clarified: buttonTint works for API 21 and apps that use AppCompat/AndroidX, no matter API

[Antonis Radz]

This should be accepted as an answer, it works on all versions and it is cleanest

[6rchid]

To change the color of a checked button you can add or replace a state with android.R.attr.state_checked and add the color.

[Taylor Venissat]

I had to use <item name="android:colorControlActivated">@color/pink</item> for it to work for me. I'm still not sure why. Otherwise, this is a good answer.

[mochadwi]

if you want have a stroke & background for your radio button, combine the android:buttonTint with android:background

[John T]

This is the best solution! Clean, short and works on old versions.

[Peter Mortensen]

Still, an explanation would be in order. Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today).

[David Kariuki]

This is a better solution when you are starting to consider light and dark themes

[Skyle]

That last line saves me. It's needed to add that transparency background else it will just paint all the drawable.

[baderkhane]

android:buttonTint accept only colours