java - Custom ImageView class onClick change imageResource

Question

I've created a custom ImageView class, and I'm trying to change the imageResource when user click on it, but I'm able to call setImageResource() from that class.

Also I'd like to store like a second imageView I mean, my custom ImageView has the same starter imageView resource, but when click on it it have to be dynamic ImageView for instance:

ImageView1 ic_launcher (user has not clicked on it) ImageView1 ic_user (user has clicked on it)

Can you guide how to achieve this?

This is my custom ImageView class :

public class CustomImageView extends android.support.v7.widget.AppCompatImageView implements View.OnClickListener {
    private View.OnClickListener clickListener;
    public CustomImageView(Context context) {
        super(context);
        setOnClickListener(this);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setOnClickListener(this);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOnClickListener(this);
    }


    @Override
    public void setOnClickListener(OnClickListener l) {
        if (l == this) {
            super.setOnClickListener(l);
        } else {
            clickListener = l;
        }
    }

    @Override
    public void onClick(View v) {
        //Should change the imageResource here but also I should have to change it again if user wants (to the initial one)
        if (clickListener != null) {
            clickListener.onClick(this);
        }
    }
}

Answer 1

A solution for a custom toggleable ImageView:

Custom attribute in values/attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ToggleImageView">
        <attr name="low_img" format="reference" />
        <attr name="high_img" format="reference" />
    </declare-styleable>

</resources>

Custom ImageView class:

public class ToggleImageView extends AppCompatImageView implements View.OnClickListener {
    private Drawable mLowDrawable, mHighDrawable;
    private boolean isLow = true;

    public ToggleImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        // Extract drawables from custom attributes
        TypedArray values = context.obtainStyledAttributes(attrs, R.styleable.ToggleImageView);
        setLowDrawable(values.getDrawable(R.styleable.ToggleImageView_low_img));
        setHighDrawable(values.getDrawable(R.styleable.ToggleImageView_high_img));
        values.recycle();

        setImageDrawable(mLowDrawable);

        super.setOnClickListener(this);
    }

    public void setLowDrawable(Drawable drawable) {
        mLowDrawable = drawable;

        if (isLow)
            setImageDrawable(mLowDrawable);
    }

    public void setHighDrawable(Drawable drawable) {
        mHighDrawable = drawable;

        if (!isLow)
            setImageDrawable(mHighDrawable);
    }

    @Override
    public void setOnClickListener(@Nullable OnClickListener l) {
        // Do nothing to block setting listener from outer caller
    }

    @Override
    public void onClick(View view) {
        toggle();
    }

    public void toggle() {
        isLow = !isLow;

        setImageDrawable(isLow ? mLowDrawable : mHighDrawable);
    }
}

Usage in xml layout:

<?xml version="1.0" encoding="utf-8" ?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.tamhuynh.testfragment.ToggleImageView
        android:id="@+id/toggle_img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        app:high_img="@mipmap/high_drawable"
        app:low_img="@drawable/low_drawable"
        tools:low_img="@drawable/low_drawable" />

</FrameLayout>