An Android method to center text when using Canvas drawText

I’m not an expert on this subject just yet, but if you want the source code for an Android method to center text that you want to use with the drawText method of the Canvas class, I know that this code works in two places in my current Android app:

public static int getApproxXToCenterText(String text, Typeface typeface, int fontSize, int widthToFitStringInto) {
    Paint p = new Paint();
    p.setTypeface(typeface);
    p.setTextSize(fontSize);
    float textWidth = p.measureText(text);
    int xOffset = (int)((widthToFitStringInto-textWidth)/2f) - (int)(fontSize/2f);
    return xOffset;
}

As you can see, the method takes into account the font typeface and font size, as well as the text that you want to draw on screen. The widthToFitStringInto is a value in pixels, and defines the width of the area that you want to center the text within.

If/when I learn that this is the best way to do this, I’ll rename this method to get rid of the “approx” part of the name.

The main idea

The basic concept of all of this is that you want to center text within a region, as shown by this diagram that I just (rapidly) put together:

In that image, the text “this here is my text string” is the text you want to center, and you want to center it within the white region shown. For my purposes I’m only concerned about centering the text within the width; you’d need another function to center the text vertically. This example shows that if the resulting text string is 60 pixels wide, and you’re trying to center it within a region that’s 100 pixels wide, you want 20 pixels to be before the string (and 20 pixels after the string), so this method would return 20 for this example.

Usage example

This code will give you an idea of how to use this getApproxXToCenterText method:

int headerFontSize = 14;
Typeface typeface = StateUtils.SCOREBOARD_FONT_SANS;
String header = "Previous Play Calls";
int xOffset = getApproxXToCenterText(header, typeface, headerFontSize, statusAreaWidth);
canvas.drawText(header, xOffset, y, paint);

It might be better if I change the method so the Paint instance you use in the rest of your code is passed into this method, but again, I’m not an expert, so I wrote the code as shown. I just noticed that potential issue as I was writing this blog post.

As mentioned, I know that this text-centering method works in two places in my current Android application where I use a different font, and slightly different font sizes. If it’s not 100% correct, I hope it at least points you in the right direction.

As a final note, you “normally” think about Android screen sizes in “dp” units, but when you’re drawing directly to the screen you have to think in units of pixels.