How to draw a new circle every time the screen is touched?

Question

I want the program to draw a circle whenever the screen gets touched and if the screen gets touched on another position I want the program to draw a circle again but without deleting the old one!

Now my problem is that it doesn't just draw a new circle in addition to the old one. It draws a new circle and deletes the old one. I tried to find a solution but nothing worked.

So can anyone please help me?

So it's working now!

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.view.MotionEvent;
import android.view.View;

public class SingleTouchEventView extends View {
  private Paint paint = new Paint();
  List<Point> points = new ArrayList<Point>();


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

  protected void onDraw(Canvas canvas){
      super.onDraw(canvas);
      paint.setColor(Color.GREEN);
      for(Point p: points){
           canvas.drawCircle(p.x, p.y, 20, paint);
      }
      invalidate();
    }

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:

        Point p = new Point();
         p.x = (int)event.getX();
        p.y = (int)event.getY();
        points.add(p);
        invalidate();

    case MotionEvent.ACTION_MOVE:  // a pointer was moved
    case MotionEvent.ACTION_UP:
    case MotionEvent.ACTION_CANCEL: {
      break;
    }
    }
    invalidate();
    return true;  

}




}

when you redraw your canvas, you are likely erasing the previous circle. You need to keep a list of references for your circles. — njzk2, Apr 01 '14 at 16:39
yeah i had to try how to do it!:) it's working now! Thank you all! — Aless55, Apr 10 '14 at 18:42

score 6 · Accepted Answer · answered Apr 01 '14 at 16:57

6

You can achieve it by maintaining a list of points as a private instance variable:

private List<Point> points = new ArrayList<Point>;

Then you can add new points to this list every time a new touch event occurs:

Point p = new Point();
p.x = event.getX();
p.y = event.getY();
points.add(p);
invalidate();

Now in the onDraw() method you can print all the points in the list:

paint.setColor(Color.GREEN);
for(Point point: points){
     canvas.drawCircle(point.x, point.y, 20, paint);
}
invalidate();

answered Apr 01 '14 at 16:57

Aditya Gaykar

470
1
5
10

I added the Arraylistener & changed the onDraw methode, but where do I have to put the "Point p = new Point(); p.x = event.getX(); p.y = event.getY(); points.add(p); invalidate();" ? – Aless55 Apr 09 '14 at 18:46
You can add that code under overridden onClick() method – Aditya Gaykar Apr 09 '14 at 18:54
So I have to add an onClick methode? – Aless55 Apr 10 '14 at 18:17
I think you already had a method where u use to get the X and Y co ordinates on the touch event. So just add this code to that method. I dont remember which method u had used since your screenshot is no longer available. – Aditya Gaykar Apr 10 '14 at 18:40

score 1 · Answer 2 · answered Apr 01 '14 at 16:42

Why not make a circle object which stores the coordinates of where to paint the circle, then add these objects to an array. Then in your paint method iterate through the array get the coordinates from each object and paint the circle using the coordinates?

So in your onclick method create a new circle object with the coordinates gained from the touch

score 1 · Answer 3 · answered Apr 01 '14 at 16:45

one of my changing circle classes:

public class GrowCircle {
float x, y;int radius;
Paint myp = new Paint();
int colr,colg,colb;
int redvar=1;
int bluevar=5;
int greenvar=2;
int tripper=10;
int change=2;
Random rand = new Random();

public GrowCircle(float x, float y){
    this.x=x;
    this.y=y;
    this.radius=2;
    this.colr=rand.nextInt(254)+1;
    this.colg=rand.nextInt(254)+1;
    this.colb=rand.nextInt(254)+1;

}

public void update(){

    if(tripper<=1||tripper>=15){
        change=-change;
    }
    Random col = new Random();
    myp.setColor(Color.argb(255,colr,colg,colb));
    colr+=redvar;
    colg+=greenvar;
    colb+=bluevar;

    if(colr<=5||colr>=250){
        redvar=-redvar;
    }
    if(colg<=5||colg>=250){
        greenvar=-greenvar;
    }
    if(colb<=5||colb>=250){
        bluevar=-bluevar;
    }

}

public void drawThis(Canvas canvas){
    myp.setStrokeWidth(tripper);
    myp.setStyle(Style.STROKE);
    canvas.drawCircle(x, y, radius, myp);
}



}

so play with that and make it how you want and then do this:

///var declaration

 CopyOnWriteArrayList<GrowCircle> gcirc= new CopyOnWriteArrayList<GrowCircle>();

//in update method

for(GrowCircle circ:gcirc){

                        circ.update();

                    }

// in draw method

 for(GrowCircle circ:gcirc){


                        circ.drawThis(c);
                    }
//and in onTouch
float tx =event.getX();
float ty = event.getY();

  gcirc.add(new GrowCircle(tx,ty));

How to draw a new circle every time the screen is touched?

So it's working now!

3 Answers3