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!

ziselos · Accepted Answer · 2020-12-14 18:47:22Z

2

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()

        }

edited Dec 14, 2020 at 18:47

answered Dec 13, 2020 at 23:16

ziselos

5447 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maryam Wael Over a year ago

This will work only once when the button is enabled. After that, the button will not work because it is not enabled. I would like it to change the pic every time it is clicked. Similar to the "like" button on Facebook or Instagram.

ziselos Over a year ago

@Maryam Wael Please check my updated answer. If you try the code you can see that works just fine and make that you want. The colors are random and i add a toast message to see that actually works.

Maryam Wael Over a year ago

Works perfectly. Thanks!

Azizjon Kholmatov Over a year ago

AppCompatButton did the trick for me. I was using Button instead of that.

Collectives™ on Stack Overflow

android - Custom Button (using selector file) not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related