Change color of a radio button

Question

I am developing an quiz based app. There will be 1 question and 4 option(radio buttons). If user select any wrong answer then I want to turn that radio button color to Red. How to do this?

Answer 1

Just came to show something that really help me with this:

Everyone talks about how to use the tint and how to use the colorAccent, but, this wont work on phones with API less than 21.

So, the real fix on this or at least what helped me was to use android.support.v7.widget.AppCompatRadioButton instead of RadioButton

With this on your layout, you can use: app:buttonTint="@color/yourColor"

without getting warnings or problems about the compat of the view.

And, don't you forget about adding:

xmlns:app="http://schemas.android.com/apk/res-auto"

to your layout parent or to your widget.

Edit:

@aselims mention on a comment that there's not buttonTintin the app namespace.

So... here's my current style for this solution:

<style name="MRadioButton.Purple" parent="Widget.AppCompat.CompoundButton.RadioButton">
    <item name="colorAccent">@color/youColor</item>
    <item name="colorControlHighlight">@color/yourColor</item>
    <item name="android:colorPressedHighlight">@color/yourColor</item>
    <item name="colorPrimaryDark">@color/yourColor</item>
    <item name="colorPrimary">@color/yourColor</item>
    <item name="colorControlActivated">@color/yourColor</item>
</style>

Answer 2

The fastest thing to do is to set the buttonTint to your desired color:

 <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 put your color in this case a reddish one:

<color name="your_color">#e75748</color>

Result:

As @smashing pointed, this only will work on API level >= 21

Answer 3

To change RadioButton button colour programmatically, and works on api level < 21, should use AppCompatRadioButton instead of RadioButton:

(otherwise will warn setbuttontintlist requrie api level 21)

import android.support.v7.widget.AppCompatRadioButton;

AppCompatRadioButton radioButton = new AppCompatRadioButton(getActivity());
radioButton.setSupportButtonTintList(
        ContextCompat.getColorStateList(getActivity(),
        R.color.single_choice_state_list));

single_choice_state_list.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/single_choice_checked"></item>
    <item android:state_checked="false" android:color="@color/single_choice_unchecked"></item>
</selector>

Answer 4

This site is really good for customizing Android components in general: android-holo-colors

Just choose the radio button, make the color red, download and use it in your project!

Answer 5

Create a selector drawable for you radio button under drawable/radio_button.xml folder and mention all the required states for your radio button.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
 android:state_checked="true"
 android:state_window_focused="false"
 android:drawable="@drawable/radio_button_on" />
<item
 android:state_checked="false"
 android:state_window_focused="false"
 android:drawable="@drawable/radio_button_off" />
<item 
 android:state_checked="true" 
 android:state_pressed="true"
 android:drawable="@drawable/radio_button_on_pressed" />
<item
 android:state_checked="false" 
 android:state_pressed="true"
  android:drawable="@drawable/radio_button_off_pressed" />
<item
 android:state_checked="true"
  android:state_focused="true"
  android:drawable="@drawable/radio_button_on_selected" />
<item
  android:state_checked="false"
  android:state_focused="true"
  android:drawable="@drawable/radio_button_off_selected" />
<item
 android:state_checked="true"
 android:drawable="@drawable/radio_button_on" />
<item
 android:state_checked="false"
 android:drawable="@drawable/radio_button_off" />
</selector>

And specify android:button="@drawable/radio_button" for your radio button

Dont forget to add the corresponding images for different states of radio button.

Answer 6

//get radio button reference from layout
RadioButton raPrivate = (RadioButton) layout.findViewById(R.id.radioPrivate);
//parse textColor from string hex code
int textColor = Color.parseColor("#000000");
//set textcolor to radioButton
raPrivate.setButtonTintList(ColorStateList.valueOf(textColor));

u can only assing ColorStateList objets as color for the radioButton, if u use valueOf it will only use one color.

Hope this helps :>

Answer 7

You can perform a backwards compatible tint on the radio button

XML:

<android.support.v7.widget.AppCompatRadioButton
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/radioButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:buttonTint="@color/red"/>

Or java:

CompoundButton button = (CompoundButton) findViewById(R.id.radioButton);
CompoundButtonCompat.setButtonTintList(button, ContextCompat.getColorStateList(this, R.color.red));

Answer 8

Hope this helps..

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
       radioButton.setButtonTintList(ContextCompat.getColorStateList(mContext, R.color.colorGris));
    }else {//Do something if you have a lower version}

For me its working.

Answer 9

add these two properties in your style this you are using in the manifest with the activity

<item name="colorControlNormal">@color/grey</item> // for state released color
<item name="colorAccent">@color/blueLogo</item>  //for state pressed color 

Answer 10

For kotlin user

Create an extension

fun RadioButton.setCircleColor() {
    val colorStateList = ColorStateList(
        arrayOf(
            intArrayOf(-android.R.attr.state_checked), // unchecked
            intArrayOf(android.R.attr.state_checked)  // checked
        ), intArrayOf(
           Color.RED, // unchecked color
           Color.GREEN  // checked color
        )
    )

    // finally set button tint list
    buttonTintList = colorStateList

    // optionally tint mode or tint blend
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q){
        buttonTintBlendMode = BlendMode.SRC_IN
    }else{
        buttonTintMode = PorterDuff.Mode.SRC_IN
    }

    invalidate() // could not be necessary
}

Now call it

   radioButton.setCircleColor()

done

Answer 11

Create an image !like this and place it in your drawable folders.. call it by,

 RadioButton rb=(RadioButton) findViewById(R.id.radioButton1);
        rb.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                // TODO Auto-generated method stub
                rb.setButtonDrawable(R.drawable.'you image here');
            }
        });
    }