ImageView: onDraw method draws "behind" the image background, not at the top

Question

Here is the code of a simple extension of an ImageView that allow the user to draw with the finger.

public class MyImageView extends ImageView {

    List<Point> points = new ArrayList<Point>();
    Paint paint = new Paint();

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

    @Override
    public void onDraw(Canvas canvas) {
        for (Point point : points) {
            canvas.drawCircle(point.x, point.y, 5, paint);
            // Log.d(TAG, "Painting: "+point);
        }
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        Log.d("", "point: " + point);
        return true;
    }

    class Point {
        float x, y;
        @Override
        public String toString() {
            return x + ", " + y;
        }
    }
}

This work pretty well.

Now, I want to use this code to draw at the top of a Bitmap.

I used:

MyImageView ivPic = (MyImageView) dialog.findViewById(R.id.ivPic);
ivPic.setImageBitmap(picture);

But the drawing is drawn "behind" the Bitmap:

Do you have any idea how I can draw at the "top" of the Bitmap?

Answer 1

I've changed the order in onDraw method, I put super.onDraw(canvas); at the beginning and I think it works now