How to draw stroke on custom shape on android canvas

Question

I am trying to add a stroke to a custom shape I have added.

Here is the code

    private void drawBackground(Canvas canvas) {

          float height = getHeight();
          float width = getWidth();

          canvas.drawRoundRect(0, 0, width, height, 5, 5, canvasPaint);
          canvas.drawRoundRect(0, 0, getTextWidth(), getHeight(), 5, 5, canvasStrokePaint);//to draw black stroke

          canvas.drawText(name, width / 2 - getTextWidth() / 2, getBitmapHeight() + 20, textPaint);
          Path path = new Path();

          path.moveTo((width / 3), height);
          path.lineTo((width / 2), (height + height / 3));
          path.lineTo((width - width / 3), height);
          path.lineTo((width / 3), height);

          path.close();

          canvas.drawPath(path, canvasPaint);
          canvas.drawPath(path, canvasStrokePaint);//to draw black stroke
}

The output

Here you can see there is a closed edge for rectangle and triangle.

But the stroke should be outside of the shape.

Requirement

Thanks in advance

Answer 1

You can try to draw this particular shape in black, and then you can write on the top of it another shape (a bit smaller) in green color. The result should be as you would expected.

Answer 2

Try this code:

private void drawStroke(Canvas canvas) {
    int rectangleWidth = 20;
    int rectangleHeight = 10;
    float height = getHeight();
    float width = getWidth();

    // start
    canvasStrokePath.reset();
    canvasStrokePath.moveTo(0, 5);

    // first arc
    arcRect.set(0, 0, 10, 10);
    canvasStrokePath.arcTo(arcRect, 180, -90, true);

    // going right
    canvasStrokePath.lineTo(width - 10, 0);

    // second arc
    arcRect.set(width - 10, 0, width, 10);
    canvasStrokePath.arcTo(arcRect, 90, -90, true);

    // going bottom
    canvasStrokePath.lineTo(width, height - rectangleHeight - 10);

    // third arc
    arcRect.set(width - 10, height - rectangleHeight - 10, width, height - rectangleHeight);
    canvasStrokePath.arcTo(arcRect, 0, -90, true);

    // going to rectangle (right edge)
    canvasStrokePath.lineTo(width / 2 + rectangleWidth / 2, height - rectangleHeight);

    // going to rectangle center
    canvasStrokePath.lineTo(width / 2, height);

    // going to rectangle (left edge)
    canvasStrokePath.lineTo(width / 2 - rectangleWidth / 2, height - rectangleHeight);

    // going to left
    canvasStrokePath.lineTo(5, height - rectangleHeight);

    // fourth arc
    arcRect.set(0, height - rectangleHeight - 10, 10, height - rectangleHeight);
    canvasStrokePath.arcTo(arcRect, 270, -90, true);

    // going to top
    canvasStrokePath.lineTo(0, 5);

    canvasStrokePath.close();

    canvas.drawPath(canvasStrokePath, canvasStrokePaint);
}

I didn't build it, I hope there will be no mistakes