Question

I am trying to create a button that has a default image, but when it is pressed it switches to a new image. I have used this tutorial along with this question but it will not work.

This is my info_button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- focused -->
    <item android:drawable="@drawable/ic_menu_info_details" /> <!-- default -->
</selector>

This is the code with my ImageButton:

                <ImageButton
                    android:id="@+id/apModeInfoButton"
                    android:layout_width="0dip"
                    android:background="@null"
                    android:layout_height="match_parent"
                    android:layout_weight="1.15"
                    android:clickable="true"
                    android:src="@drawable/info_button_selector" />

The button stays at the initial state looking like ic_menu_info_details the entire time.

I changed my info_button_selector.xml file to this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- focused -->
    <item android:drawable="@drawable/ic_menu_info_details2" /> <!-- default -->
</selector>

The ic_menu_info_details2 image was the displayed the entire time, which is expected. This shows that the button IS using the XML file as its drawable resource, but why is it that the button does not change its image when pressed?

EDIT

Using Joss’s answer below, the image still does not change, and is now stretched in a strange way. Note: Both images are exactly the same except the second image is scaled to be 60% the size. This might mean that it is working but I cannot tell as the view is stretched.

                <ImageButton
                    android:id="@+id/apModeInfoButton"
                    android:layout_width="0dip"
                    android:layout_height="match_parent"
                    android:layout_weight="1.15"
                    android:clickable="true"
                    android:background="@drawable/info_button_selector" />

I used both of these versions of the XML file as well as different combinations of the images, all of the combinations resulted in the same sized image never changing.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/ic_menu_info_details" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/ic_menu_info_details" /> <!-- focused -->
    <item android:drawable="@drawable/ic_menu_info_details" /> <!-- default -->
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/ic_menu_info_details2" /> <!-- focused -->
    <item android:drawable="@drawable/ic_menu_info_details2" /> <!-- default -->
</selector>

Answer 1

Set that drawable to the ImageButton background rather than the src.

 <ImageButton
          android:id="@+id/apModeInfoButton"
          android:layout_width="0dip"
          android:background="@drawable/info_button_selector"
          android:layout_height="match_parent"
          android:layout_weight="1.15"
          android:clickable="true" />

Edit to follow up the distortion problem:

Well what you can do is to have the layers separate.

Because the background is stretchable, set this to the BACKGROUND and separate the image which shouldn’t stretch and set this to the SRC.

<ImageButton
         android:id="@+id/apModeInfoButton"
         android:layout_width="0dip"
         android:src="@drawable/non_scaleable_image"
         android:background="@drawable/gradient_bg"
         android:layout_height="match_parent"
         android:layout_weight="1.15"
         android:clickable="true" />

This way, you could have a background as a gradient and have it stretch without loosing quality, and the SRC image would not resize and distort.

That is really what an ImageButton should be used for.

Alternatively, do what I suggested in the first answer, but use a Button instead. Let me know if this helps.