Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the circle color of radio button

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:

Colored Android Radio Button

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:

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

This one is tested on 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.