Change the circle color of radio button
AndroidAndroid RadiobuttonAndroid Problem Overview
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.
Android Solutions
Solution 1 - Android
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 - Android
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>
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
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="@color/Color" />
Solution 4 - Android
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 - Android
-
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
.
Solution 6 - Android
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" />
Solution 7 - Android
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.
Solution 8 - Android
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
!
Solution 9 - Android
Set the buttonTint
property. For example, android:buttonTint="#99FF33"
.
Solution 10 - Android
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.
Solution 11 - Android
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.
Solution 12 - Android
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>
Solution 13 - Android
There is an XML attribute for it:
android:buttonTint="yourcolor"
Solution 14 - Android
<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.
Solution 15 - Android
Just use the android:buttonTint="@color/colorPrimary"
attribute on the <RadioButton> tag.
Solution 16 - Android
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.
Solution 17 - Android
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 >
Solution 18 - Android
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>
Solution 19 - Android
To change the radio button color programmatically you can use following:
yourradio button name.buttonDrawable?.setColorFilter(Color.parseColor( color_value), PorterDuff.Mode.SRC_ATOP)
Solution 20 - Android
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);
Solution 21 - Android
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>
Solution 22 - Android
@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.