Draw text inside a filled rectangle using Canvas Android

Question

How to draw a filled rectangle with specified bounds and inside that rectangle text to be drawn using Canvas Android ?? I tried

mPaint.setColor(Color.GREEN);
canvas.drawText(mText, x, y, mPaint);
mPaint.setColor(Color.BLACK);
canvas.drawRect(x, y, x + w, y + h, mPaint);

but text is not inside of that rectangle. Can any buddy tell me how to draw a rectangle surrounding specified text with consideration of text size ??

Solution 1

Here i have hardcoded x and y values. You can change them

        mpaint= new Paint();
        mpaint.setColor(Color.RED);
        mpaint.setStyle(Style.FILL);
        paint2= new Paint();
        paint2.setColor(Color.GREEN);
        paint2.setTextSize(50);  //set text size
        float w = paint2.measureText(s)/2;
        float textSize = paint2.getTextSize();


        @Override
        protected void onDraw(Canvas canvas) {
            paint2.setTextAlign(Paint.Align.CENTER);
            canvas.drawRect(300-w, 300 - textsize, 300 + w, 300, mpaint);
            canvas.drawText(s, 300, 300 ,paint2); //x=300,y=300    
        }

Edit :

Its bad a idea to call measureText in onDraw. You can do that outside of onDraw.

There is a video on also about performance and why you should avoid allocations in onDraw. https://www.youtube.com/watch?v=HAK5acHQ53E

Resulting snap shot

Solution 2

If you have to center the text inside de rect you have use this code

    mpaint= new Paint();
    mpaint.setColor(Color.RED);
    mpaint.setStyle(Style.FILL);
    paint2= new Paint();
    paint2.setColor(Color.GREEN);
    paint2.setTextSize(50);  //set text size
    float w = paint2.measureText(s)/2;
    float textSize = paint2.getTextSize();


    @Override
    protected void onDraw(Canvas canvas) {
        paint2.setTextAlign(Paint.Align.CENTER);
        Rect rect = new Rect(300-w, 300 - textsize, 300 + w, 300);
        canvas.drawRect(rect, mpaint);
        canvas.drawText(s, rect.centerX(), rect.centerY() ,paint2); // center text inside rect
    }

Comments

[Arjun Kanti]

Sorry forgot to mention, the rectangle should cover only text area and the position and text size may change dynamically. Depends on the text size and length i 've to draw rectangle ??

[vikki_logs]

Why is there an empty space in the drawn rectangle? drawtext by default uses some top padding, if yes how to avoid that?

[Raghunandan]

@AlexanderFarber it must be copy paste mistake. I copied the code from the editor. I forgot and take that out.

[Raghunandan]

@vikki_logs you can always play with the values. left , right ,top and bottom to get it right. this is just a sample

[Alexander Farber]

Still bad solution to call measureText() in onDraw(), twice.

[Raghunandan]

@AlexanderFarber agree i answered this long back and i will rectify this soon.

[Raghunandan]

@AlexanderFarber edited and post a link that also explains why we should avoid allocations in onDraw and thanks for pointing out the mistake.

[Nainal]

What if textsize is greater than 300??, In this case text gets cut from left.

[Raghunandan]

@Nainal measure the text height and width and then draw the rect stackoverflow.com/questions/3654321/…