android - Custom Button (using selector file) not working

Question

I am trying to create a "add to favorites" button.

The problem is that the drawable does not change unless I keep pressing the button. Once I release the button, it returns to the original drawable.

I followed this tutorial: https://www.youtube.com/watch?v=Nn4-Vn7qk9k but got a different result.

I created a res/drawable/custom_fav_button.xml file.

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

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

    <item
        android:drawable="@drawable/ic_baseline_favorite_border_24"/>

</selector>

and I am using it in an activity as shown below.

<Button
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/custom_fav_button"/>

Thanks in advance!

Answer 1

As you can see in the video, your code works fine and does what you say to do. Change only while you press it. If you want to change it after click you should add in your drawable xml

drawable_button_selector.xml

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

drawable_button_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <!-- color of the selected button -->
    <solid
        android:color="@color/purple_200"/>

</shape

drawable_button_unselected.xml

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


    <!-- unselected button background -->
    <solid
        android:color="@color/gray_dove_three" />

    <stroke
        android:color="@color/gray_martini"
        android:width="2dp"/>


</shape>

In your screen layout then you have

 <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:clickable="true"
        android:background="@drawable/drawable_button_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

After that of course you have to change button state depending on your requirements. For example just switch button state on click

 private fun initLayout() {
        button.setOnClickListener {
            it.isSelected = !it.isSelected
            Log.d("Click Me", "Button isSelected" + it.isSelected)
            Toast.makeText(this, "Button Clicked and isSelected = " + it.isSelected, Toast.LENGTH_SHORT).show()

        }