Android drawText including text wrapping

Question

I am currently creating an image editor and am attempting to draw text on top of on image using canvas.drawText(). So far I have been successful in doing this but when the user enters text that is too long, the text just continues on one line out of the page and doesn't wrap itself to the width of the screen. How would I go about doing this? I have tried using a static layout but cannot seem to get it to work, has anyone got a tutorial to do this?

My function for drawing on a canvas using static layout:

 public Bitmap createImage(float scr_x,float scr_y,String user_text){

            Canvas canvas = new Canvas(image);

            scr_x = 100;
            scr_y = 100;
            final TextPaint tp = new TextPaint(Color.WHITE);     
            canvas.save();
            StaticLayout sl = new StaticLayout("" + user_text, tp, originalBitmap.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
            sl.draw(canvas);

         return image;
        }

Okay, I've updated my code, but when I try to draw on the image nothing happens at all, I have no idea why either:

    public Bitmap createImage(String user_text) {
    // canvas object with bitmap image as constructor
    Canvas canvas = new Canvas(image);
    TextPaint tp = new TextPaint();
    tp.setColor(Color.RED);
    tp.setTextSize(50);
    tp.setTextAlign(Align.CENTER);
    tp.setAntiAlias(true);
    StaticLayout sl = new StaticLayout("" + user_text, tp,
            canvas.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1, 0, false);
    canvas.translate(100, 100);
    sl.draw(canvas);
    return image;
}

Is staticlayout not meant to be used to draw on canvas?

Answer 1

Yes, StaticLayout is what you're meant to use to draw multi-line text on a Canvas. Save yourself a world of pain and don't think about breaking text yourself -- you're on the right path.

I'm not sure about the bitmap problem, but your second code above worked just fine to draw text on a canvas for me.

Learn to use StaticLayout , then draw the Layout object onto a canvas using the Layout.draw() method.

References

Answer 2

You should handle it yourself, calculating the text size and wrapping the content in some way (break line at max width or wrap last word).

I already did it on Java SE with the FontMetrics, never for Android; but you should take a look:

http://developer.android.com/reference/android/graphics/Paint.FontMetrics.html

As pointed by Lisa, StaticLayout is the way to go to measure text wrapping.

Answer 3

public Bitmap drawMultilineTextToBitmap(Context gContext,
                                   int gResId,
                                   String gText) {

  // prepare canvas
  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 antialiased Paint
  TextPaint paint=new TextPaint(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);

  // set text width to canvas width minus 16dp padding
  int textWidth = canvas.getWidth() - (int) (16 * scale);

  // init StaticLayout for text
  StaticLayout textLayout = new StaticLayout(
    gText, paint, textWidth, Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);

  // get height of multiline text
  int textHeight = textLayout.getHeight();

  // get position of text's top left corner
  float x = (bitmap.getWidth() - textWidth)/2;
  float y = (bitmap.getHeight() - textHeight)/2;

  // draw text to the Canvas center
  canvas.save();
  canvas.translate(x, y);
  textLayout.draw(canvas);
  canvas.restore();

  return bitmap;
}

source : http://www.skoumal.net/en/android-drawing-multiline-text-on-bitmap/