How do I change binding on button click to different drawable icon

Question

I have a "save" option on my CardLayout, where a user can click "save" and it saves into another fragment.

When clicking "save", it should change the drawable icon "heart" to another drawable. At the moment, I have successfully changed the text when clicking "save" (shown below), but I'm not sure how to change a drawable.

            binding.saves.setOnClickListener {
                val exist = dbHandler.getTask(task.id)
                if(exist) {
                    Toast.makeText(itemView.context, "Activity removed", Toast.LENGTH_SHORT)
                        .show()
                    binding.saves.text ="Save"
                    dbHandler.deleteFavorite(task);
                }else{
                    Toast.makeText(itemView.context, "Activity added", Toast.LENGTH_SHORT)
                        .show()
                    dbHandler.addFavorite(task);
                    binding.saves.text ="Saved"
                }
            }

binding.saves.text ="Saved" changes my android:text="@string/save" in XML below.

My XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="0dp"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="0dp"
    app:cardElevation="0dp"
    app:cardMaxElevation="3dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    tools:context="ui.CardLayout">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >


        <TextView
            android:id="@+id/idActivityName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="14dp"
            android:layout_marginRight="10dp"
            android:text="@string/placeholdertasktitle"
            android:textColor="@color/black"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/idActivityDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idActivityName"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="30dp"
            android:drawablePadding="2dp"
            android:text="@string/activitydescription"
            android:textColor="@color/black"
            android:textSize="15sp"
            tools:ignore="UnknownId" />


        <View
            android:id="@+id/divider"
            android:layout_width="380dp"
            android:layout_height="2dp"
            android:layout_below="@id/idActivityDescription"
            android:layout_alignStart="@id/idActivityName"
            android:layout_centerHorizontal="false"
            android:layout_centerVertical="false"
            android:background="#EDEDED" />

        <LinearLayout
            android:id="@+id/linLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/divider"
            android:layout_alignStart="@+id/divider"
            android:layout_alignEnd="@+id/divider"
            android:gravity="center"
            android:orientation="horizontal">


            <Button
                android:id="@+id/saves"
                style="@style/cardbutton"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:background="@drawable/cardbutton"
                android:contentDescription="@string/saves"
                android:stateListAnimator="@null"
                android:text="@string/save"
                android:textAlignment="center"
                android:textColor="#595959"
                android:textSize="12sp"
                app:icon="@drawable/ic_saves_blank"
                app:iconGravity="start"
                app:iconTint="#595959" />

            <Button
                android:id="@+id/calendar"
                style="@style/cardbutton"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:background="@drawable/cardbutton"
                android:contentDescription="@string/saves"
                android:stateListAnimator="@null"
                android:text="@string/calendar"
                android:textAlignment="center"
                android:textColor="#595959"
                android:textSize="12sp"
                app:icon="@drawable/ic_calendar"
                app:iconTint="#595959"
                app:iconGravity="start"/>

            <Button
                android:id="@+id/copyactivity"
                style="@style/cardbutton"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:background="@drawable/cardbutton"
                android:contentDescription="@string/saves"
                android:stateListAnimator="@null"
                android:text="@string/copy"
                android:textAlignment="center"
                android:textColor="#595959"
                android:textSize="12sp"
                app:icon="@drawable/ic_copytext"
                app:iconGravity="start"
                app:iconTint="#595959" />
        </LinearLayout>

    </RelativeLayout>
</androidx.cardview.widget.CardView>

What I have tried:

Binding.saves.image ="drawable1" etc. but not sure how to change binding.saves.text to an image
Changing "Button" to "ImageButton" and using "state selected" etc.

Do I need to change my "button" to "ImageButton" and do it this way? Is there a way to change just the icon and not the text in binding.?

Does this answer your question? [How set background drawable programmatically in Android](https://stackoverflow.com/questions/12523005/how-set-background-drawable-programmatically-in-android) — sweak, Jul 27 '22 at 18:54

score 0 · Answer 1 · answered Jul 28 '22 at 19:14

in this case only to change the button when clicked,

you can create 2 button (save & saved)

#note : use materialButton to create text and icon inside the same button.

after that, you can implement this code and change it to your needs

                        btn_save.setOnClickListener {
                        if (btn_save.visibility == View.VISIBLE) {
                            btn_save.visibility = View.GONE
                            btn_saved.visibility = View.VISIBLE
                            btn_save.drawable
                        } else {
                            btn_saved.visibility = View.GONE
                            btn_save.visibility = View.VISIBLE
                            btn_save.drawable


                        btn_saved.setOnClickListener {
                        if (btn_saved.visibility == View.VISIBLE) {
                            btn_save.visibility = View.VISIBLE
                            btn_saved.visibility = View.GONE
                            btn_saved.drawable
                        } else {
                            btn_saved.visibility = View.VISIBLE
                            btn_save.visibility = View.GONE
                            btn_saved.drawable

score 0 · Answer 2 · answered Aug 03 '22 at 05:32

0

You can change the button icon to another drawable reference if you change the Button to the new MaterialButton in the XML.

After that, when you need to change the icon:

binding.saves.setIconResource(R.drawable.heart)

answered Aug 03 '22 at 05:32

Abdullah Z Khan

1,272
1
8
18

How do I change binding on button click to different drawable icon

2 Answers2