How to draw a rectangle around text inside a canvas

Question

I am trying to create A Rectangle around the text, this text is drawn inside a canvas. There is an image inside the canvas too. Here is the code for drawing the text inside an image but I am unable to get the position of the Rectangle right. Here is the one line where i need help canvas.drawRect(HELLLLLLLLLLLLPPPPPPPPPPPPPPPP);

> >  public Bitmap drawTextOnBitmap(Context context, int resId, String
> > text)  {
> >       //  void drawRect(float left, float top, float right, float bottom, Paint paint)
> >         // prepare canvas
> >         int offset=10;
> >         Resources resources = context.getResources();
> >         float scale = resources.getDisplayMetrics().density;
> >         Bitmap bitmap = BitmapFactory.decodeResource(resources, resId);
> > 
> >         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 immutable, 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) (bitmap.getHeight() / 10 * 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(text, 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;
> >         Paint myPaint = new Paint();
> >         myPaint.setStyle(Paint.Style.STROKE);
> >         myPaint.setColor(Color.rgb(0, 0, 0));
> >         myPaint.setStrokeWidth(10);
> >         // draw text to the Canvas center
> >         canvas.save();
> > 
> > 
> >         canvas.translate(x, y);
> >         textLayout.draw(canvas);
> >         canvas.drawRect(HELLLLLLLLLLLLPPPPPPPPPPPPPPPP);
> >         canvas.restore();
> > 
> > 
> >         //  void drawRect(float left, float top, float right, float bottom, Paint paint)
> > 
> > 
> >         return bitmap;
> >     }

This is what i want to achieve and I am stuck at creating the rectangle at the right spot

@MobileDeveloper I just added more details, can you understand it now? — Ankit Srivastava, Sep 09 '16 at 01:15
My question was what parameters have you already tried and what was the result? You should be able to measure the size and location of the text and determine how the rectangle should be drawn. Did you try the suggestion from surya below? — Mobile Developer, Sep 12 '16 at 20:15

score 2 · Answer 1 · answered Sep 09 '16 at 04:26

2

float w = myPaint.measureText(text, 0,text.length();

Use this as both width and height and the give some margins for your reactangle

answered Sep 09 '16 at 04:26

surya

607
5
18

2

Please view this , the developer had made Box around the text with animation Though https://github.com/hanks-zyh/HTextView – surya Sep 14 '16 at 04:34

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

use paint.setStyle(Paint.Style.STROKE);

along with

Canvas.drawrect();

It will draw a hollow rectangle.

    Paint paint=new Paint();
    paint.setColor(Color.parseColor("#000000"));
    paint.setStyle(Paint.Style.STROKE);

If you do not know how drawrect() works,see this post: https://stackoverflow.com/a/20919124/6265154

edited May 23 '17 at 12:02

Community

1
1

answered Sep 13 '16 at 06:09

user6265154

353
1
6
19

score 0 · Answer 3 · answered Nov 17 '18 at 02:16

0

I have already answered this on another so question here -> Draw text inside a filled rectangle using Canvas Android I hope you find it helpful

answered Nov 17 '18 at 02:16

androCoder-BD

498
7
13

How to draw a rectangle around text inside a canvas

3 Answers3