How to toggle only the background of a button and save the state (pressed or not)

Issue

I'm trying to make a survey app learning a bit about the FragmentContainerView and navigation graph. Everything works perfect when I use existing widgets such as radiobuttons or checkboxes for the answers.

The problem arises when I try to make my own widget or change the behavior of a normal button so that it behaves as seen in the following screenshot:

The behavior is similar to a ToggleButton but I don't want to change the text (on / off text). What I need is that when I click on the button, it is marked as selected (changing the background) and of course, I need to be able to ask the button if it is checked or not, later.

Using a Button and a custom selector, setting the button as checkable I can achieve the expected behavior.

The selector (btn_toggle_background.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--When Button is not enabled -->
    <item android:state_checked="false" android:color="#eeeeee" />
    <!--When Button is in pressed state -->
    <item android:state_checked="true" android:color="@color/blue_electric" />
    <!--When Button is in selected state -->
    <!--Default Background Color -->
    <item android:color="#eeeeee" />

</selector>

And in the XML Layout:

 <?xml version="1.0" encoding="utf-8"?>

 <Button
      android:id="@+id/button2"
      android:layout_width="match_parent"
      android:layout_height="60dp"
      android:backgroundTint="@drawable/btn_toggle_background" <!-- CUSTOM SELECTOR -->
      android:textColor="@drawable/btn_toggle_text" <!-- CUSTOM SELECTOR -->
      android:checkable="true" <!-- CHECKABLE HERE -->
      android:gravity="fill|fill_horizontal"
      android:text="A través de mi compañía de seguros"
      android:textAlignment="gravity"
      android:textAllCaps="false"
      app:icon="@android:drawable/btn_radio"
      app:iconTint="@drawable/btn_toggle_icon" <!-- CUSTOM SELECTOR --> />

But then the button no longer responds to the OnClick event anymore (I suspect it is for making it checkable). I assume it will respond to the OnCheckedChange event, but it is an event that does not fire a normal Button.

I have also tried extending a custom view from Button and intercepting the OnClick and sending the event through a custom listener (interface). In this case, the button behavior no longer works. It becomes a normal button and ignores the styles and selectors specified in the XML for the checked state.

Is there a widget that looks like what I need? Would extending from a ToggleButton be more appropriate?

Solution

You can use:

        <com.google.android.material.button.MaterialButton
            android:checkable="true"
            app:backgroundTint="@drawable/btn_toggle_background"
            .../>

with:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="#eeeeee" />
    <item android:state_checked="true" android:color="@color/...." android:alpha="xxx" />
</selector>

and the OnCheckedChangeListener:

    button.addOnCheckedChangeListener { button, isChecked ->
        if (isChecked){
            //
        }
    }

Use the method isChecked to know the status:

button.isChecked

Answered By - Gabriele Mariotti