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.

refer this link: http://heliodorj.blogspot.in/2009/04/androids-statelistdrawable-example.html — Android Developer, Jun 15 '13 at 04:39
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. — SAURABH_12, Jun 15 '13 at 05:12

score 359 · Accepted Answer · edited Jul 21 '21 at 20:31

359

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:

Colored Android Radio Button

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
}

edited Jul 21 '21 at 20:31

Peter Mortensen

30,030
21
100
124

answered Apr 09 '15 at 23:50

Jorge Arimany

5,409
2
27
22

2

@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` – Jorge Arimany Nov 19 '15 at 10:54
1

@JorgeArimany For a RadioButton, is it getButtonDrawable or getCompoundDrawables? getCompoundDrawables returns a List – Lenin Raj Rajasekaran Nov 19 '15 at 13:59
@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 – Jorge Arimany Nov 19 '15 at 15:26
4

@JorgeArimany I got it working for > 21 already.. I am looking for answers specifically for < 21 – Lenin Raj Rajasekaran Nov 20 '15 at 08:40
3

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. – 6rchid Feb 10 '20 at 18:24
if you want have a stroke & background for your radio button, combine the `android:buttonTint` with `android:background` – mochadwi Mar 03 '20 at 01:07

score 173 · Answer 2 · edited Jul 21 '21 at 20:36

Update:

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" />

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>

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.

This answer should be the accepted one. If you want to add this support radio button through xml, use `` — Vinayak Garg, Jan 18 '16 at 10:40
`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)`. — wampastompa, Mar 18 '16 at 21:00
@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 — Nino van Hooff, Apr 11 '16 at 13:21
I am on API 16. I add the AppCompat Radio buttons as listed above, however it is still not displaying correctly. — tccpg288, May 21 '16 at 14:52
you don't need any code, see IgorOliveira's answer. Works for all versions. — Kirill Karmazin, May 16 '17 at 11:35

score 80 · Answer 3 · answered Mar 04 '16 at 16:24

80

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

answered Mar 04 '16 at 16:24

IgorOliveira

1,589
14
14

11

This is the answer for pre, current, and post lollypop devices!! Great – sdelvalle57 Jul 12 '16 at 19:23
1

This should be the accepted answer. Short and perfect. NOTE: use app:buttonTint="@color/Color" but not andoid:buttonTint="@color/Color" ! – Kirill Karmazin May 16 '17 at 11:33
@KirillKarmazin accepted should be which works for <21 – user924 Dec 09 '17 at 17:16
Still, an explanation would be in order. Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/35801029/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Jul 21 '21 at 20:52

score 58 · Answer 4 · edited Jul 21 '21 at 20:54

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.

@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, May 21 '16 at 05:49
My mistake, does it matter if I use the regular RadioButton or the AppCompat RadioButton? — tccpg288, May 21 '16 at 14:28
It is not working, what about when I initialize the RadioButton? Here is my code: mPollAnswerArrayList.add((indexCreated), new RadioButton((getActivity().getApplicationContext()),null,R.style.radiobutton)); — tccpg288, May 21 '16 at 14:39
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, May 21 '16 at 16:34
I have referenced the style in the radio button xml in my answer — Vaibhav Sharma, May 21 '16 at 17:23
This solution is incredible! Just wish we would not lose the default buttons animations. — erickva, Sep 12 '18 at 03:56

score 37 · Answer 5 · edited Jul 21 '21 at 20:55

37

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>

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.

edited Jul 21 '21 at 20:55

Peter Mortensen

30,030
21
100
124

answered Jul 27 '17 at 11:29

batsheva

1,979
1
17
27

4

This should be accepted as an answer, it works on all versions and it is cleanest – Antonis Radz Sep 06 '19 at 10:30
I had to use `@color/pink` for it to work for me. I'm still not sure why. Otherwise, this is a good answer. – Taylor Venissat Feb 18 '20 at 20:12
This is a better solution when you are starting to consider light and dark themes – David Kariuki Jul 25 '21 at 13:50

score 22 · Answer 6 · edited Jul 21 '21 at 21:09

For under API 21

Create a custom style RadioButton:

File style.xml

<style name="RadioButton" parent="Theme.AppCompat.Light">
    <item name="colorAccent">@color/green</item>
    <item name="android:textColorSecondary">@color/mediumGray</item>
    <item name="colorControlNormal">@color/red</item>
</style>

In the layout, use the theme:

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RadioButton" />

For API 21 and higher

Just use buttonTint:

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/green" />

Should be clarified: buttonTint works for API 21 **and** apps that use AppCompat/AndroidX, no matter API — Chisko, May 09 '19 at 19:04

score 19 · Answer 7 · edited Jul 21 '21 at 20:56

19

You can change the color of radio button's unchecked and checked state by using style in XML.

<RadioButton
    android:id="@+id/rb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RadioButtonStyle" />

In style.xml

<style name="RadioButtonStyle" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
</style>

You can set the desired colors in this style.

edited Jul 21 '21 at 20:56

Peter Mortensen

30,030
21
100
124

answered Jan 14 '17 at 10:24

Jaura

447
4
12

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. – Bevor Dec 09 '17 at 10:46
this issue will have some other reason. Make sure you are getting the correct view's ID before implementing the onClick on that view. – Jaura Mar 29 '18 at 06:44

score 19 · Answer 8 · edited Jan 18 '21 at 15:51

19

You have to use this code:

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

Using app:buttonTint instead of android:buttonTint and also android.support.v7.widget.AppCompatRadioButton instead of Radiobutton!

edited Jan 18 '21 at 15:51

Sanoj Kashyap

4,882
4
46
72

answered May 04 '17 at 15:57

srt

245
2
10

This is the best solution! Clean, short and works on old versions. – John T Jan 20 '21 at 05:52

score 11 · Answer 9 · edited Jan 13 '16 at 11:56

11

Set the buttonTint property. For example, android:buttonTint="#99FF33".

edited Jan 13 '16 at 11:56

Mangesh

4,901
5
44
64

answered Feb 21 '15 at 03:45

Sandy

111
1
2

9

This is only after API 21 – miracle-doh Feb 25 '16 at 21:12

score 9 · Answer 10 · edited Jul 21 '21 at 21:01

I made it the short way like this (working on API pre 21 as well as post 21):

Your radio button in XML should look like this

  <RadioButton android:id="@+id/radioid"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:button="@drawable/radiodraw" />

In file radiodraw.xml:

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:state_checked="false" >
          <shape  android:shape="oval" >
              <stroke android:width="1dp" android:color="#000"/>
              <size android:width="30dp" android:height="30dp"/>
              <solid android:color="@android:color/transparent"/>
          </shape>
      </item>
      <item android:state_checked="true">
          <layer-list>
              <item>
                  <shape android:shape="oval">
                      <stroke android:width="1dp" android:color="#000"/>
                      <size android:width="30dp" android:height="30dp"/>
                      <solid android:color="@android:color/transparent"/>
                  </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="#000"/>
                      <size android:width="10dp" android:height="10dp"/>
                  </shape>
              </item>
          </layer-list>
      </item>
  </selector>

You have to add color transparent for drawing the unchecked status; else it draws a solid black oval.

That last line saves me. It's needed to add that transparency background else it will just paint all the drawable. — Skyle, Oct 21 '21 at 21:52

score 8 · Answer 11 · edited Jul 21 '21 at 20:59

Sometimes you just need to override colorControlNormal like this:

<style name="RadioButtonStyle" parent="AppTheme">
    <item name="colorControlNormal">@color/pink</item>
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="android:textColorSecondary">@color/black</item>
</style>

And you will get a button like this:

colorControlNormal is used for the unchecked state and colorAccent for checked.

Saman Sattari · Answer 12 · 2021-07-25T21:42:40.847

For those who want to change disable, checked and enabled states you can do the following steps:

<!-- Or androidX radio button or material design radio button -->
<android.support.v7.widget.AppCompatRadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:buttonTint="@color/black"
                    android:text="Radiobutton1"
                    app:buttonTint="@color/radio_button_color" />

Then in the color res folder, make a file named "radio_button_color.xml":

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

score 6 · Answer 13 · edited Jul 21 '21 at 21:02

6

There is an XML attribute for it:

android:buttonTint="yourcolor"

edited Jul 21 '21 at 21:02

Peter Mortensen

30,030
21
100
124

answered Apr 28 '17 at 10:55

thelearner

1,349
3
25
52

Make sure your min API is higher then 21 or this won't work – Jcorretjer Jan 16 '18 at 16:59
1

you can use this for backward compatibility: app:buttonTint="your_color" – Mridul Das Nov 24 '18 at 11:12
`"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 May 09 '19 at 19:03

score 2 · Answer 14 · edited Jul 21 '21 at 21:04

2

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

All buttons will change color, the circle box and the central check.

edited Jul 21 '21 at 21:04

Peter Mortensen

30,030
21
100
124

answered Oct 13 '15 at 19:38

texeratx

41
5

1

But not the ripple ;-) – Waza_Be May 25 '16 at 20:36

score 2 · Answer 15 · edited Jul 21 '21 at 21:06

2

Just use the android:buttonTint="@color/colorPrimary" attribute on the <RadioButton> tag.

edited Jul 21 '21 at 21:06

Peter Mortensen

30,030
21
100
124

answered Apr 28 '19 at 00:57

Cevin Ways

928
10
13

score 1 · Answer 16 · answered Jan 10 '17 at 09:58

1

RadioButton by default takes the colour of colorAccent in res/values/colors.xml file. So go to that file and change the value of

<color name="colorAccent">#3F51B5</color>

to the colour you want.

answered Jan 10 '17 at 09:58

Velmurugan V

398
3
12

David Kariuki · Answer 17 · 2021-07-25T13:24:39.330

You can do it this way in XML with the android:buttonTint attribute:

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="false"
    android:padding="5dp"
    android:buttonTint="@color/radio_color"/>

You can do it this way in Java using android:buttonTint:

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

    new int[]{
        DataUtils.getColorResource(mContext, R.color.colorBlack), // Unchecked
        DataUtils.getColorResource(mContext, R.color.colorPrimary) // Checked
    }
);

RadioButton radio = findViewById(R.id.radio);   
radio.setButtonTintList(colorStateList);

score 0 · Answer 18 · answered Aug 24 '17 at 08:57

0

The easiest way is to change colourAccent color in values->colours.xml
but be aware that it will also change other things like edit text cursor color etc..

< color name="colorAccent">#75aeff</color >

answered Aug 24 '17 at 08:57

Manohar

19,149
8
90
129

score 0 · Answer 19 · edited Jul 21 '21 at 21:08

I had this problem. If your app has a black background and you have a lot of RadioButtons that are invisible due to the background, it is complicated to edit the android:buttonTint attribute of each one. The best solution is to change the parent theme in your styles.xml file

I changed

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

to

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

So the RadioButtons' circles became a lighter shade of gray and now they are visible even with a black background.

This is my style.xml file:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

score 0 · Answer 20 · edited Jul 21 '21 at 21:12

0

To change the radio button color programmatically you can use following:

yourradio button name.buttonDrawable?.setColorFilter(Color.parseColor( color_value), PorterDuff.Mode.SRC_ATOP)

edited Jul 21 '21 at 21:12

Peter Mortensen

30,030
21
100
124

answered Feb 03 '21 at 12:26

Sahil Bansal

415
4
5

score -1 · Answer 21 · edited Jul 21 '21 at 21:14

-1

If you want to set different color for a clicked and unclicked radio button, just use:

android:buttonTint="@drawable/radiobutton" in the XML content of the radiobutton and your radiobutton.xml file will be:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#1E88E5"/>
    <item android:state_checked="true" android:color="#00e676"/>
    <item android:color="#ffffff"/>
</selector>

edited Jul 21 '21 at 21:14

Peter Mortensen

30,030
21
100
124

answered Feb 20 '19 at 09:56

anju jo

203
1
13

1

android:buttonTint accept only colours – baderkhane Dec 23 '21 at 12:47

score -4 · Answer 22 · edited Jul 21 '21 at 21:15

-4

@jh314 is correct.

In file AndroidManifest.xml,

<application
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"></application>

In file style.xml:

<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/red</item>
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>

The item name must be colorAccent. It decides the application's widgets default color.

But if you want to change the color in code, maybe @aknay's answer is correct.

edited Jul 21 '21 at 21:15

Peter Mortensen

30,030
21
100
124

answered Mar 25 '16 at 02:10

Iturbo

1
1

This does not provide an answer to the question. Once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/11765418) – semirturgay Mar 25 '16 at 07:17
My answer is change the app's basic color and of course it can change radiobutton's color to white. – Iturbo Apr 01 '16 at 06:58

Change the circle color of radio button

22 Answers22

Linked

Related