How To Draw An Arc Segment With Different Fill And Stroke Colors For Each Side?

I have got this code from another SO question. I was wondering how I could modify it so that the lines connecting the circles and inner circle perimeter have a different color than

Solution 1:

You need to draw the parts of the ring segment separately with different paints directly via draw* methods from the same calculated endpoints as the filling's bounds. The Path is still needed for filling it though. I went one step further and split your strokeAll to strokeSides+strokeOuter for easier reuse. Consider the following bunch of lines:

/**
 * Draws a thick arc between the defined angles, see {@link Canvas#drawArc} for more.
 * This method is equivalent to
 * <pre><code>
 * float rMid = (rInn + rOut) / 2;
 * paint.setStyle(Style.STROKE); // there's nothing to fill
 * paint.setStrokeWidth(rOut - rInn); // thickness
 * canvas.drawArc(new RectF(cx - rMid, cy - rMid, cx + rMid, cy + rMid), startAngle, sweepAngle, false, paint);
 * </code></pre>
 * but supports different fill and stroke paints.
 *
 * @param cx horizontal middle point of the oval
 * @param cy vertical middle point of the oval
 * @param rInn inner radius of the arc segment
 * @param rOut outer radius of the arc segment
 * @param startAngle see {@link Canvas#drawArc}
 * @param sweepAngle see {@link Canvas#drawArc}, capped at &plusmn;360
 * @param fill filling paint, can be <code>null</code>
 * @param strokeInner stroke paint for inner ring segment, can be <code>null</code>
 * @param strokeOuter stroke paint for outer ring segment, can be <code>null</code>
 * @param strokeSides stroke paint for lines connecting the ends of the ring segments, can be <code>null</code>
 * @see Canvas#drawArc
 */publicstaticvoiddrawArcSegment(Canvas canvas, float cx, float cy, float rInn, float rOut, float startAngle,
        float sweepAngle, Paint fill, Paint strokeInner, Paint strokeOuter, Paint strokeSides) {
    if (sweepAngle > CIRCLE_LIMIT) {
        sweepAngle = CIRCLE_LIMIT;
    }
    if (sweepAngle < -CIRCLE_LIMIT) {
        sweepAngle = -CIRCLE_LIMIT;
    }

    RectFouterRect=newRectF(cx - rOut, cy - rOut, cx + rOut, cy + rOut);
    RectFinnerRect=newRectF(cx - rInn, cy - rInn, cx + rInn, cy + rInn);

    if (fill != null || strokeSides != null) { // to prevent calculating this lot of floatsdoublestart= toRadians(startAngle);
        doubleend= toRadians(startAngle + sweepAngle);
        floatinnerStartX= (float)(cx + rInn * cos(start));
        floatinnerStartY= (float)(cy + rInn * sin(start));
        floatinnerEndX= (float)(cx + rInn * cos(end));
        floatinnerEndY= (float)(cy + rInn * sin(end));
        floatouterStartX= (float)(cx + rOut * cos(start));
        floatouterStartY= (float)(cy + rOut * sin(start));
        floatouterEndX= (float)(cx + rOut * cos(end));
        floatouterEndY= (float)(cy + rOut * sin(end));
        if (fill != null) {
            PathsegmentPath=newPath();
            segmentPath.moveTo(innerStartX, innerStartY);
            segmentPath.lineTo(outerStartX, outerStartY);
            segmentPath.arcTo(outerRect, startAngle, sweepAngle);
            // Path currently at outerEndX,outerEndY
            segmentPath.lineTo(innerEndX, innerEndY);
            segmentPath.arcTo(innerRect, startAngle + sweepAngle, -sweepAngle); // drawn backwards
            canvas.drawPath(segmentPath, fill);
        }
        if (strokeSides != null) {
            canvas.drawLine(innerStartX, innerStartY, outerStartX, outerStartY, strokeSides);
            canvas.drawLine(innerEndX, innerEndY, outerEndX, outerEndY, strokeSides);
        }
    }
    if (strokeInner != null) {
        canvas.drawArc(innerRect, startAngle, sweepAngle, false, strokeInner);
    }
    if (strokeOuter != null) {
        canvas.drawArc(outerRect, startAngle, sweepAngle, false, strokeOuter);
    }
}

Solution 2:

set color before paint (ex. before canvas.drawPath(segmentPath, fill);)

ex.

fill.setColor(Color.RED)
stroke.setColor(Color.GREEN)

you can parse Color

Color.parseColor("#FFFFFF")
// -> fill.setColor(Color.parseColor("#FFFFFF"));

or import from resources

getResources().getColor(R.color.mycolor);
// -> fill.setColor(getResources().getColor(R.color.mycolor));