-1

How can I draw a stroke with a fill color and a (different color) border?

e.g. I want something like this:

enter image description here

I tried creating 2 paints - one with a Stroke style and one with a Fill style, but calling 

strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setColor(Color.parseColor("#A3A3A3"));
fillPaint = new Paint();
fillPaint.setStyle(Paint.Style.FILL);
fillPaint.setColor(Color.WHITE);

canvas.drawPath(totalPath, strokePaint);
canvas.drawPath(totalPath, fillPaint);

doesn't create the intended effect and looks quite bad.

Is it even possible?

Maverick Meerkat
  • 5,737
  • 3
  • 47
  • 66
  • Do you want different color for stroke and fill ? – Aditya Dec 16 '18 at 12:10
  • yes, I want it to look like theres a border around the line – Maverick Meerkat Dec 16 '18 at 12:19
  • Possible duplicate of [Drawing a filled rectangle with a border in android](https://stackoverflow.com/questions/13545792/drawing-a-filled-rectangle-with-a-border-in-android) – Haroun Hajem Dec 16 '18 at 13:10
  • Could you add a screenshot to the question? Want to know how it looks bad to be able to help you. – Haroun Hajem Dec 16 '18 at 13:12
  • 1
    Maybe you are calling the drawPath functions in the wrong order? Try running `canvas.drawPath(totalPath, fillPaint);` before `canvas.drawPath(totalPath, strokePaint);` –  Dec 16 '18 at 13:39

1 Answers1

0

Figured it out. The trick is to draw it twice, once as a background layer that is 1-2 pixels thicker, and then the foreground layer.

i.e. :

strokePaintBackground = new Paint(Paint.ANTI_ALIAS_FLAG);
strokePaintBackground.setStyle(Paint.Style.STROKE);
strokePaintBackground.setColor(Color.BLACK);
strokePaintBackground.setStrokeWidth(8);
strokePaintBackground.setPathEffect(new DashPathEffect(new float[]{30, 15}, 0));
strokePaintBackground.setStrokeCap(Paint.Cap.ROUND);
strokePaintBackground.setStrokeJoin(Paint.Join.ROUND);

strokePaintForground = new Paint(Paint.ANTI_ALIAS_FLAG);
strokePaintForground.setStyle(Paint.Style.STROKE);
strokePaintForground.setColor(Color.WHITE);
strokePaintForground.setStrokeWidth(6);
strokePaintForground.setPathEffect(new DashPathEffect(new float[]{30, 15}, 0));
strokePaintForground.setStrokeCap(Paint.Cap.ROUND);
strokePaintForground.setStrokeJoin(Paint.Join.ROUND);

canvas.drawPath(totalPath, strokePaintBackground);
canvas.drawPath(totalPath, strokePaintForground);
Maverick Meerkat
  • 5,737
  • 3
  • 47
  • 66