Can't drag and draw in a view when an image resource is set

Question

I have a code to draw circles when the user touches the screen, it works perfectly until I add an ImageResource, when I do this the circle is not drawn anymore.

I need to use an ImageResource because the circle will be drawn around some objects in this image, BackgroundResource might be a good one but it distorts the image.

The class:

public class DragRectView extends TouchImageView {

    private Paint mRectPaint;

    private int mStartX = 0;
    private int mStartY = 0;
    private int mEndX = 0;
    private int mEndY = 0;
    private boolean mDrawCircle = false;
    private TextPaint mTextPaint = null;

    private OnUpCallback mCallback = null;

    public interface OnUpCallback {
        void onRectFinished(Rect rect);
    }

    public DragRectView(final Context context) {
        super(context);
        init();
    }

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

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

/**
 * Sets callback for up
 *
 * @param callback {@link OnUpCallback}
 */
public void setOnUpCallback(OnUpCallback callback) {
    mCallback = callback;
}

/**
 * Inits internal data
 */
private void init() {
    mRectPaint = new Paint();
    mRectPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
    mRectPaint.setStyle(Paint.Style.STROKE);
    mRectPaint.setStrokeWidth(5); // TODO: should take from resources

    mTextPaint = new TextPaint();
    mTextPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
    mTextPaint.setTextSize(20);
}

@Override
public boolean onTouchEvent(final MotionEvent event) {

    // TODO: be aware of multi-touches
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mDrawCircle = false;
            mStartX = (int) event.getX();
            mStartY = (int) event.getY();
            invalidate();
            break;

        case MotionEvent.ACTION_MOVE:
            final int x = (int) event.getX();
            final int y = (int) event.getY();

            if (!mDrawCircle || Math.abs(x - mEndX) > 5 || Math.abs(y - mEndY) > 5) {
                mEndX = x;
                mEndY = y;
                invalidate();
            }

            mDrawCircle = true;
            break;

        case MotionEvent.ACTION_UP:
            if (mCallback != null) {
                mCallback.onRectFinished(new Rect(Math.min(mStartX, mEndX), Math.min(mStartY, mEndY),
                        Math.max(mEndX, mStartX), Math.max(mStartY, mEndY)));
            }
            invalidate();
            break;

        default:
            break;
    }

    return true;
}

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

    if (mDrawCircle) {
        canvas.drawCircle(mStartX,mStartY, (float) Math.sqrt(Math.pow(mEndX-mStartX,2)+Math.pow(mEndY-mStartY,2)),mRectPaint);
    }
}

My main activity is:

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    DragRectView dragRectView = findViewById(R.id.dragView);
    //dragRectView.setImageResource(R.drawable.img);
    dragRectView.setOnUpCallback(new DragRectView.OnUpCallback() {
        @Override
        public void onRectFinished(Rect rect) {
            System.out.println(rect);
        }
    });
}

Does anyone know how can I draw something in a view with an image set?

Answer 1

When you set image resource then it sets it as the content of your ImageView, your DragRectView extends from TouchImageView (which extends from what is not clear).

You can decode bitmap from your image resource using BitmapFactory in the constructor of your view.

Bitmap imgRes = BitmapFactory.decodeResource(getResources(), R.drawable.img);

and draw bitmap in onDraw() like this

canvas.drawBitmap(imgRes, xPosition, yPosition, null);