Tint / dim drawable on touch

Question

The app I'm currently working on uses a lot of ImageViews as buttons. The graphics on these buttons use the alpha channel to fade out the edges of the button and make them look irregular. Currently, we have to generate 2 graphics for each button (1 for the selected/focused/pressed state and the other for the default unselected state) and use a StateListDrawable defined in an XML file for each button.

While this works fine it seems extremely wasteful since all of the selected graphics are simply tinted versions of the unselected buttons. These take time to produce (however little) and take up space in the final APK. It seems like there should be an easy way to this automatically.

The perfect solution, it would seem, is to use ImageViews for each button and specify in its tint attribute a ColorStateList. This approach has the advantage that only a single XML ColorStateList is needed for all of the buttons (that share the same tint). However it does not work. As mentioned here, ImageView throws a NumberFormatException when the value provided to tint is anything other than a single color.

My next attempt was to use a LayerDrawable for the selected drawable. Inside the layer list, we would have the original image at the bottom of the stack covered by a semi-transparent rectangle. This worked on the solid parts of the button graphic. However the edges which were supposed to be entirely transparent, were now the same color as the top layer.

Has anyone encountered this issue before and found a reasonable solution? I would like to stick to XML approaches but will probably code up a simple ImageView subclass that will do the required tinting in code.

Answer 1

For those who have encountered a similar need, solving this in code is fairly clean. Here is a sample:

public class TintableButton extends ImageView {

    private boolean mIsSelected;

    public TintableButton(Context context) {
        super(context);
        init();
    }   

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

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

    private void init() {
        mIsSelected = false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN && !mIsSelected) {
            setColorFilter(0x99000000);
            mIsSelected = true;
        } else if (event.getAction() == MotionEvent.ACTION_UP && mIsSelected) {
            setColorFilter(Color.TRANSPARENT);
            mIsSelected = false;
        }

        return super.onTouchEvent(event);
    }
}

It's not finished but works well as a proof of concept.