How to add round corner to canvas drawrect in Android?

Question

I am creating a rectangle in @Override method of ReplacementSpan. How to add RoundCorner and padding to it?

Code:

@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
    RectF rect = new RectF(x, top, x + measureText(paint, text, start, end), bottom);
    paint.setColor(mBackgroundColor);
    canvas.drawRect(rect, paint);
    paint.setColor(mForegroundColor);
    canvas.drawText(text, start, end, x, y, paint);
}

Edit-1

I am using MeasureText:

private float measureText(Paint paint, CharSequence text, int start, int end) { return paint.measureText(text, start, end); }

Edit-2

After some suggestions I made these changes and I can see Rounded corner on Rectangle

@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
    RectF rect = new RectF(x, top, x + measureText(paint, text, start, end), bottom);
    paint.setColor(mBackgroundColor);
    canvas.drawRoundRect(rect, 15,15,paint);
    paint.setColor(mForegroundColor);
    canvas.drawText(text, start, end, x, y, paint);

}

and here is the screenshot:

I am calling draw method from following code:

int currentIndex = 0;
for (int i = 0; i < words.length - 1; i++) {
            s.setSpan(new CustomDrawble(Color.GRAY, Color.WHITE), currentIndex, currentIndex + words[i].length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            currentIndex += words[i].length() + 1;
        }

Ally

Answer 1

Canvas has the method drawRoundRect. You will have to provide the RectF to be drawn, the Paint, as for drawRect and two addition paramters, rx and ry that represent the x and y radius of your rounded corners. E.g.

canvas.drawRoundRect(rect, 5, 5, paint);

will draw a rect with round corner of 5pixels

Edit2:

disclaimer: use dip instead of pixels

@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
   RectF rect = new RectF(x, top, x + measureText(paint, text, start, end) + 10, bottom);
   paint.setColor(mBackgroundColor);
   canvas.drawRoundRect(rect, 15,15,paint);
   paint.setColor(mForegroundColor);
   canvas.drawText(text, start, end, x + 5, y, paint); 
 }

Henrietta

Thanks for your answer I just used it and it works! I was looking for How to set Margin of DrawRect text? How can I do that? – Ally

margin? The only thing that comes to my mind atm is to make the rectangle a little bit larger. canvas doen't deal with maring/padding. You might want to try a the view level – Henrietta

Actually I am using ReplacementSpan and to measure text I am using measureText. Please have a look at Edit-1 section – Ally

you want you rounded rect wider than the text to avoid that text touch the borders of you rectange? – Henrietta

Checkout the Edit-2 section in the post – Ally

rect has to be wider. Try adding 10dip to the right value of rect, and add to the start left of your drawText of 5dip – Henrietta

Let us continue this discussion in chat. – Ally

I gotta go.. maybe this afternoon (cest timezone) – Henrietta

I actually tried it but it didn't work. I have added a new question : #33318235 Please have a look at it – Ally

Answer 2

This works for me:

 public static int cnvToDip(Context context,
                            int     pixels)
 {

  return ((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, pixels, context.getResources().getDisplayMetrics()));
 }

public static float[] getRoundRectangleShape(Context context,
                                              int     radius)
 {

  Display display = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();

  Point point = new Point();
  display.getSize(point);

  return new float[]{point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius),
                     point.x / cnvToDip(context, radius)};
 }

ShapeDrawable shapeDrawable = new ShapeDrawable(new RoundRectShape(getRoundRectangleShape(context, 20), null, null));
    shapeDrawable.getPaint().setColor(Color.BLUE);

   @Override
   public void draw(Canvas canvas)
   {

    super.draw(canvas);

    shapeDrawable.draw(canvas);

Gertrude