Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 813
Aqif Hamid Avatar asked Jul 02 '12 12:07

Aqif Hamid


People also ask

How do you add corner radius to TextView?

xml file and add an attribute to that TextView, for which you want to add rounded corners. The attribute is android: background=”@drawable/rounded_corner_view”.


1 Answers

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.

like image 160
Mathias Conradt Avatar answered Oct 21 '22 11:10

Mathias Conradt