CODEWITHSUNDEEP
androidxmldrawableshapes
H.C
H.C

Reputation: 608

Drawing a shape with a curve line

Whant to draw as in this image enter image description here

for that would use as in the link ShapeDrawable Drawing multiple shapes with ShapeDrawable in xml with Android but don't know how to make the line curve ---------------------edit-----------------------------------

based on @Bojan Kseneman answer tried with the following code

    PointF pt1l = new PointF(canvas.getWidth()/2+40, (float)newPosY-canvas.getWidth()/40);//canvas.getWidth()/40
    PointF pt2l = new PointF(canvas.getWidth()/2+40, (float)newPosY+canvas.getWidth()/40);
    PointF midl = new PointF(canvas.getWidth()/2+30, (float)newPosY+canvas.getWidth()/40);

    PointF pt1r = new PointF(canvas.getWidth()/2-40, (float)newPosY-canvas.getWidth()/40);
    PointF pt2r = new PointF(canvas.getWidth()/2-40, (float)newPosY+canvas.getWidth()/40);
    PointF midr = new PointF(canvas.getWidth()/2-30, (float)newPosY+(canvas.getWidth()/40)/2);

    Path pathLeft = new Path();
    //pathLeft.setFillType(Path.FillType.EVEN_ODD);
    pathLeft.moveTo(pt1l.x,pt1l.y);
    pathLeft.quadTo(midl.x,midl.y,pt2l.x,pt2l.y);

    Path pathRight = new Path();
    //pathRight.setFillType(Path.FillType.EVEN_ODD);
    pathRight.moveTo(pt1r.x,pt1r.y);
    pathRight.quadTo(midr.x,midr.y,pt2r.x,pt2r.y);
    Paint curveLineR = new Paint();
    curveLineR.setColor(Color.GREEN);

    Paint curveLineL = new Paint();
    curveLineL.setColor(Color.GREEN);

    Paint circle = new Paint();
    circle.setColor(Color.GREEN);

    canvas.drawPath(pathLeft, curveLineL);
    canvas.drawPath(pathRight, curveLineR);
    //canvas.drawCircle(canvas.getWidth()/2,canvas.getHeight()/2,canvas.getWidth()/30,circle);
    canvas.drawCircle(canvas.getWidth()/2,(float)newPosY,canvas.getWidth()/40,circle);

but didn't get a curve line more like parte of a circle(changing the value of midr and midl got closer but still was't quite a line). Maybe with a bit of more tests could get the line but for now only need the circle, for anyone that also trying to get the curve line leaving the code and +1 for @Bojan Kseneman for pointing in the right direction.

Upvotes: 1

Views: 1755

Answers (1)

Bojan Kseneman
Bojan Kseneman

Reputation: 15668

You should make a custom View and draw stuff like that with the Canvas. You have to draw two paths (two curves) and a circle in the middle. Here is the basic idea, you will have to do the rest of the work on your own.

protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Path pathLeft = new Path();
 pathLeft.moveTo(x1, y1);
 pathLeft.quadTo(x1, y1, x2, y2);

 Path pathRight = new Path();
 pathLeft.moveTo(x1, y1);
 pathLeft.quadTo(x1, y1, x2, y2);

 canvas.drawPath(pathLeft, mPathPaint);
 canvas.drawPath(pathRight, mPathPaint);
 canvas.drawCircle(x, y, radius, paint); 
}

Upvotes: 2

Related Questions