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: heliodorj.blogspot.in/2009/04/…– Android DeveloperJun 15, 2013 at 4: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_12Jun 15, 2013 at 5:12
22 Answers
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
}
-
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);
wherecontrol
is the control you want to change the tint andcolor
is an integer value of the color you want e.g.R.color.red
Nov 19, 2015 at 10:54 -
1@JorgeArimany For a RadioButton, is it getButtonDrawable or getCompoundDrawables? getCompoundDrawables returns a List Nov 19, 2015 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 Nov 19, 2015 at 15:26
-
4@JorgeArimany I got it working for > 21 already.. I am looking for answers specifically for < 21 Nov 20, 2015 at 8:40
-
3To change the color of a checked button you can add or replace a state with
android.R.attr.state_checked
and add the color.– 6rchidFeb 10, 2020 at 18:24
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.
-
10This answer should be the accepted one. If you want to add this support radio button through xml, use
<android.support.v7.widget.AppCompatRadioButton ../>
Jan 18, 2016 at 10:40 -
22
setSupportButtonTintList
is a private method you are not intended to use. The radio buttons will behave oddly on certain versions of Android. Instead, useCompoundButtonCompat.setButtonTintList(rb, colorStateList)
. Mar 18, 2016 at 21:00 -
2@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 Apr 11, 2016 at 13:21
-
1I am on API 16. I add the AppCompat Radio buttons as listed above, however it is still not displaying correctly.– tccpg288May 21, 2016 at 14:52
-
1you don't need any code, see IgorOliveira's answer. Works for all versions. May 16, 2017 at 11:35
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="@color/Color" />
-
11This is the answer for pre, current, and post lollypop devices!! Great Jul 12, 2016 at 19:23
-
1This should be the accepted answer. Short and perfect. NOTE: use app:buttonTint="@color/Color" but not andoid:buttonTint="@color/Color" ! May 16, 2017 at 11:33
-
-
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). Jul 21, 2021 at 20:52
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) May 21, 2016 at 5:49
-
-
My mistake, does it matter if I use the regular RadioButton or the AppCompat RadioButton?– tccpg288May 21, 2016 at 14:28
-
1It 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));– tccpg288May 21, 2016 at 14:39
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
.
-
4This should be accepted as an answer, it works on all versions and it is cleanest Sep 6, 2019 at 10:30
-
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. Feb 18, 2020 at 20:12 -
This is a better solution when you are starting to consider light and dark themes Jul 25, 2021 at 13:50
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– ChiskoMay 9, 2019 at 19:04
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.
-
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.– BevorDec 9, 2017 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.– JauraMar 29, 2018 at 6:44
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
!
Set the buttonTint
property. For example, android:buttonTint="#99FF33"
.
-
9
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.
-
1That last line saves me. It's needed to add that transparency background else it will just paint all the drawable.– SkyleOct 21, 2021 at 21:52
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>
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.
There is an XML attribute for it:
android:buttonTint="yourcolor"
-
-
1you can use this for backward compatibility: app:buttonTint="your_color" Nov 24, 2018 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– ChiskoMay 9, 2019 at 19:03
<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.
-
1
Just use the android:buttonTint="@color/colorPrimary"
attribute on the <RadioButton> tag.
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.
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);
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 >
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>
To change the radio button color programmatically you can use following:
yourradio button name.buttonDrawable?.setColorFilter(Color.parseColor( color_value), PorterDuff.Mode.SRC_ATOP)
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>
-
1
@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.
-
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 Mar 25, 2016 at 7:17
-
My answer is change the app's basic color and of course it can change radiobutton's color to white.– IturboApr 1, 2016 at 6:58