Wrapping long text on an Android Canvas

Question

I have a custom control that is doing a lot of 2D drawing straight to the canvas.

Some of this drawing is text, so I am using the Canvas.drawText() method.

I want to draw the text within some bounds - a top-left, certain maximum width, and a maximum number of lines. After drawing the text, I want to know how many lines it took.

Is there a built-in function to draw text within bounds doing the splitting sensibly?

If not, is there a standard recipe for doing so?

See this answer for a good usage example of `StaticLayout`s: http://stackoverflow.com/a/8369690/293280 — Joshua Pinter, May 26 '15 at 00:15

score 34 · Accepted Answer · edited Aug 14 '16 at 03:01

34

You can use the android.text.StaticLayout class for this; simply create a StaticLayout for the desired text, alignment, width, etc. and call its draw(Canvas) method to draw to the canvas.

edited Aug 14 '16 at 03:01

CODE-REaD

2,819
3
33
60

answered Feb 25 '10 at 23:40

Roman Nurik

29,665
7
84
82

Amazing that I'd overlooked it – Will Feb 26 '10 at 18:05
Is this only for Android? What about other platforms? – B Seven May 07 '11 at 05:41
Great! How would you centre the text in the canvas? – Tim Kist May 22 '13 at 11:05
@zboarda Not sure what you mean, but have you tried Paint.setTextAlign(Align.CENTER); ? – Ray Britton Jul 07 '13 at 08:03
@Eenvincible see my blog post http://www.skoumal.net/en/android-drawing-multiline-text-on-bitmap/ – gingo Nov 14 '15 at 22:01

Alexander · Answer 2 · 2012-07-25T10:23:18.190

4

You can use Paint.getTextBounds() to measure the size of the entire string or Paint.getTextWidths() to get the width of each character. Then split the string appropriately before drawing it.

edited Jul 25 '12 at 10:23

answered Jul 25 '12 at 09:35

Alexander

61
2

Alessandro Giusa · Answer 3 · 2015-08-14T19:12:53.100

I had the same problem. One of my first solution is following.

/**
     * This function draws the text on the canvas based on the x-, y-position.
     * If it has to break it into lines it will do it based on the max width
     * provided.
     * 
     * @author Alessandro Giusa
     * @version 0.1, 14.08.2015
     * @param canvas
     *            canvas to draw on
     * @param paint
     *            paint object
     * @param x
     *            x position to draw on canvas
     * @param y
     *            start y-position to draw the text.
     * @param maxWidth
     *            maximal width for break line calculation
     * @param text
     *            text to draw
     */
public static void drawTextAndBreakLine(final Canvas canvas, final Paint paint,
        final float x, final float y, final float maxWidth, final String text) {
    String textToDisplay = text;
    String tempText = "";
    char[] chars;
    float textHeight = paint.descent() - paint.ascent();
    float lastY = y;
    int nextPos = 0;
    int lengthBeforeBreak = textToDisplay.length();
    do {
        lengthBeforeBreak = textToDisplay.length();
        chars = textToDisplay.toCharArray();
        nextPos = paint.breakText(chars, 0, chars.length, maxWidth, null);
        tempText = textToDisplay.substring(0, nextPos);
        textToDisplay = textToDisplay.substring(nextPos, textToDisplay.length());
        canvas.drawText(tempText, x, lastY, paint);
        lastY += textHeight;
    } while(nextPos < lengthBeforeBreak);
}

What is missing:

No intelligent break-line mechanism, since it breaks based on the maxWidth

How to call?

    paint.setTextSize(40);
    paint.setColor(Color.WHITE);
    paint.setSubpixelText(true);
    float textHeight = paint.descent() - paint.ascent();
    CanvasUtils.drawTextAndBreakLine(canvas, paint, this.left,
            textHeight, this.displayWidth, this.text);

I have a static class called CanvasUtils where I encapsulate stuff like this. Basically I draw the text within a rectangle. This is the reason textHeight is the height of the text. But you can pass what you want to the function.

Good programming!

Yes this worked for me but it forces words to break! Is there a way to fix that? — Eenvincible, Nov 07 '15 at 13:05
Not in particular. what happens with this code is that the text wraps correctly within the rectangle but some words get cut off ending up breaking into new lines with part of the words showing in one line and part of it in the next line. — Eenvincible, Nov 07 '15 at 17:06
This is what I was saying. And you would like to have an algorithm which is doing hyphenation correctly or an algorithm which is just putting the affected word into the next line? — Alessandro Giusa, Nov 08 '15 at 18:35

Wrapping long text on an Android Canvas

3 Answers3

Linked