31

I'd like to paint in a Canvas something like:

enter image description here

How can I do the bordered effect? Thanks

Addev
  • 31,819
  • 51
  • 183
  • 302
  • have you tried this solutions? http://stackoverflow.com/questions/3182393/android-textview-outline-text – Andreas Feb 03 '12 at 18:01

1 Answers1

63

Draw the text two times. First draw the text with a fill paint like so:

Paint fillPaint = new Paint();
fillPaint.setColor(Color.MAGENTA);
canvas.drawText(.... fillPaint);

Then draw it again with a stroke like so:

Paint stkPaint = new Paint();
stkPaint.setStyle(Style.STROKE);
stkPaint.setStrokeWidth(8);
stkPaint.setColor(Color.WHITE);
canvas.drawText(.... stkPaint);
Jean-Philippe Jodoin
  • 4,536
  • 1
  • 25
  • 28
Samuel
  • 16,923
  • 6
  • 62
  • 75
  • +1, but wouldn't it be best to do the fill first, then the stroke on top? – DNA Feb 03 '12 at 18:36
  • @Samuel what would u do if u want to add an extra stroke over top of black stroke? – Muhammad Umar Dec 13 '16 at 16:26
  • @MuhammadUmar you can add as many drawing passes as you want with different stroke colors and widths. Just call `canvas.drawText()` again with a different paint. – Samuel Dec 14 '16 at 19:06
  • 8
    I went through all answer and this is the best. However I recommend to `drawText(... , StrokePaint)` **before** `drawText (... , TextPaint)` – murt Sep 05 '17 at 09:53
  • To add on, you should draw the stroke first. The area for the stroke is added around the filled text area so the fill won't cover the outline. But some characters have the stroke cross over the fill area too like '4' or '3'. – Stevie Kideckel Mar 07 '21 at 09:25
  • 1
    The stroke should be half outside and half inside the fill, so depending on what you want you either want to draw the fill first so that the stroke will be fully visible. Or if you draw the stroke first only the outside half of the stroke will be seen. For text drawing the stoke first will be more readable. For other shapes drawing fill first may look better – Samuel Mar 10 '21 at 06:06