Android - Custom ImageView with tick to mark image as selected

Question

For an Android app I'm building, I made a custom ImageView class which needs to show a tick over the image indicating this image has been selected. I loaded the tick image from a drawable resource and displayed it on top of the image, and it works fine. But what I want to do is that, when the tick is visible (that is, when the image is selected), the image to become darker so that you can see the tick clearly. How can I do this?

My code currently is as follows:

public class TickedImageView extends ImageView {

private boolean selected = true;
private Bitmap tickBmp;
private Paint paint = new Paint();

public TickedImageView(Context context) {
    super(context);
    tickBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_done_white_48dp);
}

public TickedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    tickBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_done_white_48dp);
}

public void setSelected(boolean selected) {
    this.selected = selected;
    invalidate();
}

public boolean isSelected() {
    return selected;
}

@Override
protected void onDraw(@NonNull Canvas canvas) {
    super.onDraw(canvas);

    if(selected) {
        int margin = 15;
        int x = (canvas.getWidth() / 2) - (tickBmp.getWidth() / 2) - margin;
        int y = (canvas.getHeight() / 2) - (tickBmp.getHeight() / 2) - margin;

        canvas.drawBitmap(tickBmp, x, y, paint);
    }
}
}

Thank you.

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

If I were you, I would have used 2 images, one light colored, and the other darker one, both from @drawable folder, and on selected Item, I would have called darker image.

Hopes my idea gives you the answer

Update :

try playing with Alpha property (yourPaintObject.setAlpha(60);) should help you

something like

paint.setAlpha(60);                    //you can set your transparent value here  
canvas.drawBitmap(tickBmp, x, y, paint);

see this answer already on SO

edited May 23 '17 at 12:15

Community

1
1

answered May 24 '15 at 19:23

Zaffar Saffee

6,167
5
39
77

Yes, but I'm getting the images from camera roll. What I want to do is to make the image from camera roll darker so that I can see the white tick clearly – fergaral May 24 '15 at 19:27

score 0 · Answer 2 · answered May 24 '15 at 19:33

In your canvas just draw another rectangle with a dark color and a bit of transparency on top of the original image. See below

public class TickedImageView extends ImageView {

    private boolean selected = true;
    private Bitmap tickBmp;
    private Paint paint;
    private Paint mDarkerPaint;
    private int measuredWidth, measuredHeight;

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

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

    private void init() {
        paint = new Paint();
        mDarkerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mDarkerPaint.setStyle(Paint.Style.FILL);
        // Keep changing this color till it looks ok for you
        mDarkerPaint.setColor(0x80142030);
        tickBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_done_white_48dp);
    }


    public void setSelected(boolean selected) {
        this.selected = selected;
        invalidate();
    }

    public boolean isSelected() {
        return selected;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(@NonNull Canvas canvas) {
        super.onDraw(canvas);

        if (selected) {
            int margin = 15;
            int x = (canvas.getWidth() / 2) - (tickBmp.getWidth() / 2) - margin;
            int y = (canvas.getHeight() / 2) - (tickBmp.getHeight() / 2) - margin;

            canvas.drawRect(0, 0, measuredWidth, measuredHeight, mDarkerPaint);
            canvas.drawBitmap(tickBmp, x, y, paint);
        }
    }
}

score 0 · Answer 3 · answered May 24 '15 at 19:47

You can use setAlpha(float), 0.0 -> opaque to 1.0 -> fully visible

TickeredImageView imageView = new TickeredImageView(this);
imageView.setAlpha((float) desired_opacity)

If using APK 16+, you can use setImageAlpha(int):

imageView.setImageAlpha((int) desired_opacity)

Android - Custom ImageView with tick to mark image as selected

3 Answers3