Android Graphics Libraries, creating a message box

Question

What I want to do is simple. I want to be able to draw a message box to the screen that wraps the height of the box to the size of the text within it.

I am using android's canvas objects to do this, but I do not know how this can be done with this library.

I am trying to reproduce this:

I want to be able to change the text that is within the banner and have it wrap the height. Can someone tell me how this is done?

EDIT

This is what I have currently. There is a lot of math and it barely works for one resolution let alone all of them.

        int x = (int) SCREEN_WIDTH / 2, y = (int) ((SCREEN_HEIGHT / 1.3f) + messageBox.getPaint().getTextSize() + 10);
        String[] message = messageBox.getMessage().split("\n");
        for (String line: message)
        {
            System.out.println(message.length);
              canvas.drawText(line, x, y, messageBox.getPaint());
              y += -messageBox.getPaint().ascent() + messageBox.getPaint().descent();
        }

and

private void resizeBox() {
    if(message == null) 
        return;

    String[] msg = message.split("\n");

    this.bottom += (this.getPaint().getTextSize() + 10) * msg.length;

}

Answer 1

I am not using XML within my application

Has someone given you the impression that using XML within [an Android] application is a choice?

It's not.

What you are trying to accomplish would take barely 5 minutes if you use the tools at your disposal.

There must be an easy way to do this or else why do people use android =.=

No idea what you mean by this.

I just draw RectF's and draw Text using the canvas

Okay, then:

In this image, the raw text is:

"Oops!\n\n" +
"Highscore: 59\n\n" +
"Your score: 12\n\n" +
"Better luck next time :(\n" +
"Touch the red box to try again."

As you can see, the line-widths fit comfortably in the given space - lines don't wrap.

In the next image, the last line-break (\n) has been removed to give you an example of what happens when line-widths do not fit inside the screen width:

Text for the second image is:

"Oops!\n\n" +
"Highscore: 59\n\n" +
"Your score: 12\n\n" +
"Better luck next time :( Touch the red box to try again."

We're using StaticLayout to render the text here: Link

StaticLayout takes care of all the details required to draw text on Canvas. Here's what the onDraw(Canvas) looks like:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (mStaticLayout == null) {
        mStaticLayout = new StaticLayout(mText, mTextPaint, getWidth(),
            Layout.Alignment.ALIGN_CENTER, 1f, 0f, true);
    }

    canvas.save();

    // Go to where we need to draw this text
    canvas.translate(0, getHeight() / 2 - mStaticLayout.getHeight() / 2);

    // 'mBoundingBoxPaint' is an instance of 'Paint'
    mBoundingBoxPaint.setColor(Color.BLACK);
    mBoundingBoxPaint.setAlpha(100);

    // Draw the bounding box *before* drawing the text
    canvas.drawRect(0, /* paddingTop */-50, mStaticLayout.getWidth(),
                      mStaticLayout.getHeight() + /* paddingBottom */50, 
                      mBoundingBoxPaint);

    // Draw the text
    mStaticLayout.draw(canvas);
    canvas.restore();
}

You can read more on working with StaticLayout at the link given above. Or, you can go through its source code to get a better understanding of how it renders the text.