RadioButton is leaving black checked circle after unchecking

Question

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>

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>

Did you try to remove android:background attribute from your RadioButton and test it? Please, provide device model. — Николай Гольцев, May 11 '20 at 20:39
Yes I removed the background attribute and it still has it. Samsung galaxy note3. — DIRTY DAVE, May 11 '20 at 20:42
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. — Николай Гольцев, May 11 '20 at 21:30
try to give ids for every `RadioButton` like for example `android:id="@+id/one"` , `android:id="@+id/two"` — Mohammed Alaa, May 18 '20 at 20:34
Check this :- It will help https://stackoverflow.com/a/34513545/9523118 — Krishna Sony, May 20 '20 at 15:02

score 2 · Answer 1 · answered May 14 '20 at 10:53

2

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

answered May 14 '20 at 10:53

mdroid

474
3
15

Hey Dave, Hav you tried this? This is working for me. – mdroid Jun 30 '20 at 09:19

score 1 · Answer 2 · answered May 14 '20 at 10:26

1

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.

answered May 14 '20 at 10:26

Pavlo Ostasha

14,527
11
35

Could you please expand your question with code of your selector, theme and java code. Use Button attribute instead of background. – Pavlo Ostasha May 14 '20 at 10:59
No java code only XML, added selector and theme above. – DIRTY DAVE May 14 '20 at 12:10

score 0 · Answer 3 · answered May 20 '20 at 01:40

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

RadioButton is leaving black checked circle after unchecking

3 Answers3