Draw line along points using finger

Question

I can actually draw lines with finger in my app using the FingerPaint in API Demos given in samples of Android SDK. But how to draw these lines with finger only along points placed on the screen. I want something like in this app:https://play.google.com/store/apps/details?id=zok.android.dots enter image description here I just want to draw line between point 1 and point 2 with finger. The line between 1 and 2 must be drawn only if the point 2 is touched, else it shouldn't be drawn. Likewise, again from point 2 to point 3 and so on. Please help me with a code for this. Thanks in advance

P.S. Please have a look at the app in the link well before answering so that you would have a clear idea about my requirement.

Update:

public class PaintView extends View {

private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mPaint;
private static final int TOUCH_TOLERANCE_DP = 20;
private static final int BACKGROUND = 0xFFDDDDDD;
private List<Point> mPoints = new ArrayList<Point>();
private int mLastPointIndex = 0;
private int mTouchTolerance;
private boolean isPathStarted = false;

public PaintView(Context context) {
    super(context);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);

    // TODO just test points
    Point p1 = new Point(133, 123);
    Point p2 = new Point(149, 136);
    Point p3 = new Point(182, 136);
    Point p4 = new Point(206, 118);
    Point p5 = new Point(208, 87);
    Point p6 = new Point(187, 71);
    Point p7 = new Point(144, 78);
    Point p8 = new Point(124, 101);
    Point p9 = new Point(113, 128);
    Point p10 = new Point(112, 157);
    Point p11 = new Point(119, 188);
    Point p12 = new Point(134, 209);
    Point p13 = new Point(162, 228);
    Point p14 = new Point(194, 238);
    Point p15 = new Point(232, 240);
    Point p16 = new Point(263, 237);
    Point p17 = new Point(289, 224);
    Point p18 = new Point(315, 204);
    Point p19 = new Point(332, 174);
    Point p20 = new Point(339, 128);
    Point p21 = new Point(329, 95);
    Point p22 = new Point(304, 73);
    Point p23 = new Point(280, 69);
    Point p24 = new Point(254, 87);
    Point p25 = new Point(248, 116);
    Point p26 = new Point(259, 143);
    Point p27 = new Point(278, 153);
    Point p28 = new Point(241, 157);
    Point p29 = new Point(192, 160);
    Point p30 = new Point(150, 159);
    mPoints.add(p1);
    mPoints.add(p2);
    mPoints.add(p3);
    mPoints.add(p4);
    mPoints.add(p5);
    mPoints.add(p6);
    mPoints.add(p7);
    mPoints.add(p8);
    mPoints.add(p9);
    mPoints.add(p10);
    mPoints.add(p11);
    mPoints.add(p12);
    mPoints.add(p13);
    mPoints.add(p14);
    mPoints.add(p15);
    mPoints.add(p16);
    mPoints.add(p17);
    mPoints.add(p18);
    mPoints.add(p19);
    mPoints.add(p20);
    mPoints.add(p21);
    mPoints.add(p22);
    mPoints.add(p23);
    mPoints.add(p24);
    mPoints.add(p25);
    mPoints.add(p26);
    mPoints.add(p27);
    mPoints.add(p28);
    mPoints.add(p29);
    mPoints.add(p30);
}

public PaintView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);

    // TODO just test points
    Point p1 = new Point(133, 123);
    Point p2 = new Point(149, 136);
    Point p3 = new Point(182, 136);
    Point p4 = new Point(206, 118);
    Point p5 = new Point(208, 87);
    Point p6 = new Point(187, 71);
    Point p7 = new Point(144, 78);
    Point p8 = new Point(124, 101);
    Point p9 = new Point(113, 128);
    Point p10 = new Point(112, 157);
    Point p11 = new Point(119, 188);
    Point p12 = new Point(134, 209);
    Point p13 = new Point(162, 228);
    Point p14 = new Point(194, 238);
    Point p15 = new Point(232, 240);
    Point p16 = new Point(263, 237);
    Point p17 = new Point(289, 224);
    Point p18 = new Point(315, 204);
    Point p19 = new Point(332, 174);
    Point p20 = new Point(339, 128);
    Point p21 = new Point(329, 95);
    Point p22 = new Point(304, 73);
    Point p23 = new Point(280, 69);
    Point p24 = new Point(254, 87);
    Point p25 = new Point(248, 116);
    Point p26 = new Point(259, 143);
    Point p27 = new Point(278, 153);
    Point p28 = new Point(241, 157);
    Point p29 = new Point(192, 160);
    Point p30 = new Point(150, 159);
    mPoints.add(p1);
    mPoints.add(p2);
    mPoints.add(p3);
    mPoints.add(p4);
    mPoints.add(p5);
    mPoints.add(p6);
    mPoints.add(p7);
    mPoints.add(p8);
    mPoints.add(p9);
    mPoints.add(p10);
    mPoints.add(p11);
    mPoints.add(p12);
    mPoints.add(p13);
    mPoints.add(p14);
    mPoints.add(p15);
    mPoints.add(p16);
    mPoints.add(p17);
    mPoints.add(p18);
    mPoints.add(p19);
    mPoints.add(p20);
    mPoints.add(p21);
    mPoints.add(p22);
    mPoints.add(p23);
    mPoints.add(p24);
    mPoints.add(p25);
    mPoints.add(p26);
    mPoints.add(p27);
    mPoints.add(p28);
    mPoints.add(p29);
    mPoints.add(p30);
}

public PaintView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);
}

@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
    super.onSizeChanged(width, height, oldWidth, oldHeight);
    clear();

}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawColor(BACKGROUND);
    canvas.drawBitmap(mBitmap, 0, 0, null);
    canvas.drawPath(mPath, mPaint);

    // TODO remove if you dont want points to be drawn
    for (Point point : mPoints) {
        canvas.drawPoint(point.x, point.y, mPaint);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up(x, y);
            invalidate();
            break;
    }
    return true;
}

private void touch_start(float x, float y) {

    if (checkPoint(x, y, mLastPointIndex)) {
        mPath.reset();
        // user starts from given point so path can beis started
        isPathStarted = true;
    } else {
        // user starts move from point which doen's belongs to mPinst list
        isPathStarted = false;
    }

}

//ADDED WITH LAST EDIT
private void touch_move(float x, float y) {
    // draw line with finger move
    if (isPathStarted) {
        mPath.reset();
        Point p = mPoints.get(mLastPointIndex);
        mPath.moveTo(p.x, p.y);
        if (checkPoint(x, y, mLastPointIndex + 1)) {
            p = mPoints.get(mLastPointIndex + 1);
            mPath.lineTo(p.x, p.y);
            mCanvas.drawPath(mPath, mPaint);
            mPath.reset();
            ++mLastPointIndex;
        } else {
            mPath.lineTo(x, y);
        }
    }
}

/**
 * Draws line.
 */
private void touch_up(float x, float y) {
    mPath.reset();
    if (checkPoint(x, y, mLastPointIndex + 1) && isPathStarted) {
        // move finished at valid point so draw whole line

        // start point
        Point p = mPoints.get(mLastPointIndex);
        mPath.moveTo(p.x, p.y);
        // end point
        p = mPoints.get(mLastPointIndex + 1);
        mPath.lineTo(p.x, p.y);
        mCanvas.drawPath(mPath, mPaint);
        mPath.reset();
        // increment point index
        ++mLastPointIndex;
        isPathStarted = false;
    }

}

/**
 * Sets paint
 * 
 * @param paint
 */
public void setPaint(Paint paint) {
    this.mPaint = paint;
}

/**
 * Returns image as bitmap
 * 
 * @return
 */
public Bitmap getBitmap() {
    return mBitmap;
}

/**
 * Clears canvas
 */
public void clear() {
    mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    mBitmap.eraseColor(BACKGROUND);
    mCanvas.setBitmap(mBitmap);
    invalidate();
}

/**
 * Checks if user touch point with some tolerance
 */
private boolean checkPoint(float x, float y, int pointIndex) {
    if (pointIndex == mPoints.size()) {
        // out of bounds
        return false;
    }
    Point point = mPoints.get(pointIndex);
    if (x > (point.x - mTouchTolerance) && x < (point.y + mTouchTolerance)) {
        if (y > (point.y - mTouchTolerance) && y < (point.y + mTouchTolerance)) {
            return true;
        }
    }
    return false;
}

public List<Point> getPoints() {
    return mPoints;
}

public void setPoints(List<Point> points) {
    this.mPoints = points;
}

private int dp2px(int dp) {
    Resources r = getContext().getResources();
    float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
    return (int) px;
}
}

Still am I missing something?

http://stackoverflow.com/questions/10860041/how-to-draw-a-lines-between-points-and-pull-those-points — Nirav Ranpara, Nov 09 '12 at 05:32
@NiravRanpara plz help me with the code. I tried the code from the link, but it gives me out a blank page. — , Nov 12 '12 at 05:16
@sulemankhan : Okay I will give you demo. wait for some minut — Nirav Ranpara, Nov 12 '12 at 05:37
@NiravRanpara oh..! that's great. thanx for the quick reply. will be waiting for your answer. — Suleman Khan, Nov 12 '12 at 05:41
@NiravRanpara I knew this already how to do. But what I want is, I want to put some invisible points and let the user touch these points to draw through these points like in the game link given in the question. There the points are visible, but here i want them to be invisible except the first point. — Suleman Khan, Nov 12 '12 at 08:52
@NiravRanpara I just want to know how to draw lines between two points, it must start from that given point only and end at given point only, with a condition as if that point touched, then only the line between them must be drawn. Please help me with this. I need it very badly.please. — Suleman Khan, Dec 07 '12 at 12:01

Leszek · Accepted Answer · 2012-12-17T17:59:04.960

I done something similar but I'm not sure if it's exactly what you're expecting. Try this implementation of PaintView:

Edit: Added touch_move() to drawn line along finger move.

Edit2: To draw multiple lines with one move change touch_move() method to this one:

private void touch_move(float x, float y) {
// draw line with finger move
if (isPathStarted) {
    mPath.reset();
    Point p = mPoints.get(mLastPointIndex);
    mPath.moveTo(p.x, p.y);
    if (checkPoint(x, y, mLastPointIndex + 1)) {
        p = mPoints.get(mLastPointIndex + 1);
        mPath.lineTo(p.x, p.y);
        mCanvas.drawPath(mPath, mPaint);
        mPath.reset();
        ++mLastPointIndex;
    } else {
        mPath.lineTo(x, y);
    }
}
}

_

public class PaintView extends View {

private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mPaint;
private static final int TOUCH_TOLERANCE_DP = 24;
private static final int BACKGROUND = 0xFFDDDDDD;
private List<Point> mPoints = new ArrayList<Point>();
private int mLastPointIndex = 0;
private int mTouchTolerance;
private boolean isPathStarted = false;

public PaintView(Context context) {
    super(context);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);

    // TODO just test points
    Point p1 = new Point(20, 20);
    Point p2 = new Point(100, 100);
    Point p3 = new Point(200, 250);
    Point p4 = new Point(280, 400);
    Point p5 = new Point(350, 600);
    Point p6 = new Point(400, 500);
    mPoints.add(p1);
    mPoints.add(p2);
    mPoints.add(p3);
    mPoints.add(p4);
    mPoints.add(p5);
    mPoints.add(p6);
}

public PaintView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);

    // TODO just test points
    Point p1 = new Point(20, 20);
    Point p2 = new Point(100, 100);
    Point p3 = new Point(200, 250);
    Point p4 = new Point(280, 400);
    Point p5 = new Point(350, 600);
    Point p6 = new Point(400, 500);
    mPoints.add(p1);
    mPoints.add(p2);
    mPoints.add(p3);
    mPoints.add(p4);
    mPoints.add(p5);
    mPoints.add(p6);
}

public PaintView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mCanvas = new Canvas();
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);
    mTouchTolerance = dp2px(TOUCH_TOLERANCE_DP);
}

@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
    super.onSizeChanged(width, height, oldWidth, oldHeight);
    clear();

}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawColor(BACKGROUND);
    canvas.drawBitmap(mBitmap, 0, 0, null);
    canvas.drawPath(mPath, mPaint);

    // TODO remove if you dont want points to be drawn
    for (Point point : mPoints) {
        canvas.drawPoint(point.x, point.y, mPaint);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up(x, y);
            invalidate();
            break;
    }
    return true;
}

private void touch_start(float x, float y) {

    if (checkPoint(x, y, mLastPointIndex)) {
        mPath.reset();
        // user starts from given point so path can beis started
        isPathStarted = true;
    } else {
        // user starts move from point which doen's belongs to mPinst list
        isPathStarted = false;
    }

}

//ADDED WITH LAST EDIT
private void touch_move(float x, float y) {
    // draw line with finger move
    if (isPathStarted) {
        mPath.reset();
        Point p = mPoints.get(mLastPointIndex);
        mPath.moveTo(p.x, p.y);
        mPath.lineTo(x, y);
    }
}

/**
 * Draws line.
 */
private void touch_up(float x, float y) {
    mPath.reset();
    if (checkPoint(x, y, mLastPointIndex + 1) && isPathStarted) {
        // move finished at valid point so draw whole line

        // start point
        Point p = mPoints.get(mLastPointIndex);
        mPath.moveTo(p.x, p.y);
        // end point
        p = mPoints.get(mLastPointIndex + 1);
        mPath.lineTo(p.x, p.y);
        mCanvas.drawPath(mPath, mPaint);
        mPath.reset();
        // increment point index
        ++mLastPointIndex;
        isPathStarted = false;
    }

}

/**
 * Sets paint
 * 
 * @param paint
 */
public void setPaint(Paint paint) {
    this.mPaint = paint;
}

/**
 * Returns image as bitmap
 * 
 * @return
 */
public Bitmap getBitmap() {
    return mBitmap;
}

/**
 * Clears canvas
 */
public void clear() {
    mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    mBitmap.eraseColor(BACKGROUND);
    mCanvas.setBitmap(mBitmap);
    invalidate();
}

/**
 * Checks if user touch point with some tolerance
 */
private boolean checkPoint(float x, float y, int pointIndex) {
    if (pointIndex == mPoints.size()) {
        // out of bounds
        return false;
    }
    Point point = mPoints.get(pointIndex);
    //EDIT changed point.y to poin.x in the first if statement
    if (x > (point.x - mTouchTolerance) && x < (point.x + mTouchTolerance)) {
        if (y > (point.y - mTouchTolerance) && y < (point.y + mTouchTolerance)) {
            return true;
        }
    }
    return false;
}

public List<Point> getPoints() {
    return mPoints;
}

public void setPoints(List<Point> points) {
    this.mPoints = points;
}

private int dp2px(int dp) {
    Resources r = getContext().getResources();
    float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
    return (int) px;
}

}

I used it from xml but you can also create it from code, simple xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.example.lecho.PaintView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

yes, this was almost as what I needed, but can't we draw along the finger with same functionality. Here the line is drawn after action_up, can't we do this along the finger? — Suleman Khan, Dec 17 '12 at 06:35
Hey..! that was just awesome...!! where have you been all these days? Thank you very much Lecho, you save my day. Just a small edit to be done. Here the line is drawn after action_up, how about drawing it inside action_move itself? — Suleman Khan, Dec 17 '12 at 08:52
if possible, please answer this question too: stackoverflow.com/questions/13625730/how-to-move-objects-in-required-direction — Suleman Khan, Dec 17 '12 at 09:09
Yes, you can draw lines without action_up(Edit2). I will check your second question but I'm not sure if I will be able to answer. — Leszek, Dec 17 '12 at 10:02
hey..! I have done as in my updated question. I've just added more points to your given code. The problem is I can't draw to more than one point. what might be the problem? — Suleman Khan, Dec 17 '12 at 10:39
In `checkPoint()` method, in line `if (x > (point.x - mTouchTolerance) && x < (point.y + mTouchTolerance))` change `point.y` to `point.x`, answer edited :) — Leszek, Dec 17 '12 at 17:58
Sorry to trouble you. But just one last doubt. How to change these points as per the screen size? — Suleman Khan, Dec 18 '12 at 05:27
Maybe save points coordinated in dimens.xml files for every screen size(folders values-large, values-normal etc). Then read that dimensions in your java code(eg. onCreate method of your main activity). I'm not sure if this is the best way to do this. — Leszek, Dec 18 '12 at 11:22
Well, thank you very much. This answer meant a lot for me. Thanks again. — Suleman Khan, Dec 18 '12 at 13:00
@leszek,Is it possible to draw line between two points with finger touch path not straight line.?? — Parul, Dec 24 '15 at 08:27
It's 2022 and your answer still makes push start for me. Great way to handle straight lines on canvas — Ammar, Jun 02 '22 at 10:47

score 0 · Answer 2 · answered Nov 12 '12 at 06:34

Here I put code of drawing object on canvas . You can draw line , circle , etc ..

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

SampleCanvasActivity.java

public class SampleCanvasActivity extends Activity implements OnTouchListener {

    DrawPanel dp;
    private ArrayList<Path> pointsToDraw = new ArrayList<Path>();
    private Paint mPaint;
    Path path;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        dp = new DrawPanel(this); 
        dp.setOnTouchListener(this);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mPaint.setStrokeWidth(3);
        FrameLayout fl = new FrameLayout(this);  
        fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        fl.addView(dp);  
        setContentView(fl);  
    }


    @Override
    protected void onPause() {
        // TODO Auto-generated method stub
        super.onPause();
        dp.pause();
    }
    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();
        dp.resume();
    }

    public boolean onTouch(View v, MotionEvent me) {
        // TODO Auto-generated method stub
                synchronized(pointsToDraw)
                {
        if(me.getAction() == MotionEvent.ACTION_DOWN){
            path = new Path();
            path.moveTo(me.getX(), me.getY());
            Log.e("Location", String.valueOf("x : "+ me.getX()+ "y : " +me.getY()));
            //path.lineTo(me.getX(), me.getY());
            pointsToDraw.add(path);
        }else if(me.getAction() == MotionEvent.ACTION_MOVE){
            path.lineTo(me.getX(), me.getY());
        }else if(me.getAction() == MotionEvent.ACTION_UP){
            //path.lineTo(me.getX(), me.getY());
        }
        }       
        return true;
    }


    public class DrawPanel extends SurfaceView implements Runnable{

        Thread t = null;
        SurfaceHolder holder;
        boolean isItOk = false ;

        public DrawPanel(Context context) {
            super(context);
            // TODO Auto-generated constructor stub
            holder = getHolder();
        }

        public void run() {
            // TODO Auto-generated method stub
            while( isItOk == true){

                if(!holder.getSurface().isValid()){
                    continue;
                }

                Canvas c = holder.lockCanvas();

                c.drawARGB(255, 0, 0, 0);
                onDraw(c);
                holder.unlockCanvasAndPost(c);
            }
        }

        @Override
        protected void onDraw(Canvas canvas) {
            // TODO Auto-generated method stub
            super.onDraw(canvas);
                        synchronized(pointsToDraw)
                        {
            for (Path path : pointsToDraw) {
                canvas.drawPath(path, mPaint);
            }
                        }
        }

        public void pause(){
            isItOk = false;
            while(true){
                try{
                    t.join();
                }catch(InterruptedException e){
                    e.printStackTrace();
                }
                break;
            }
            t = null;
        }

        public void resume(){
            isItOk = true;  
            t = new Thread(this);
            t.start();

        }
    }
}

I knew this already how to do. But what I want is, I want to put some invisible points and let the user touch these points to draw through these points like in the game link given in the question. There the points are visible, but here i want them to be invisible except the first point. — Suleman Khan, Nov 12 '12 at 06:56
I did't see way to draw lines, circles and so on. I able to free drawing only now. — Dyno Cris, Jul 14 '20 at 00:00

Draw line along points using finger

2 Answers2

Linked