Aqif Hamid
Aqif Hamid

Reputation: 3521

How to have a circular TextView

I have been trying to make a circular TextView. Its a circle in which I want to accomodate whole space above a circular bubble as shown in image below.

Kindly see attached image.

Circular bubble with text in side

In this image, we have a circular bubble with circular text in it. I have already tried setting oval shape .xml as background of TextView but still no luck.

Edit:

As text length increase. It must reduces in size to fit inside the circle. This is the hardest part to think about.

Upvotes: 16

Views: 2235

Answers (1)

Mathias Conradt
Mathias Conradt

Reputation: 28665

You need to create a custom view, extending from TextView probably, setting the circle as background image, and calculate the text width / break the lines manually according to the width of the text.

To calculate the width of a string, see How to calculate string font width in pixels?

Some math and calculations is required of course to measure the available space per line; but I think that's the only way, as there's no standard component out there to do it.

To place the text onto the view, use drawText of the Canvas class.

Upvotes: 10

Related Questions