skip to Main Content

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:

  1. Binding.saves.image ="drawable1" etc. but not sure how to change binding.saves.text to an image
  2. 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.?

2

Answers


  1. 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
    
    Login or Signup to reply.
  2. 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)
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search