Change the image background of the button on clicked and bring it to original state when clicked again

Question

I have a array of buttons in my class as below :

private static final int[] idArray = {R.id.bt0,R.id.bt1,R.id.bt2,R.id.bt3,R.id.bt4,R.id.bt5,R.id.bt6,R.id.bt7,R.id.bt8,R.id.bt9,R.id.bt10,R.id.bt11,R.id.bt12,R.id.bt13,R.id.bt14,R.id.bt15,R.id.bt16,R.id.bt17,R.id.bt18,R.id.bt19,R.id.bt20,R.id.bt21,R.id.bt22,R.id.bt23,R.id.bt24,R.id.bt25,R.id.bt26,R.id.bt27,R.id.bt28,R.id.bt29};
private Button[] bt = new Button[idArray.length];

and have added an image background in my xml as below:

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

<item android:drawable="@drawable/btnew2"    android:state_selected="true"></item>
<item android:drawable="@drawable/btnew1" android:state_pressed="true"></item>
<item android:drawable="@drawable/btnew"></item>    
  </selector>

Now, when i press a button the background image is changed (btnew1.gif) and is back to normal when released. I want the color to be changed (it will be a different image, btnew2.gif) when a button is clicked and should return to original color (btnew.gif) when clicked again.

something like state_clicked if something is there like that.

PS: I checked other answers here, but most of them were color changers in java class only and what i am looking for the background image to change(to btnew2.gif) when clicked and be back to original image (btnew.gif) when clicked again.

please suggest suitable solution.

You can do it programatically, but wouldn't it make more sense using a `ToggleButton`? — Niels Masdorp, Mar 05 '16 at 17:18
Yes as Niels said it would make more sense using design modified `ToggleButton`. check out this one http://stackoverflow.com/questions/18335239/android-toggle-button-custom-look — Omkar, Mar 05 '16 at 17:23
actually i have also set a `TextView` onClick of that button which shows and hides after a few seconds. Is that possible using `ToggleButton` ? — amit, Mar 05 '16 at 17:38
Yes, it is:ToggleButton is-a TextView so it has all the methods of TextView (setOnClickListener is actually from View). I posted a simple sample of usage. — Gil Vegliach, Mar 05 '16 at 17:58
I used a ToggleButton as suggested, but the text on toggle button is showing as ON and OFF whereas my setting of the text is not showing. Toggle Button.setText(null) is not working too.. how to turn off the toggle button text ON and OFF — amit, Mar 06 '16 at 09:21

Randheer · Answer 1 · 2016-11-25T07:56:15.923

0

You can do it by making your own custom button.

Class MyButton extends Button implememts OnClickListener{

Public MyButton(....){
......
this.setOnClickListener(this);
}


@override
Public void onClick(....){
....toogle bg for this button.....

}

}

This is not the exact code....but an abstract idea how you can do it.

edited Nov 25 '16 at 07:56

answered Mar 05 '16 at 17:28

Randheer

984
6
24

Gil Vegliach · Answer 2 · 2016-03-05T18:02:06.750

As Niels Masdorp mentioned, you can do it with ToggleButton.

This works because there is a state identifier called state_checkable, similar to state_clickable, which works together with the Checkable interface. ToggleButton implements this interface. You can also create your own widgets implementing this interface, for example extending CompoundButton (abstract).

Example

Use the button in xml:

<ToggleButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/toggle_bg"
    android:textOn="On"
    android:textOff="Off"/>

Define the background in xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/red" android:state_checked="true"/>
    <item android:drawable="@color/blue"/>
</selector>

Change the image background of the button on clicked and bring it to original state when clicked again

2 Answers2