How to change background resource of an image button to implement on/off switch

Question

I have two power button images, one red and the other is green. I want to create a button set its background resource to red power button initially. I want its resource to be changed to green when it is pressed & after another click, i want it to turn back into red again. Please Help...

Please refer this : http://stackoverflow.com/questions/11499574/toggle-button-using-two-image-on-different-state/11499595#11499595 — AkashG, Mar 28 '13 at 06:25

score 1 · Answer 1 · answered Mar 28 '13 at 06:26

1

use ToggleButton. numerous examples available like here.

answered Mar 28 '13 at 06:26

Shailendra Singh Rajawat

8,172
3
35
40

David Manpearl · Answer 2 · 2013-03-28T17:48:38.867

How to Make a Toggle Button with Custom On/Off Graphics

Use a CheckBox with a custom selector.

This will provide the ability to switch between checked and unchecked images for enabled and disabled states without any programmatic intervention in Java code.

Example - XML layout:

<CheckBox
    android:id="@+id/my_custom_toggle"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:button="@drawable/my_selector"
/>

Example - drawable/my_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_checked="true"
    android:state_enabled="false"
    android:drawable="@drawable/ic_button_custom_toggle_disabled"
    />
<item
    android:state_checked="false"
    android:state_enabled="false"
    android:drawable="@drawable/ic_button_custom_toggle_disabled"
    />
<item
    android:state_checked="true"
    android:drawable="@drawable/ic_button_custom_toggle_linked"
    />
<item
    android:state_checked="false"
    android:drawable="@drawable/ic_button_custom_toggle_unlinked"
    />

Add custom .png images for each of the above states.

score 1 · Accepted Answer · answered Mar 28 '13 at 06:40

Do this:

<ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/check"   //check.xml
        android:layout_margin="10dp"
        android:textOn=""
        android:textOff=""
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true"/>

create check.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
        android:state_checked="false"/>

 </selector>

This works perfectly fine.

score 0 · Answer 4 · answered Mar 28 '13 at 06:36

you need to place two images red and green in drawable folders.

static int set = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ImageButton toggle = (ImageButton) findViewById(R.id.imageButton1);

    toggle.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {

            if(set==0)
            {
                toggle.setBackgroundResource(R.drawable.red);
                set=1;
            }
            else
            {
                toggle.setBackgroundResource(R.drawable.green);
                set=0;
            }

        }
    });
}

How to change background resource of an image button to implement on/off switch

4 Answers4

How to Make a Toggle Button with Custom On/Off Graphics