Change color of Radiobutton image drawable when clicked/pressed

Question

I have a radio button that has both text and a image. I am trying to change the color of the image when the button is clicked by applying a color on top of it like a tint. I tried using android:state_checked="true" but it doesn't allow me to apply color on top of the image.

I also tried to do it programmatically with:

RadioButton radioButtonShare= (RadioButton) findViewById(R.id.image_share);
radioButtonShare.getButtonDrawable().setColorFilter(getResources().getColor(R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP);

But it crashes with nullpointexception...

java.lang.NullPointerException: Attempt to invoke virtual method 'void android.graphics.drawable.Drawable.setColorFilter(int, android.graphics.PorterDuff$Mode)' on a null object reference

Kindly assist

RadioButton

<RadioButton
 android:id="@+id/image_share"
 style="@style/style_radiobutton"
 android:layout_height="match_parent"
 android:drawableTop="@drawable/selector_image_share"
 android:text="@string/edit_share" />

@drawable/selector_image_share

<item android:drawable="@drawable/viewer_ic_share" android:state_checked="true" />
<item android:drawable="@drawable/viewer_ic_share" android:state_pressed="true" />
<item android:drawable="@drawable/viewer_ic_share" />

Answer 1

I think below code help you:

Paste below code in your style.xml file

style.xml

<style name="radionbutton"
    parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:button">@android:color/transparent</item>
    <item name="android:drawableTop">@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>

Create radiobutton_drawable.xml file in your drawable folder and Paste below code in radiobutton_drawable.xml file.

radiobutton_drawable.xml

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

Paste below code in activity_main.xml file.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    >

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radio2"
            style="@style/radionbutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="male" />

        <RadioButton
            style="@style/radionbutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/radio2`enter code here`"
            android:text="female" />
    </RadioGroup>
</RelativeLayout>