Custom View - digits and alphabets on the circumference of a circle

Question

Can anyone explain to me what is the cause of this behavior?

The problem is that, from "off" to "2" always shows perfectly, above the radius I gave. Radius is +35 than the circle's radius.

Now when I write digits, as it goes down, it starts to mess up.

And in terms of alphabets, it touches the edge and overlaps it.

can anyone tell me the reason for this? because radius is always more than the current circle's radius so the alphabets should appear similarly like "off".

computation of xy points...

// Angles are in radians.
   val startAngle = Math.PI * (9 / 8.0)   
   val angle = startAngle + pos.ordinal * (Math.PI / 4)
   x = (radius * cos(angle)).toFloat() + width / 2
   y = (radius * sin(angle)).toFloat() + height / 2

I played around with the degrees and it seems like the closer to 0 degree starts to mess up, as the degrees increase, it keeps adding more space in radius.

Illustrated here... I would like to what what is causing this behavior, or just explain the reason/ math behind it. thanks

nothing is wrong with the code, the observed behaviour is due to the constraints imposed by the parent view on the child view — Sekiro, Jan 17 '21 at 06:47
To clearly notice the behaviour, add a background color to your custom view and change the text `off` to something like `offffff`, the text now overlaps — Sekiro, Jan 17 '21 at 06:48
@rcs okay I changed, and yes it does overlap, but still the question remains as to why the digit text "5" is also overlaping? It shouldnt because radius is always more than the circle, so it should start the text at the set radius right? — Ajay P. Prajapati, Jan 17 '21 at 06:54
try this `val yPos = (pointPosition.y - (paint.descent() + paint.ascent()) / 2).toInt() canvas.drawText(label, pointPosition.x, yPos.toFloat(), paint)` if it helps. i guess you are trying out code from https://github.com/google-developer-training/android-advanced/tree/master/CustomFanController. ended up aith https://ibb.co/zN2XsYm. for larger text it does overlap — Raghunandan, Jan 17 '21 at 16:17
@Raghunandan Yes, you are right, I am trying that tutorial and I haven't seen the next part of the tutorial because I want to understand it and fix it myself.. about your suggestion, could you explain what it does? based on calculations, it shouldn't increase as it goes higher in degrees... thanks.. — Ajay P. Prajapati, Jan 18 '21 at 05:44
@apprajapati here's the details https://stackoverflow.com/questions/11120392/android-center-text-on-canvas on why you need to you text ascent and decent to be taken into account — Raghunandan, Jan 18 '21 at 05:49
@Raghunandan you are right, your comment does fix my overlapping problem, I guess for text, it is not possible right? Digits are now showing perfectly without any changes in radius... thanks.. — Ajay P. Prajapati, Jan 18 '21 at 06:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227469/discussion-between-ajay-p-prajapati-and-raghunandan). — Ajay P. Prajapati, Jan 18 '21 at 06:08

Raghunandan · Accepted Answer · 2021-01-18T06:18:15.670

From the comments it looks like you are following this code lab code https://github.com/google-developer-training/android-advanced/tree/master/CustomFanController

You just need to take into account text ascent and decent. So draw the numbers on the circumference of the circle

val yPos = (pointPosition.y - (paint.descent() + paint.ascent()) / 2).toInt() 
canvas.drawText(label, pointPosition.x, yPos.toFloat(), paint)

The above is based on Android Center text on canvas

This does draw the text at the correct place, but if the text is too large it does overlap

Custom View - digits and alphabets on the circumference of a circle

1 Answers1