RadioButton is leaving black checked circle after unchecking

7
votes

My RadioButtons in my RadioGroup are leaving a black checked circle after I uncheck them or click on another RadioButton in the group. How do I prevent this from happening?

<RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Test"
            android:textAlignment="textStart"
            android:layoutDirection="rtl"
            android:layout_gravity="start"
            android:background="?android:selectableItemBackground"/>

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="textStart"
            android:layoutDirection="rtl"
            android:layout_gravity="start"
            android:background="?android:selectableItemBackground"/>

</RadioGroup>

enter image description here

Happens on my API 19 real device, not my API 27

Edit:_________________________________________________

Have tried using a custom selector which doesn't work

<RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/qrmenu_toolbar"
        android:orientation="vertical">

<RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Resume"
            android:layoutDirection="rtl"
            android:layout_gravity="start"
            android:drawablePadding="12dp"
            android:paddingStart="16dp"
            android:paddingTop="12dp"
            android:paddingEnd="16dp"
            android:paddingBottom="12dp"
            app:drawableLeftCompat="@drawable/ic_resume"
            android:button="@drawable/radiobutton_selector"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_checked" android:state_checked="true" />
    <item android:drawable="@drawable/radio_unchecked" android:state_checked="false" />
</selector>

Theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorBlack</item>
        <item name="colorPrimaryDark">@color/colorBlack</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Bump still can't find a solution

Edit:______________________________________

Have also tried using custom radio buttons.. still doesn't work:

<RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/custom_radio_button"/>

Custom RadioButton:

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/ic_radio_button_checked"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_radiobutton_unchecked"/>
</selector>
3
androidandroid-radiobuttonandroid-radiogroup
Did you try to remove android:background attribute from your RadioButton and test it? Please, provide device model. – Николай Гольцев
Yes I removed the background attribute and it still has it. Samsung galaxy note3. – DIRTY DAVE
I think you could try some manual clearing. Add listener to RadioGroup through setOnCheckedChangeListener and in it first clear current check through clearCheck and immediately after that set check item through check method. – Николай Гольцев
try to give ids for every RadioButton like for example android:id="@+id/one" , android:id="@+id/two" – Mohammed Alaa
Check this :- It will help stackoverflow.com/a/34513545/9523118 – Krishna Sony

3 Answers

2
votes

Remove the background from the radio button

android:background="?android:selectableItemBackground"

and use android:button="@drawable/radiobutton_selector"

Here is an example of a custom radio button in Android. please look into this. Maybe this help for you. http://www.apnatutorials.com/android/android-radiobutton-customization-and-usage.php?categoryId=2&subCategoryId=62&myPath=android/android-radiobutton-customization-and-usage.php

1
votes

Use MaterialRadioButton from support library(com.google.android.material). The problem may occur because of different implementation of RadioButton depending on API version in conjunction with themes and selectors. Usage of MaterialRadioButton will unify behaviour across the API versions.

Here is a small give for this component.

'com.google.android.material:material:1.0.0' dependency should be imported to the project and one of Material themes used for the app.

Hope it will help.

0
votes

You have to use buttonTint for this. 

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radioButton"
    android:buttonTint="@color/your_color"/>

Your radioButton should be like this. However this does not work before api 21 There is a solution here for before API 21 devices Change Circle color of radio button