Android - How to draw text on a bitmap

This short article shows you how to draw text on bitmap loaded from resources.

First we read bitmap from resources. This bitmap is immutable, so we create mutable copy. Then we create Paint object and set them text size, color, shadow, etc.

Now we are ready to draw! But where? We need to calculate postion of bottom left corner of drawed text. That's all. Enjoy!

public Bitmap drawTextToBitmap(Context gContext, 
  int gResId, 
  String gText) {
  Resources resources = gContext.getResources();
  float scale = resources.getDisplayMetrics().density;
  Bitmap bitmap = 
      BitmapFactory.decodeResource(resources, gResId);
 
  android.graphics.Bitmap.Config bitmapConfig =
      bitmap.getConfig();
  // set default bitmap config if none
  if(bitmapConfig == null) {
    bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
  }
  // resource bitmaps are imutable, 
  // so we need to convert it to mutable one
  bitmap = bitmap.copy(bitmapConfig, true);
 
  Canvas canvas = new Canvas(bitmap);
  // new antialised Paint
  Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  // text color - #3D3D3D
  paint.setColor(Color.rgb(61, 61, 61));
  // text size in pixels
  paint.setTextSize((int) (14 * scale));
  // text shadow
  paint.setShadowLayer(1f, 0f, 1f, Color.WHITE);
 
  // draw text to the Canvas center
  Rect bounds = new Rect();
  paint.getTextBounds(gText, 0, gText.length(), bounds);
  int x = (bitmap.getWidth() - bounds.width())/2;
  int y = (bitmap.getHeight() + bounds.height())/2;
 
  canvas.drawText(gText, x, y, paint);
 
  return bitmap;
}

EDIT 2013-11-16: Fixed bug in canvas.drawText() call. Variables x and y are no longer multiplied by scale.

gingo's picture

Sorry, there was bug in canvas.drawText(gText, x * scale, y * scale, paint);, because x and y are already in dips.

Anonym's picture

This works but It seems the text is ot showing up on android 4.1.2, is this a defect?

Anonym's picture

Thank you for this.
But I tested it on a Galaxy Tab 2 (density = 1) and a Galaxy Nexus (density = 2), and the text wasn't displayed on the nexus. Removing the multiplication of x and y by the density solved it.

Anonym's picture

If I create another class to hold the above code, how would I call that bitmap to show it?

Would I use the following:

Bitmap font = BitmapFactory.decodeResource(mContext.getResources(), "something here");

Or is there an easier way to call the bitmap?
I am using Rajawali framework and I have an opengl live wallpaper where I would like a text view to be displayed and be editable via the settings. Any help would be greatly appreciated. Thank you.

Anonym's picture

Thanks!

Ondřej Kroupa

Anonym's picture

Thanks for taking the time to post this. It really helped.


© 2014 Vladislav Skoumal
Webmail Home Back To Top