How to align text vertically?

Question

Target: Android >= 1.6 on a pure Canvas.

Suppose I want to write a function that will draw a (width, height) large red rectangle and then draw a black Hello World text inside. I want the text to be visually in the center of the rectangle. So let's try:

void drawHelloRectangle(Canvas c, int topLeftX,          int topLeftY, int width, int height) {     Paint mPaint = new Paint();     // height of 'Hello World'; height*0.7 looks good     int fontHeight = (int)(height*0.7);      mPaint.setColor(COLOR_RED);     mPaint.setStyle(Style.FILL);     c.drawRect( topLeftX, topLeftY, topLeftX+width, topLeftY+height, mPaint);      mPaint.setTextSize(fontHeight);     mPaint.setColor(COLOR_BLACK);     mPaint.setTextAlign(Align.CENTER);     c.drawText( "Hello World", topLeftX+width/2, ????, mPaint); } 

Now I don't know what to put in drawText's argument marked by ????, i.e. I don't know how to vertically align the text.

Something like

???? = topLeftY + height/2 + fontHeight/2 - fontHeight/8;

appears to work more or less ok, but there must be a better way.

Answer 1

Example to centre on cx and cy:

private final Rect textBounds = new Rect(); //don't new this up in a draw method  public void drawTextCentred(Canvas canvas, Paint paint, String text, float cx, float cy){   paint.getTextBounds(text, 0, text.length(), textBounds);   canvas.drawText(text, cx - textBounds.exactCenterX(), cy - textBounds.exactCenterY(), paint); } 

Why doesn't height()/2f work the same?

exactCentre() = (top + bottom) / 2f.

height()/2f = (bottom - top) / 2f

These would only yield the same result when top is 0. This may be the case for some fonts at all sizes, or other fonts at some sizes, but not for all fonts at all sizes.

Answer 2

textY = topLeftY + height/2 - (mPaint.descent() + mPaint.ascent()) / 2 

The distance from "baseline" to "center" should be -(mPaint.descent() + mPaint.ascent()) / 2