How to change the image button background upon clicking?

Question

I have an image button as a on/off button, i want to change the source image of it upon clicking to switch between on and off, all i have to do is to place a comparison in my click listener and a switch operation, the switch goes fine, the problem here is with the comparison, i tried like million ways and all didn't work,

for example i tried:

public void onClick(View v) {

        if (v == power) {

             Drawable fDraw = power.getBackground();
             Drawable sDraw = getResources().getDrawable(R.drawable.acoffdormant);

             Bitmap bitmap = ((BitmapDrawable)fDraw).getBitmap();
             Bitmap bitmap2 = ((BitmapDrawable)sDraw).getBitmap();

            if (bitmap == bitmap2) {
                power.invalidateDrawable(getResources().getDrawable(R.drawable.acoffdormant));
                power.setImageResource(R.drawable.acondormant);
            } else {
                power.invalidateDrawable(getResources().getDrawable(R.drawable.acondormant));
                power.setImageResource(R.drawable.acoffdormant);
            }
        }

    }
};

And also:

if (getResources().getDrawable(R.drawable.acoffdormant).hashCode() == power.getBackground().hashCode())

And Also:

v.getBackground().getConstantState().equals(getResources().getDrawable(R.drawable.acoffdormant).getConstantState())

And Also :

                Drawable state = power.getBackground();
                Bitmap statebit = ((BitmapDrawable)state).getBitmap();
                Bitmap off = BitmapFactory.decodeResource(power.getResources(),
                        R.drawable.acoffdormant);

                if (statebit == off) {
                    power.invalidateDrawable(getResources().getDrawable(R.drawable.acoffdormant));
                    power.setImageResource(R.drawable.acondormant);
                } else {
                    power.invalidateDrawable(getResources().getDrawable(R.drawable.acondormant));
                    power.setImageResource(R.drawable.ac_fan);
                }

And Also:

        if (power.getBackground().getConstantState().equals
                (getResources().getDrawable(R.drawable.acoffdormant).getConstantState()))

And my XML :

    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="vertical" >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginBottom="10dp"
                            android:layout_marginTop="20dp"
                            android:background="@android:color/transparent"
                            android:text="@string/power"
                            android:textColor="#00CCCC"
                            android:textSize="20dp"
                            android:textStyle="bold" />

                        <ImageButton
                            android:id="@+id/power"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:adjustViewBounds="true"
                            android:background="@android:color/transparent"
                            android:scaleType="centerInside"
                            android:src="@drawable/acoffdormant" />
</LinearLayout>

see this http://stackoverflow.com/questions/4526585/imageview-drawable-id-in-android — Shayan Pourvatan, Dec 03 '13 at 11:33
You don't need to mess around with Bitmaps. setImageResource() alone will do the job. — Andrew Fielden, Dec 03 '13 at 11:50

score 2 · Answer 1 · edited Dec 03 '13 at 11:33

You can use selector in order to change image button / button dynamically

Selector.xml

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

Or you can to set visibilty to GONE / VISIBLE on click of a button

score 2 · Answer 2 · answered Dec 03 '13 at 11:43

Use one flag variable like this,

    boolean flag = false; 

    public void onClick(View v) {

    if(v == power) {

        if (boolean) {
            power.setImageResource(R.drawable.acondormant);
            boolean = false;
        } else {
            power.setImageResource(R.drawable.acoffdormant);
            boolean = true;
        }

   }
};

Viswanath Lekshmanan · Answer 3 · 2013-12-03T11:38:59.910

1

Have you tried :

power.setBackgroundResource(R.drawable.yourResource)

Also remove the background resource from xml

remove android:src="@drawable/acoffdormant"

Instead Set

power.setBackgroundResource(R.drawable.acoffdormant) //in oncreate

edited Dec 03 '13 at 11:38

answered Dec 03 '13 at 11:30

Viswanath Lekshmanan

9,945
1
40
64

yea also i tried that before, at all it keeps the old pic and makes the new one under it – MRefaat Dec 03 '13 at 11:37
remove the background resource from xml , if you set so – Viswanath Lekshmanan Dec 03 '13 at 11:39

Hariharan · Accepted Answer · 2013-12-03T11:43:17.913

You can use the tag attribute available for imageButton..

By default in your xml give the tag as off..

<ImageButton
                            android:id="@+id/power"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:adjustViewBounds="true"
                            android:background="@android:color/transparent"
                            android:scaleType="centerInside"
                            android:src="@drawable/acoffdormant"
                            android:tag="off" />

Then on button click:

public void onClick(View v) {

String tag = power.getTag().toString().trim();

if(tag.equals("off"))
{
    power.setImageResource(R.drawable.acondormant);
    power.setTag("on");
}
else if(tag.equals("on"))
{
    power.setImageResource(R.drawable.acoffdormant);
    power.setTag("off");
}


    }
};

score 1 · Answer 5 · answered Dec 03 '13 at 11:37

There are two ways of doing this.

B_cancelSearch.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:

        v.setBackgroundResource(R.drawable.button_pressed);

        break;
    case MotionEvent.ACTION_UP: {

        v.setBackgroundResource(R.drawable.button_normal);

    }
        break;
    }
    return false;
    }

});

And the other is by using a drawable selector as AndroidHacker mentioned in his answer.

score 0 · Answer 6 · answered Dec 03 '13 at 11:32

0

All you need to do is call invalidate():

power.invalidate();

or

power.postInvalidate();

after the if-else block just near the end of the method.

answered Dec 03 '13 at 11:32

Amulya Khare

7,718
2
23
38

it works just great in comparison but it changes the image without removing the original resource image, so it gives me a combined images – MRefaat Dec 03 '13 at 12:02

How to change the image button background upon clicking?

6 Answers6