Draw a text on a circle path in android

Question

I need to draw a text on a circle path. I have tried the drawTextOnPath() method. But for texts like "fertile window" in the image attched, the text rotates and is not readable.

Code I have used :

customPath2.addArc(mCircleRectF, 30F, 64.28F);
    customPaint2.setAntiAlias(true);
    customPaint2.setDither(true);
    customPaint2.setStrokeWidth(mCircleStrokeWidth);
    customPaint2.setColor(Color.parseColor("#93BE66"));
    customPaint2.setStyle(Paint.Style.STROKE);
    customPaint2.setStrokeCap(Paint.Cap.ROUND);
    canvas.drawPath(customPath2, customPaint2);

    titlePaint.setColor(Color.parseColor("#ffffff"));
    titlePaint.setAntiAlias(true);
    titlePaint.setTypeface(Typeface.MONOSPACE);  titlePaint.setLetterSpacing(0.07F);
    titlePaint.setTextAlign(Paint.Align.CENTER);
    titlePaint.setTextSize(35f);

    canvas.drawTextOnPath("FERTILE WINDOW", customPath2, 0, 8, titlePaint);

Jello

So starting from the top, you want the first 90 degress to be "downward" text, then the next 180 degress "upward", and then the rest "upward" again? Using XML only? Are you doing any code? Its a bit unclear what you want. The shown behavior is the expected one. Specially since you can "rotate" the View, and keep all text readable from the same point of view. – Gauzy

this might help you – Coeternity

@Gauzy - I have used onDraw() and not XML. I have created and drawn the paths. – Jello

@RRR - Yes, I did refer to that link. It says drawTextOnPath() but doesnt say how to rotate though. As in that example, the text is to the top left of the circle, it is readable. But in my example I want it in the bottom of the ring. – Jello

Refer to this question. He has the arc as well, and his text is shown in the right way. – Argus

Answer 1

Thanks to comments for their help, to draw the text "outward", make the arc counterclockwise.
In your example, startAngle becomes 94.28 and sweepAngle becomes -64.28.

Kotlin:

val enclosingRect = RectF(0f, 0f, 200f, 200f)
val path = Path()
path.addArc(enclosingRect, 94.28f, -64.28f)
canvas.drawTextOnPath("FERTILE WINDOW", path, 0f, 0f, myPaint)

Java:

RectF enclosingRect = new RectF(0f, 0f, 200f, 200f);
Path path = new Path();
path.addArc(enclosingRect, 94.28f, -64.28f);
canvas.drawTextOnPath("FERTILE WINDOW", path, 0f, 0f, myPaint);

That was for texts at the bottom of the circle (from 0 to 180 or from -180 to -360 degrees).

For angles between 180 and 360 or 0 and -180 degrees you want to draw the arcs clockwise.

Seiter