New line when painting a text in a image

Question

I got an app that the user insert a text, and when he clicks on a button, it generates a new image with that text in a predeterminated image and saves it on the phone.

But sometimes that text is too long and exceeds the image's width, so what I'm trying to do is break it into a new line. How should I do it?

I tried with breakText, but I'm not sure how to use it... I was using:

        textPaint.breakText(text[2], true, bmp.getWidth(), null);

But it didn't work.

Also, when I manually break the line at the EditText it shows everything in only one and with a "[]" where the second line should start...

EDIT: My code original code:

    private void SaveMyImage() {
    // TODO Auto-generated method stub
    File myDir = new File(Environment.getExternalStorageDirectory().getPath()+"/App/");
    myDir.mkdirs();
    File file = new File (myDir, fname);
    if (file.exists ()) file.delete (); 
    try {
        FileOutputStream out = new FileOutputStream(file);

        Canvas canvas = new Canvas(bmp); 
        Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        if (text[0].equals("Image 01")) {
            textPaint.setColor(Color.BLACK);
        }
        else {
            textPaint.setColor(Color.WHITE);
        }
        textPaint.setTextAlign(Align.CENTER);
        textPaint.setTextSize(tamanho);
        textPaint.setShadowLayer(2, 2, 2, Color.BLACK);
        textPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER)); // Text Overlapping Pattern
        canvas.drawBitmap(bmp, 0, 0, null);
        canvas.drawText(text[1], largura, altura2, textPaint);
        canvas.drawText(text[2], largura, altura, textPaint);
        bmp.compress(Bitmap.CompressFormat.JPEG, 90, out);
        out.flush();
        out.close();
        Toast.makeText(SaveIMG.this, "Image saved on phone", Toast.LENGTH_LONG).show();
    } catch (Exception e) {
       e.printStackTrace();
    }
    sendBroadcast(new Intent(
            Intent.ACTION_MEDIA_MOUNTED,
            Uri.parse("file://" + Environment.getExternalStorageDirectory())));
    uri = Uri.parse(Environment.getExternalStorageDirectory().getPath()+"/App/"+fname);
    pronto.setImageURI(uri);
}

Answer 1

breatText returns the number of characters in the string that may can be displayed if before being cut off. I would suggest calling it in a loop. Removing however many characters it can fit and placing them in a string each iteration until the source text is empty.:

ArrayList<String> lines = new ArrayList<String>();
String test = text[2];
while(!test.isEmpty()){
    int newLength = textPaint.breakText(test, true, bmp.getWidth(), null);
    lines.add(test.substring(0, newLength));
    test = test.substring(newLength);
}

As for printing multiple lines. I'm assuming you're using Canvas.drawText which does not seem to support line breaks. So you'll need to draw each line separately with different Y-Values. (Code adapted from here):

Rect bounds = new Rect();
int yoff = 0;
for(String line:lines){
    canvas.drawText(line, x, y + yoff, paint);
    textPaint.getTextBounds(line, 0, line.length(), bounds);
    yoff += bounds.height();
}

EDIT I don't see in your code where you actually split the strings as I described. I can't diagnose why my solution didn't work if you don't actually show me how you implemented it.

Working from here though I think I can show you how to fix the error. If you want to do it multiple times it would be a good idea to write a method for it. Add the following method to your class:

public void splitAndDrawLines(Canvas canvas,String text, int x, int y, Paint textPaint, int width){
    ArrayList<String> lines = new ArrayList<String>();
    String test = text;
    while(!test.isEmpty()){
        int newLength = textPaint.breakText(test, true, canvas.getWidth(), null);
        lines.add(test.substring(0, newLength));
        test = test.substring(newLength);
    }
    Rect bounds = new Rect();
    int yoff = 0;
    for(String line:lines){
        canvas.drawText(line, x, y + yoff, textPaint);
        textPaint.getTextBounds(line, 0, line.length(), bounds);
        yoff += bounds.height();
    }
}

Replace this code:

canvas.drawText(text[1], largura, altura2, textPaint);
canvas.drawText(text[2], largura, altura, textPaint);

With this code:

this.splitAndDrawLines(canvas, text[1], largura, altura2, textPaint);
this.splitAndDrawLines(canvas, text[2], largura, altura, textPaint);

EDIT 2:

Here is the code I used to set up and text your code:

    // Create a 100x100 bitmap
    bmp = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    // Set the height of the text to 12.
    this.tamanho = 12f;
    // Draw the text in the middle of the picture width-wise.
    this.largura = bmp.getWidth() / 2;
    // Text parameters
    this.text = new String[]{"MAKE THE TEXT WHITE", "This text starts in the middle of the middle is too long and will be split","Short text at the top of the image"}; 
    // Start one line size into the picture height-wise.
    this.altura = this.tamanho;
    // Start in the middle of the picture height-wise.
    this.altura2 = bmp.getHeight()/2;
    // Output File name.
    this.fname = "TEST.jpg";
    // Save the image
    SaveMyImage();

Answer 2

I found a solution, I created a layout and set the string as a textview and the image as a background and drawed it.