We Keep Coding

How to draw circles on button click at a certain location?

I am pretty new to Android so I apologize ahead of time if I am missing something, but my problem is that I am trying to draw a circle at a certain location everytime I click on the screen.
I have tried logging and it does return an int where it matches my if statement but nothing gets drawn.
public boolean onTouchEvent(MotionEvent event) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
drawCirc = true;
xTouch = event.getX();
Log.d("keyboard", "xpos" + xTouch);
yTouch = event.getY();
break;
case MotionEvent.ACTION_UP:
drawCirc = false;
}
return true;
}
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
if(drawCirc) {
if (xTouch < 150 && xTouch>0) {
paint.setColor(Color.RED);
canvas.drawCircle(150, 500, 100, paint);
isPlayer1 = false;
invalidate();
}
}
}

#Javanator is right, you should do invalidate in touch listener.
Meanwhile, you can try out the code below, which adds animation when circle being drawn.
Paint paint = new Paint();
{
paint.setColor(Color.RED);
}
// The radius of the circle you want to draw
// 0 by default
private int radius = 0;
// The animator to animate circle drawing
private ObjectAnimator radiusAnimator;
public void setRadius(int newRadius) {
this.radius = newRadius;
this.invalidate();
}
private void showCircle(boolean show) {
ObjectAnimator animator = this.getRadiusAnimator();
if (show) {
animator.start();
} else {
animator.reverse();
}
}
private ObjectAnimator getRadiusAnimator() {
if (this.radiusAnimator == null) {
this.radiusAnimator = ObjectAnimator.ofInt(this, "radius", 0, 100);
}
return this.radiusAnimator;
}
public boolean onTouchEvent(MotionEvent event) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
// drawCirc = true;
xTouch = event.getX();
Log.d("keyboard", "xpos" + xTouch);
yTouch = event.getY();
showCircle(true);
break;
case MotionEvent.ACTION_UP:
// drawCirc = false;
showCircle(false);
}
return true;
}
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (xTouch < 150 && xTouch > 0) {
canvas.drawCircle(xTouch, yTouch, radius, paint);
}
/*
if(drawCirc) {
if (xTouch < 150 && xTouch>0) {
paint.setColor(Color.RED);
canvas.drawCircle(150, 500, 100, paint);
isPlayer1 = false;
invalidate();
*/
}

public class CustomView extends View {
boolean drawCirc;
float xTouch;
boolean isPlayer1;
float yTouch;
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
drawCirc=true;
xTouch = event.getX();
yTouch = event.getY();
invalidate();
}
return false;
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
if (drawCirc) {
paint.setColor(Color.RED);
canvas.drawCircle(xTouch, yTouch, 100, paint);
isPlayer1 = false;
invalidate();
}
}}
I have solved your functionality and Implemented sample code. I have checked it and it's working and you have not put a code in onTouch Listener that's why it's not worked but now I have solved. if you want area limit then put yourif (xTouch < 150 && xTouch>0)

Draw a Series of Images Based from the Touch Coordinates

I'd like to draw a series of images from touch event triggered. From the returned path inside onDraw, I will use it as a guide on where to draw the images. My problem right now is to have a series of random images displayed, not just one. Then eventually the images displayed will slowly fade out.
public class SingleTouchEventView extends View {
private Paint paint = new Paint();
private Path path = new Path();
float eventX;
float eventY;
Bitmap bmp;
public SingleTouchEventView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(6f);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
}
#SuppressLint("DrawAllocation")
#Override
protected void onDraw(Canvas canvas) {
/*Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_stub);
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(bmp, 10, 10, null);*/
canvas.drawPath(path, paint);
int rand = (int) (Math.random() * 3);
Log.d("Integer", ""+rand);
if(rand==0){
bmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_stub);
}else
if(rand==1)
{
bmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_stub);
}
else if(rand==2)
{
bmp = BitmapFactory.decodeResource(getResources(), R.drawable.bg_striped_img);
}
canvas.drawBitmap(bmp, eventX, eventY, paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
eventX = event.getX();
eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
path.lineTo(eventX, eventY);
break;
case MotionEvent.ACTION_UP:
// nothing to do
break;
default:
return false;
}
// Schedules a repaint.
invalidate();
return true;
}
}

How can I erase my objects without Background Image?

I want to erase my bitmap but I don't want to erase background image. When I try to erase is white and it draw very hard in frames.
This is from CanvasView
erasePaint.setColor(Color.WHITE);
//erasePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
erasePaint.setAntiAlias(true);
erasePaint.setStyle(Paint.Style.STROKE);
erasePaint.setStrokeJoin(Paint.Join.ROUND);
erasePaint.setStrokeWidth(12);
//....
protected void onDraw(Canvas canvas) {
paint.setPathEffect(null);
if(bitmap!=null){
for(MyEraser e:eraserList){
canvas.drawPath(e.p,erasePaint);
invalidate();
}
final OnTouchListener eraseListener = new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
// erasePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
//FirstActivity.ll.setVisibility(LinearLayout.GONE);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
myEraser = new MyEraser();
lastTouchX = event.getX();
lastTouchY = event.getY();
myEraser.mouseDown(event.getX(), event.getY());
return true;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
resetDirtyRect(event.getX(),event.getY());
int historySize = event.getHistorySize();
for(int i=0;i<historySize;i++){
float historicalX = event.getHistoricalX(i);
float historicalY = event.getHistoricalY(i);
expandDirtyRect(historicalX, historicalY);
myEraser.mouseUp(historicalX, historicalY);
}
myEraser.mouseUp(event.getX(), event.getY());
eraserList.add(myEraser);
break;
default:
Log.d("mock it up", "Unknown touch event " + event.toString());
return false;
}
invalidate(
(int) (dirtyRect.left - HALF_STROKE_WIDTH),
(int) (dirtyRect.top - HALF_STROKE_WIDTH),
(int) (dirtyRect.right + HALF_STROKE_WIDTH),
(int) (dirtyRect.bottom + HALF_STROKE_WIDTH));
lastTouchX = event.getX();
lastTouchY = event.getY();
return true;
}
};
}
}
This is MyEraser
public class MyEraser {
Paint paint = new Paint();
Path p = new Path();
public MyEraser(){
paint.setColor(Color.WHITE);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(5);
}
public void mouseDown(float x, float y) {
//path.addCircle(x,y,5,Path.Direction.CW);
p.moveTo( x, y );
// path.lineTo(x, y);
}
public void mouseMove(Path path, float x, float y) {
// path.addCircle(x,y,5,Path.Direction.CW);
}
public void mouseUp(float x, float y){
//path.addCircle(x,y,5,Path.Direction.CW);
p.lineTo(x, y);
}
public void draw(Canvas c,Path path){
//paint.setColor(Color.WHITE);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(7);
c.drawPath(p, paint);
}
}

EDIT: Started over for better explanation :)
I am not familiar with Android, in fact I have never used it. Use this code as an example of how to organize your code, rather than a functional code.
class MyView extends View {
private Eraser myEraser;
private Bitmap myBackgroundImage;
private Canvas myForegroundCanvas;
public MyView(Context context, Attributes, attrs) {
myEraser = new Eraser()
myBackgroundImage = BitmapFactory.decodeResource(getResources(), R.drawable.your_background_name);
Bitmap image = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); // the width and height of the view
myForegroundCanvas = new Canvas(image);
}
public boolean onTouchEvent(MotionEvent event) {
// update your eraser path
return true;
}
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(myBackgroundImage, 0, 0, null);
//for (Eraser item : eraserList) {
// if you have multiple eraser, add them to a list
myEraser.draw(myForegroundCanvas);
//}
canvas.drawCanvas(myForegroundCanvas, 0, 0, null);
}
}
The main idea is to keep the separation between your background and foreground images. That way, you could easily change the background and it would be updated. You could also have a reset on the foreground to erase everything, etc.
I hope this helps you.

Normal & Dashed lines problems

I edited MyLine and CanvasView but now I draw normal line and dashed line but after that I click on normal line and it draw dashed line. Down you have mt edited code. After I created private paint in MyLine, line.paint from onDraw was transformed in getPaint
Here you have MyLine.java
public class MyLine { // line
public float x,y;
public float xStart,yStart,xEnd,yEnd;
private boolean drawDashed;
private Paint paint = new Paint();
public MyLine(boolean drawDashed)
{
if(drawDashed){
getPaint().setColor(Color.BLUE);
getPaint().setStyle(Paint.Style.STROKE);
getPaint().setPathEffect(new DashPathEffect(new float[]{20,30}, 0));
getPaint().setAntiAlias(true);
getPaint().setStrokeJoin(Paint.Join.ROUND);
getPaint().setStrokeWidth(5f);
} else{
getPaint().setColor(Color.RED);
getPaint().setStyle(Paint.Style.STROKE);
getPaint().setPathEffect(null);
getPaint().setAntiAlias(true);
getPaint().setStrokeJoin(Paint.Join.ROUND);
getPaint().setStrokeWidth(5f);
}
}
public void mouseDown(Path path,float xDown,float yDown){
//path.moveTo(xDown, yDown);
// path.lineTo(xDown, yDown);
xStart = xDown;
yStart = yDown;
}
public void mouseUp(Path path,float xUp,float yUp){
//path.lineTo(xUp, yUp);
xEnd = xUp;
yEnd = yUp;
}
public void draw(Canvas c){
getPaint().setColor(Color.GREEN);
//paint.setStyle(Paint.Style.STROKE);
getPaint().setPathEffect(new DashPathEffect(new float[]{10,20}, 0));
getPaint().setAntiAlias(true);
getPaint().setStrokeJoin(Paint.Join.ROUND);
getPaint().setStrokeWidth(5f);
c.drawLine(xStart,yStart,xEnd,yEnd,getPaint());
}
public Paint getPaint() {
return paint;
}
public void setPaint(Paint paint) {
this.paint = paint;
}
Here is from CanvasView.java
protected void onDraw(Canvas canvas) {
paint.setPathEffect(null);
if(bitmap!=null){
canvas.drawBitmap(bitmap, 0, 0, paint);
for(MyCircle circle:circleList){// draw circles
myCanvas.drawCircle(getCircleMidPointX(circle.firstX, circle.lastX),getCircleMidPointY(circle.firstY, circle.lastY),circle.radius,myPaint);
}
}
for (Path p : paths){
canvas.drawPath(p, paint);
}
canvas.drawPath(path, paint);
for(MyLine line:lineList){ //draw lines
canvas.drawLine(line.xStart, line.yStart, line.xEnd, line.yEnd, line.getPaint());
}
final OnTouchListener drawLineListener = new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
FirstActivity.ll.setVisibility(LinearLayout.GONE);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
myLine = new MyLine(dashedLine);
myLine.xStart = event.getX();
myLine.yStart = event.getY();
return true;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
myLine.xEnd = event.getX();
myLine.yEnd = event.getY();
invalidate();
lineList.add(myLine);
break;
default:
Log.d("mock it up", "Unknown touch event " + event.toString());
return false;
}
return true;
}
};
final OnTouchListener drawDashedLineListener = new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
FirstActivity.ll.setVisibility(LinearLayout.GONE);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
return true;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
break;
default:
Log.d("mock it up", "Unknown touch event " + event.toString());
return false;
}
return true;
}
};

b in onDraw()
if(dashedLine)
line.paint.setPathEffect(dashEffect);
else
line.paint.setPathEffect(null);
You are resetting the effect for all lines, so that is what is being drawn: all dashed or all normal
What you probaly want to do is give each MyLine its own property:
boolean drawDashed =true/false;
And let it draw itself accordingly (picking the right paint with the right dasheffect)

public class MyLine { // line
public float x,y;
public float xStart,yStart,xEnd,yEnd;
private boolean drawDashed;
private Paint paint = new Paint();
public MyLine(boolean drawDashed)
{
if(drawDashed){
...
paint.setPathEffect(new DashPathEffect(new float[]{10,20}, 0));
....
} else{
....
paint.setPathEffect(null);
...
}
}
public void mouseDown(Path path,float xDown,float yDown){
//path.moveTo(xDown, yDown);
// path.lineTo(xDown, yDown);
xStart = xDown;
yStart = yDown;
}
public void mouseUp(Path path,float xUp,float yUp){
//path.lineTo(xUp, yUp);
xEnd = xUp;
yEnd = yUp;
}
public void draw(Canvas c){
c.drawLine(xStart,yStart,xEnd,yEnd,paint);
}
}
So add two private properties to Myline so the line it self has the knowledge how to draw itself:
private boolean drawDashed;
private Paint paint = new Paint();
then the draw method becomes very simple:
public void draw(Canvas c){
c.drawLine(xStart,yStart,xEnd,yEnd,paint);
}

Normal Line vs Dash Line

You'll see in the picture that, on the left is a normal line and on right is a dashed line. After I selected the dashed line, the normal line was transformed into a dashed line. If I try to paint with a normal line, it will transform the dashed line in normal line.
Here is the View I used to create each line:
public void setDashLine(){
dashedLine = true;
paint = new Paint();
paint.setPathEffect(dashEffect);
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(STROKE_WIDTH);
}
public void setNormalLine(){
//paint.setColor(Color.BLACK);
dashedLine = false;
paint.setPathEffect(null);
paint.setStyle(Paint.Style.STROKE);
paint.setPathEffect(null);
paint.setAntiAlias(true);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(STROKE_WIDTH);
}
protected void onDraw(Canvas canvas) {
if(dashedLine){
paint.setPathEffect(dashEffect);
}
else {
paint.setPathEffect(null);
}
final OnTouchListener drawLineListener = new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
FirstActivity.ll.setVisibility(LinearLayout.GONE);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
myLine = new MyLine();
myLine.xStart = event.getX();
myLine.yStart = event.getY();
return true;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
myLine.xEnd = event.getX();
myLine.yEnd = event.getY();
invalidate();
lineList.add(myLine);
break;
default:
Log.d("mock it up", "Unknown touch event " + event.toString());
return false;
}
return true;
}
};
final OnTouchListener drawDashedLineListener = new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
FirstActivity.ll.setVisibility(LinearLayout.GONE);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
return true;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
break;
default:
Log.d("mock it up", "Unknown touch event " + event.toString());
return false;
}
return true;
}
};

Should you call:
paint = new Paint();
in
public void setNormalLine()?