How to make ImageButton behave as ToggleButton

Question

I want my Android button to have some properties:

1. Have Android HoloLight style
2. Behave as an ImageButton - have an image as its content, not text
3. Behave as a ToggleButton - toggle on/off status

So my codes currently look something like these:

My xml file:

<ImageButton
    android:id="@+id/button"
    style="@android:style/Widget.Holo.Light.Button.Toggle"
    android:layout_width="70px"
    android:layout_height="70px"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_margin="5dp"
    android:src="@drawable/icon" />

My java file:

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

    Button button = (ImageButton) findViewById(R.id.button);

    button.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.v(log, "button pressed");

            if (skillsButton.isSelected()) {
                Log.v(log, "button is unselected");
                button.setSelected(false);
            } else {
                Log.v(log, "button is selected");
                button.setSelected(true);
            }
        }
    });
}

As I run my code and click the button, I can see that my button has an image as its description, and looks like an Android HoloLight ToggleButton, but it does not turn on and off as I pressed it (the blue light does not turn on).

I can see that the isSelected() status of the button is changing on LogCat though.

Is there a solution to what I want?

Also, as far as I have tried, the "color" of an Android HoloLight themed button is fixed to light gray. Is there a way to change this color to another one, preferably white?

Answer 1

This is what I did so I can have 2 or 3 Buttons with images that toggle and are in a RadioGroup so only one can be selected at a time.

Make it a ToggleButton

<ToggleButton
android:id="@+id/button"
style="@android:style/CustomButton"   // Note the style
android:layout_width="70px"
android:layout_height="70px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp" />

Create a style that it references above in res/styles

<style name="CustomButton" parent="@android:style/Widget.CompoundButton">  // you can change the parent here depending on what you need
    <item name="android:background">@drawable/icon</item>
    <item name="android:textOff"></item>
    <item name="android:textOn"></item>
    //  add other properties if you need
</style>

In mine the @drawable/cold_button references a selector because it changes when pressed but your can simply be an image for the background

Answer 2

My recommendation is to provide tow drawable for your button. One for one state and one for off state that the "on" state drawable has a right side blue and "off" state button has a left side blue. After that you have to set OnTouchListener on your button like below:

@Override
public boolean onTouch(View v, MotionEvent event) {
    if(event.getAction()==MotionEvent.ACTION_DOWN){
        float x=event.getX();
        if(x<=v.getWidth()/2){
            v.setBackgroundResource(R.drawable.off);
            state=0;
        }else{
            v.setBackgroundResource(R.drawable.on);
            state=1;
        }
    }
    return false;
}