make text at the centre of the circle

Question

I wanted to draw a Text inside a Circle provided that text should be matched properly at the center of the circle. Actually I am not getting a general method/way to make text at the center. Also it should not depend in whether the Text is in uppercase or lower case.

My attempt :-

textPaint.TextAlign = Paint.Align.Center; // basic need.

After that I tried to get Ascent and Descent of the Font and get their half and moved the text below by this value. But it is not centered :(

  var fontAscent = -textPaint.Ascent(); // default value is negative for ascent
  var fontDescent = textPaint.Descent();

note :- I am getting the circle at the center so its center point is correct.

Any Idea how can i do it.

Seems like you've got the math down, so perhaps this [graphics](http://stackoverflow.com/questions/3654321/measuring-text-height-to-be-drawn-on-canvas-android) question is what you're looking for? — , Sep 11 '14 at 13:18
Thanks @JeremyMiller I am very new to android. I am struggling what to search for. I think it is what i needed. But have to try. — loop, Sep 11 '14 at 13:22

score 1 · Answer 1 · answered Sep 11 '14 at 13:30

1

I would try like

Add this line to your layout,

<TextView
android:layout_width = "100dp"
android:layout_height = "100dp"
android:background = "@drawable:circle"
android:text = "Lorem Ipsum"
android:gravity = "center" />

Then create a shape to your drawable folder.

<shape shape="circle" stroke_width = "1dp" stroke_color = "@android:color:black" />

There should be some typo bugs. I am writing it without IDE.

Good luck there.

answered Sep 11 '14 at 13:30

Emre Aktürk

3,306
2
18
30

I am trying with three text in the center :- http://stackoverflow.com/questions/25712178/paint-class-to-draw-text – loop Sep 11 '14 at 13:34
you set put text like android:text = "First\nSecond\Third". Its a dirty solution but could work for you – Emre Aktürk Sep 11 '14 at 13:42

score 1 · Answer 2 · answered Sep 11 '14 at 13:55

I have similar views in my app, monas. And what I have done is in the layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.huteri.monas"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <CircleView
        android:id="@+id/piegraph"
        android:layout_width="330dp"
        android:layout_height="330dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/sumpie_cat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:fontFamily="sans-serif-condensed"
        android:paddingBottom="50dp"
        android:textAlignment="center" />

    <TextView
        android:id="@+id/sumpie_percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:textAlignment="center"
        android:textSize="30sp"
        app:typeface="roboto_black" />

    <TextView
        android:id="@+id/sumpie_total"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:paddingTop="50dp"
        android:textAlignment="center"
        app:typeface="roboto_slab_light" />

</RelativeLayout>

Well, I have to admit this is not the best solution yet, but it works for me. You may try it in the layout instead

Thanks Huteri, Can I draw arc on on your circle with some animation ? — loop, Sep 11 '14 at 14:07
Can you add your animation code ? I can't mark it right but you are so sure so +1 for your alternate solution :) I have got the solution from the comment. — loop, Sep 12 '14 at 09:16

score 0 · Answer 3 · answered Sep 11 '14 at 13:29

0

try this .

create a file in drawable folder as circle.xml and copy this code

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

<gradient
    android:angle="270"
    android:endColor="#00FFFFFF"
    android:startColor="#00FFFFFF" />

 </shape>

and for your TextView set Background use this android:background="@drawable/circle"

answered Sep 11 '14 at 13:29

Rajesh Mikkilineni

854
10
22

I am trying with three text in the center :- http://stackoverflow.com/questions/25712178/paint-class-to-draw-text – loop Sep 11 '14 at 13:35

make text at the centre of the circle

3 Answers3