state_checked doesn't toggle imageview on and off

Question

Android Studio 2.0 preview

Hello,

I have this selector that is connected to an imageview. I want to toggle the imageview on and off. So off will display a green color and on will display a red color.

However, when I click the imageview nothing happens. I have tried different combinations of state_pressed and state_checked. And now its getting too confusing. What am I missing here.

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

    <item android:state_checked="true"
          android:drawable="@drawable/bottom_left_border_pressed">
    </item>
</selector>

Many thanks for any suggestions,

I thought that was what the selector was there for. When the imageview is checked for the first time it will be red to indicate on. And when clicked again it will turn green to indicate off. — ant2009, Nov 26 '15 at 15:29
Well, an ImageView isn't the View you want to use, then. Use a [CheckBox](http://developer.android.com/reference/android/widget/CheckBox.html), instead. You might want to customize its `button` drawable. Possible duplicate of: http://stackoverflow.com/questions/3192173/change-icons-of-checked-and-unchecked-for-checkbox-for-android — Phantômaxx, Nov 26 '15 at 15:35
Change it to ToggleButton. Refer to this: http://stackoverflow.com/questions/2716686/android-set-imagebutton-as-toggle — androidEnthusiast, Dec 06 '15 at 15:27
Android Studio wrongly gives `android:checked` autocomplete to `ImageView`. I've also wasted time. — Youngjae, Apr 16 '18 at 08:28

Igor Tyulkanov · Accepted Answer · 2015-12-04T03:09:00.613

However, when I click the imageview nothing happens.

So, as @Zielony said, the reason is simple: ImageView not supported checked states.

Each class extended from View supports different states: pressed, selected, focused, checkable (note that is not checked state) etc. But checked is special state. And only few Views support it: ToggleButton, Switch, RadioButton, CheckBox, CheckedTextView. They implemented Checkable interface.

You have variants how to solve your case, but it depends what exactly you need:

If you really want this simple thing

So off will display a green color and on will display a red color.

you can use CheckBox or CheckedTextView for example. Just create selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="<red_color>" android:state_checked="true" />
    <item android:drawable="<green_color>" />
</selector>

and use it

<CheckBox
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:text=""
    android:button="@null"
    android:clickable="true"
    android:background="<your_selector>"/>

Use other state. You can use state_activated (or state_selected but, be careful, because selected is transient property)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="<red_color>" android:state_activated="true" />
    <item android:drawable="<green_color>" />
</selector>

and toggle this state by code

<your_image_view>.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        <your_image_view>.setActivated(!<your_image_view>.isActivated());
    }
});

Write your own checkable class. You can see from other people how to do it:

Official android implementation from old Contacts application

public class CheckableImageView extends ImageView implements Checkable {
    private boolean mChecked;

    private static final int[] CHECKED_STATE_SET = {
        android.R.attr.state_checked
    };

    public CheckableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }
        return drawableState;
    }

    public void toggle() {
        setChecked(!mChecked);
    }

    public boolean isChecked() {
        return mChecked;
    }

    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mChecked = checked;
            refreshDrawableState();
        }
    }
}

Other implementation in MultiChoiceAdapter

Implementation with OnCheckedChangeListener and saved state, like CheckBox class and also this is the best implementation I've ever seen

public class CheckableImageView extends ImageView implements Checkable {

    private static final int[] checkedStateSet = { android.R.attr.state_checked };

    private boolean mChecked = false;
    private OnCheckedChangeListener mOnCheckedChangeListener;

    private boolean mBroadcasting;

    public CheckableImageView(Context context) {
        super(context);
    }

    public CheckableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CheckableImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean isChecked() {
        return mChecked;
    }

    @Override
    public boolean performClick() {
        toggle();
        return super.performClick();
    }

    @Override
    public void toggle() {
        setChecked(!mChecked);
    }

    @Override
    public int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, checkedStateSet);
        }
        return drawableState;
    }

    @Override
    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mChecked = checked;
            refreshDrawableState();

            // Avoid infinite recursions if setChecked() is called from a listener
            if (mBroadcasting) {
                return;
            }

            mBroadcasting = true;
            if (mOnCheckedChangeListener != null) {
                mOnCheckedChangeListener.onCheckedChanged(this, mChecked);
            }

            mBroadcasting = false;
        }
    }

    /**
     * Register a callback to be invoked when the checked state of this button
     * changes.
     *
     * @param listener the callback to call on checked state change
     */
    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeListener = listener;
    }

    /**
     * Interface definition for a callback to be invoked when the checked state
     * of a compound button changed.
     */
    public static interface OnCheckedChangeListener {
        /**
         * Called when the checked state of a compound button has changed.
         *
         * @param buttonView The compound button view whose state has changed.
         * @param isChecked  The new checked state of buttonView.
         */
        void onCheckedChanged(CheckableImageView buttonView, boolean isChecked);
    }

    static class SavedState extends BaseSavedState {
        boolean checked;

        /**
         * Constructor called from {@link CompoundButton#onSaveInstanceState()}
         */
        SavedState(Parcelable superState) {
            super(superState);
        }

        /**
         * Constructor called from {@link #CREATOR}
         */
        private SavedState(Parcel in) {
            super(in);
            checked = (Boolean) in.readValue(null);
        }

        @Override
        public void writeToParcel(Parcel out, int flags) {
            super.writeToParcel(out, flags);
            out.writeValue(checked);
        }

        @Override
        public String toString() {
            return "CheckableImageView.SavedState{" + Integer.toHexString(System.identityHashCode(this)) + " checked=" + checked + "}";
        }

        public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
            @Override
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            @Override
            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }

    @Override
    public Parcelable onSaveInstanceState() {
        Parcelable superState = super.onSaveInstanceState();
        SavedState ss = new SavedState(superState);
        ss.checked = isChecked();
        return ss;
    }

    @Override
    public void onRestoreInstanceState(Parcelable state) {
        SavedState ss = (SavedState) state;

        super.onRestoreInstanceState(ss.getSuperState());
        setChecked(ss.checked);
        requestLayout();
    }
}

This options that come to mind firstly and have a good implementation. But you can also come up with your own versions, or use simple variables to save state and toggle manualy like @Chirag-Savsani said, but in that case you would have to abandon to use of selectors.

Option 2: Converted from state_checked to state_activated and works better for my use case. Thanks! — user1652110, Dec 06 '17 at 20:29

score 9 · Answer 2 · answered Nov 29 '15 at 16:38

The reason is very simple - ImageView doesn't check for state_checked at all. Comment by @frank-n-stein is the closest to an answer for this question.

You have two options:

use a view with support for state_checked (for example a CheckBox)
add state_checked to ImageView

To add state_checked support you have to implement Checkable interface. Like this:

public class CheckableImageView extends ImageView implements Checkable {
    private static final int[] CHECKED_STATE_SET = {android.R.attr.state_checked};

    private boolean mChecked;

    ... constructors

    @Override
    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mChecked = checked;
            refreshDrawableState();
        }
    }

    @Override
    public boolean isChecked() {
        return mChecked;
    }

    @Override
    public void toggle() {
        setChecked(!mChecked);
    }

    @Override
    public boolean performClick() {
        toggle();
        return super.performClick();
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }

        return drawableState;
    }

    @Override
    protected Parcelable onSaveInstanceState() {
        SavedState result = new SavedState(super.onSaveInstanceState());
        result.checked = mChecked;
        return result;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (!(state instanceof SavedState)) {
            super.onRestoreInstanceState(state);
            return;
        }

        SavedState ss = (SavedState) state;
        super.onRestoreInstanceState(ss.getSuperState());

        setChecked(ss.checked);
    }

    protected static class SavedState extends BaseSavedState {
        protected boolean checked;

        protected SavedState(Parcelable superState) {
            super(superState);
        }

        @Override
        public void writeToParcel(Parcel out, int flags) {
            super.writeToParcel(out, flags);
            out.writeInt(checked ? 1 : 0);
        }

        public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };

        private SavedState(Parcel in) {
            super(in);
            checked = in.readInt() == 1;
        }
    }
}

The code is from here: https://github.com/shomeser/AndroidLayoutSelector/blob/master/LayoutSelector/src/main/java/com/example/layoutselector/CheckableLinearLayout.java

Chirag Savsani · Answer 3 · 2015-12-01T12:58:57.077

Hello I also use this scenario in my current application.

1) Using CheckBox

Use CheckBox with android:button="@null" property, This property will remove border of CheckBoxand display only your drawable images.

state_checked property will work with CheckBox

<CheckBox
    android:id="@+id/imgDisplayCheckimg"
    android:layout_width="wrap_contenrt"
    android:layout_height="wrap_contenrt"
    android:background="@drawable/display_checkbox"
    android:button="@null"
    android:checked="false"
    android:clickable="true" />

This is Drawable file display_checkbox.xml

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

    <!-- When selected, use red-->
    <item android:drawable="@drawable/red_color" android:state_checked="true"/>
    <!-- When not selected, use green-->
    <item android:drawable="@drawable/green_color" android:state_checked="false"/>
</selector>

Replace red_color and green_color with your drawable name.

2) Using ImageView

Declare this variable Globally

boolean switchStatus = false;

Find your ImageView and add below Click Listener.

switchImageView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        if(switchStatus == true) {
            anonymousImage.setImageResource(R.drawable.red);
            switchStatus = false;
        } else {
            anonymousImage.setImageResource(R.drawable.green);
            switchStatus = true;
        }
    }
});

ImageView in layout file.

<ImageView
    android:id="@+id/switchImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/green" />

Change name at green and red with your drawable name.

solved my issue with android:background="@drawable/display_checkbox" android:button="@null" — Ahmad Shahwaiz, Nov 03 '21 at 07:28

score 4 · Answer 4 · answered Nov 29 '15 at 16:28

You can try:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected ="false" 
          android:drawable="@drawable/bottom_left_border"/>

    <item android:state_selected ="true"
          android:drawable="@drawable/bottom_left_border_pressed">
    </item>
</selector>

And java code:

imageview.setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable....));

//set the click listener

    imageview.setOnClickListener(new OnClickListener() {

        public void onClick(View v) {
            v.setSelected(!v.isSelected());
            //other code if need
        }

    });

score 3 · Answer 5 · answered Nov 29 '15 at 17:21

3

Consider to switch your imageView to Button since state_checked isn't affect on imageView. Then set your button's background to your selector_xml

<Button>
...
android:background="@drawable/your_selector_xml"
</Button>

answered Nov 29 '15 at 17:21

Eliran Kuta

4,148
3
24
28

Harsh Sharma · Answer 6 · 2015-12-03T06:17:03.617

Try This One

<<<<<< First Way >>>>>>

1. Create a color.xml in "values" folder under "res" folder if already created create it with some other name:color.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="red">#FF0000</drawable>
    <drawable name="green">#00FF00</drawable>
    <drawable name="blue">#0000FF</drawable>    
</resources>

2. Now Create a selector like on_off_selector.xml:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="false" android:drawable="@drawable/red" />
     <item android:state_pressed="true" android:drawable="@drawable/green"/>   </selector>

3. Now set "android:background" property of your ImageView something like this also set android:clcikable = "true":

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:clickable="true"
    android:id="@+id/imageView"
    android:background="@drawable/on_off_selector"
    />

<<<<<<< Second Way >>>>>>>

Make A file in drawable folder on_off_selecor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <color android:color="#FF0000" />
    </item>
    <item android:state_pressed="true">
        <color android:color="#00FF00" />
    </item>
    <item>
        <color android:color="#FF0000" />
    </item>
</selector>

Now set "android:background" property of your ImageView something like this also set android:clcikable = "true":

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:clickable="true"
    android:id="@+id/imageView"
    android:background="@drawable/on_off_selector"
    />

state_checked doesn't toggle imageview on and off

6 Answers6

Linked