Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RadioButton is leaving black checked circle after unchecking

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>
like image 672
DIRTY DAVE Avatar asked May 11 '20 20:05

DIRTY DAVE


People also ask

How do I know if a radio button is checked?

Get the checked property of the radio button. If the checked property is true, the radio button is checked; otherwise, it is not. To know which radio button is checked, you use the value attribute. For example:

How to change color of radio button's unchecked and checked state?

You can change the color of radio button's unchecked and checked state by using style in XML. You can set the desired colors in this style. Show activity on this post.

How do I uncheck a radio button in jQuery?

Using JavaScript In plain JavaScript, you can use the querySelector () method to return the selected radio button and set its checked property to false. That’s all about unchecking a radio button in JavaScript and jQuery.

How to find the selected radio button in a group?

In a group, you can only select one radio button. To find the selected radio button, you use these steps: Select radio buttons by using DOM methods such as querySelectorAll () method. Get the checked property of the radio button.


2 Answers

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

like image 180
mdroid Avatar answered Nov 09 '22 03:11

mdroid


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.

like image 20
Pavlo Ostasha Avatar answered Nov 09 '22 03:11

Pavlo Ostasha