Android: Specify two different images for togglebutton using XML

Question

Hi folks,

I'm attempting to override the default ToggleButton appearance. Here's the XML that defines the ToggleButton:

<ToggleButton android:id="@+id/FollowAndCenterButton"
        android:layout_width="30px"
        android:layout_height="30px"
        android:textOn="" android:textOff="" android:layout_alignParentLeft="true"
        android:layout_marginLeft="5px"
        android:layout_marginTop="5px" android:background="@drawable/locate_me"/>

Now, we have two 30 x 30 icons we want to use for the clicked/non clicked states. Right now we have code that programmatically changes the background icon depending on the state:

centeredOnLocation.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            if (centeredOnLocation.isChecked()) {
                centeredOnLocation.setBackgroundDrawable(getResources().getDrawable(R.drawable.locate_me_on));
            } else {
                centeredOnLocation.setBackgroundDrawable(getResources().getDrawable(R.drawable.locate_me));
            }
        }
});

Obviously I'm looking for a better way to do this. I tried to make a selector for the background image, which would automatically switch between the states:

 <selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
 <item android:drawable="@drawable/locate_me" /> <!-- default -->
 <item android:state_checked="true"
       android:drawable="@drawable/locate_me_on" /> <!-- pressed -->
 <item android:state_checked="false"
       android:drawable="@drawable/locate_me" /> <!-- unchecked -->

But this does not work; reading the ToggleButton api (http://developer.android.com/reference/android/widget/ToggleButton.html), it appears that the only inherited xml attributes are

    XML Attributes
Attribute Name  Related Method  Description
android:disabledAlpha       The alpha to apply to the indicator when disabled. 
android:textOff         The text for the button when it is not checked. 
android:textOn      The text for the button when it is checked. 

There does not seem to be the android:state_checked attribute, despite the class having the method isChecked() and setChecked().

So, is there a way to do what I want in XML, or am I stuck with my messy workaround?

Answer 1

Your code is fine, but it seems that you must declare the default item of selector last, after all other stateful declarations:

<selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <item android:state_checked="true"
        android:drawable="@drawable/locate_me_on" /> <!-- pressed -->
    <item android:drawable="@drawable/locate_me" /> <!-- default/unchecked -->
</selector>