Draw text inside android circle

Question

public static Bitmap drawCircle(int width,int height, int borderWidth) {
    Bitmap canvasBitmap = Bitmap.createBitmap( 350, 350, Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(canvasBitmap, TileMode.CLAMP, TileMode.CLAMP);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(shader);
    paint.setShader(null);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.WHITE);
    paint.setStrokeWidth(borderWidth);

    Paint paint1 = new Paint();
    paint1.setAntiAlias(true);
    paint1.setShader(shader);
    paint1.setShader(null);
    paint1.setStyle(Paint.Style.STROKE);
    paint1.setColor(Color.WHITE);
    paint1.setStrokeWidth(borderWidth); 
    Canvas canvas = new Canvas(canvasBitmap);
    float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
    //canvas.drawCircle(width / 2, height / 2, radius - borderWidth / 2, paint);
    final RectF rect = new RectF();
    rect.set(100, 100, 300, 300); 
    canvas.drawArc(rect, 270, 90, false, paint1);
    canvas.drawText("25%", 100, 100, 100, 100, paint1);
    return canvasBitmap;
}

How can I draw a text inside the arc? I get IndexOutOfBoundException in drawtext... What parameter shall i pass? how can i get it inside the arc?

score 8 · Answer 1 · answered May 23 '14 at 09:46

You could try this.

    private Paint paint;
    private Paint circlePaint;

    paint = new Paint();
    circlePaint = new Paint();

    paint.setColor(Color.WHITE);
    paint.setTextSize(18f);
    paint.setAntiAlias(true);
    paint.setTextAlign(Paint.Align.CENTER);

    Rect bounds = new Rect();
    paint.getTextBounds(text, 0, text.length(), bounds);

    circlePaint.setColor(Color.RED);
    circlePaint.setAntiAlias(true);

    canvas.drawCircle(-3, 15 - (bounds.height() / 2), bounds.width() + 5, circlePaint);

    canvas.drawText(text, -3, 15, paint);

Note : (-3,15) is the starting co-ordinates to draw the text and (+5) is the padding.

This should give you an output like the notification badge here -> sample

score 3 · Answer 2 · answered Jul 02 '14 at 13:04

I had a similar requirement where needed text drawn in the centre of a circle.

Here's how I did it (within my customview's onDraw) albeit it similar to @Anoop's answer.

//draw circle
canvas.drawCircle(xPos,yPos,mCircleSize, mCirclePaint);

mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

//this ensures X alignment
mTextPaint.setTextAlign(Paint.Align.CENTER);

// Measure the text rectangle to get the height        
Rect result = new Rect();
mTextPaint.getTextBounds(marker.label, 0, marker.label.length(), result);
//take half the height as the offset
int yOffset = result.height()/2;

//add offset to ensure Y is aligned center
canvas.drawText(marker.label, xPos, yPos+yOffset, mTextPaint);

score 1 · Answer 3 · edited May 23 '17 at 12:00

1

Idea: Use a simple TextView component.

Then create this custom shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="10dip"/>
    <stroke android:color="@android:color/black" android:width="2dip"/>
    <solid android:color="@android:color/transparent"/>
</shape>

And finally set this shape to be the background of your textview.

For more suggestions check this link: Android draw circle around Text

edited May 23 '17 at 12:00

Community

1
1

answered Mar 06 '14 at 12:29

Adrian Olar

2,883
4
35
63

thanks alot for suggestion, not whayt i am looking for. What I have is sth being downloaded i want to display circular progress bar and in middle of it pewrcentage of what downloaded. this is why i draw an arc, then i draw bigger arc... i want in middle to put percentage as well. – user3278732 Mar 06 '14 at 14:01

Draw text inside android circle

3 Answers3

Linked