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.

Bakerman

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

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. – Cronyism

Answer 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
}

Varicose

@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 – Varicose

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

@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 – Varicose

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

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. – Alejandraalejandrina

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

Answer 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.

Kings

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

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). – Morez

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

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

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

Answer 3

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

Overspill

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

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

@KirillKarmazin accepted should be which works for <21 – Pain

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). – Ahmadahmar

Answer 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.

Asthenopia

How would I do this programmatically? – Mining

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

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

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

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)); – Mining

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

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

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

Answer 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.

Craal

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

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. – Babylonia

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

Answer 6

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

Durstin

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

Answer 7

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.

Redistrict

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. – Liveryman

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

Answer 8

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!

Jalousie

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

Answer 9

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

Lamellate

This is only after API 21 – Sandler

Answer 10

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.

Cornaceous

Answer 11

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.

Chink

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

Answer 12

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>

Underproof

Answer 13

There is an XML attribute for it:

android:buttonTint="yourcolor"

Helsa

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

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

"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 – Payee

Answer 14

<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.

Wetnurse

But not the ripple ;-) – Andra

Answer 15

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

Archeology

Answer 16

create a drawable file my_compound_button_color_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/text_app_color"/>
<item android:state_checked="true" android:color="@color/text_app_color"/>
<item android:color="@color/gray"/> </selector>

add style in style.xml file

<style name="AppRadioAppStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:textColor">@drawable/my_compound_button_color_selector</item>
    <item name="drawableTint">@drawable/my_compound_button_color_selector</item>
</style>

layout file

<RadioButton
                    android:id="@+id/radio1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
                    android:gravity="center_horizontal|bottom"
                    android:background="@drawable/app_border_0"
                    android:padding="@dimen/_15sdp"
                    android:text="@string/no"
                    android:fontFamily="@font/poppins_medium"
                    style="@style/AppRadioAppStyle"
                    android:layout_marginStart="@dimen/_10sdp"/>

should be add android:button="@null" in your radiobutton

Longsighted

Answer 17

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.

Asteroid

Answer 18

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);

Denti

Answer 19

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 >

Selfsupporting

Answer 20

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>

Handwoven

Answer 21

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

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

Indent

Answer 22

use app:buttonTint instead of android:buttonTint like this:

 <com.google.android.material.radiobutton.MaterialRadioButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="English"
        android:checked="true"
        app:buttonTint="#FF0000"
        android:textAppearance="@style/TextAppearance.Material3.TitleSmall"
        android:layout_marginHorizontal="16dp"
        android:layoutDirection="rtl"
        />

or

<RadioButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="English"
    android:checked="true"
    app:buttonTint="#FF0000"
    android:textAppearance="@style/TextAppearance.Material3.TitleSmall"
    android:layout_marginHorizontal="16dp"
    android:layoutDirection="rtl"
    />

Bleareyed

Answer 23

For different colors according to checked and unchecked states please try this -

Create a color resource file @color/radio_button -

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

And then use it like this -

<androidx.appcompat.widget.AppCompatRadioButton
    android:id="@+id/radio_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/radio_button" />

**Remember to replace android:buttonTint with app:buttonTint if you are using Theme.Material3.DayNight

Ameba

Answer 24

This kotlin Extension

fun RadioButton.setLangRadioColor(isCheck: Boolean) {

    val color = if (isCheck) {
        intArrayOf(
            ContextCompat.getColor(rootView.context, R.color.light_red),
            ContextCompat.getColor(rootView.context, R.color.light_red)
        )
    } else {
        intArrayOf(
            ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor),
            ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor)
        )
    }

    val colorStateList = ColorStateList(
        arrayOf(
            intArrayOf(-android.R.attr.state_enabled), // disabled
            intArrayOf(android.R.attr.state_enabled)  // enabled
        ),
        color
    )
    this.buttonTintList = colorStateList
}

Sock

Answer 25

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>

Sulphonamide

android:buttonTint accept only colours – Isopropanol

Answer 26

If you have android:buttonTint it wont work and you have to change it to app:buttonTint. I had to do this after uprading to androidx.

Accompanist

Answer 27

@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.

Auspex

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 – Killick

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