Draw text inside a circle

Question

I'm working on an Android application and I want to draw a circle with text inside. I want the fill to be white with a black boarder and black text. Right now I have a ShapeDrawable:

mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setColor(0xFFFFFF);

This however makes the whole circle white (and with a white background you can't see it) and after a while searching as to how you can add text to the shape I can't seem to find an answer that works. I should also note that I will be adding an arbitrary number of circles with different text in each based on user input. Any help would be much appreciated!

Drawable is not used to draw text, you should try bitmap, just like Geralt illustrated — chinglun, Nov 23 '13 at 21:43
what??? Drawable is used to draw everything that can be drawn using a Canvas — pskink, Nov 23 '13 at 21:50
http://stackoverflow.com/questions/10060470/android-draw-circle-around-text — Naddy, Nov 23 '13 at 22:21

score 19 · Accepted Answer · answered Nov 23 '13 at 21:45

19

You can try this alternative method.

Create a drawable file oval.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
   <solid android:color="#fff"/>
   <stroke android:width="2px" android:color="#000"/>
</shape>

Then create a RelativeLayout and set the background with the oval drawable

<RelativeLayout
    android:id="@+id/circle"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:background="@drawable/oval" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/hello_world" />
</RelativeLayout>

The result will be something like this:

enter image description here

answered Nov 23 '13 at 21:45

Joel Fernandes

4,776
2
26
48

I edited my question to add in a key piece of information in that I will need multiple circles with different text in each. This will have to be done programmably so I can not simple hard code them into the xml files – Ryan Sayles Nov 23 '13 at 23:06
2

This answer is great because in http://stackoverflow.com/questions/10060470/android-draw-circle-around-text you are told to set the oval drawable as background for the TextView. But if you don't draw a filled circle then TextView touches the edges of the circle. So the method with a RelativeLayout surrounding the TextView is far better! – unlimited101 Sep 24 '15 at 12:19
If you don't need to use an outline around your background DON't use the RelativeLayout as a container for the TextView. In most cases this is not needed. – Andrea Thacker Oct 05 '17 at 18:31

score 3 · Answer 2 · answered Feb 20 '15 at 05:59

I am sure late to reply here, but this might be helpful to others.

    ShapeDrawable colorCode = new ShapeDrawable(new OvalShape());
    colorCode.getPaint().setStyle(Paint.Style.FILL); //See more paint style for border circle etc. like STROKE
    colorCode.getPaint().setAntiAlias(true);
    colorCode.getPaint().setColor(getResources().getColor(YOUR_COLOUR_HERE_FROM_XML));
    colorCode.setIntrinsicHeight(Globals.dp2px(5, getActivity())); //converting dp to px, you can just put any integer instead of dp2px method
    colorCode.setIntrinsicWidth(Globals.dp2px(5, getActivity()));
    greenText.setBackgroundDrawable(colorCode);

`setBackgroundDrawable` is now deprecated, but just replace with `setBackground` — nasch, Feb 15 '19 at 22:44

Draw text inside a circle

2 Answers2

Linked