Connect the dots of an imageview

Question

It is a difficult task to create an app for kids and i am given a task of creating an connect the dots app. example

https://play.google.com/store/apps/details?id=zok.android.dots

i have done some tutorials of onTouchEvent.

i know how to paint on screen Draw in Canvas by finger, Android

i am getting the dot coordinates using this Android: How do I get the x y coordinates within an image / ImageView? example

but I really don't know how to achieve this target. I'd really appreciate a solution to this! Thanks!

input image is https://i.stack.imgur.com/vlmcp.png

EDIT

@Override
protected void onDraw(Canvas canvas) {
//backgroundBitmap is the image i want to show in background
if(DISPLAY_ALPHABET==0)
{   
    canvas.drawBitmap(backgroundBitmap, 0f, 0f, null);
    DISPLAY_ALPHABET=1;
}
show(canvas);
}

 public void show(Canvas canvas)
{
      Paint paint = new Paint();
      int cnt=1;
     canvas.drawPaint(paint); 
 //color of numbers
 paint.setColor(Color.BLUE); 
 paint.setTextSize(16); 
 canvas.drawColor(BACKGROUND);
 ** canvas.drawBitmap(mBitmap, 0, 0, null);**
 canvas.drawPath(mPath, mPaint);
 mPaint.setColor(Color.BLACK);
 //Drawing points on canvas

 for (Point point : mPoints) {
    canvas.drawPoint(point.x, point.y, mPaint);
    canvas.drawText(""+cnt++, point.x-7, point.y-7, paint);
 }
  mPaint.setColor(Color.RED);
}

Answer 1

I don't have much idea about this but still felt like worth thinking

You can save the next dot coordinates in a arraylist or a vector. when you are drawing the line using canvas, check whether the Motion-Event x and y coordinates matches to that of the next point in the vector.

Once a coordinate is touched search for the next one in the vector

You can use a counter to increase the vector position, once the dot touched increment the counter.

EDIT: Check out my Demo App in this Link and check what you might need.