Change the circle color of radio button
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.
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
}
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.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="@color/Color" />
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.