How to give border to circle using paint

Question

Hi i have implemented Progress bar and it is working fine, but my problem is i need to give a only border to circle using paint. I worked on that but it is taking all the area of circle, i need only border.

My paint code:

    mCirclePaint = new Paint();
    mCirclePaint.setAntiAlias(true);
    mCirclePaint.setDither(true);
    mCirclePaint.setColor(mCircleColor);
    mCirclePaint.setStrokeWidth(mCircleStrokeWidth);
    mCirclePaint.setStyle(Paint.Style.STROKE);
    mCirclePaint.setStrokeJoin(Paint.Join.MITER);
    // mCirclePaint.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    mCirclePaint.setStrokeCap(Paint.Cap.SQUARE);
    canvas.drawPath(mCirclePath, mCirclePaint)

@harshadpansuriya Yes tried with changing values in paint n all and i posted code also — Piku, Jan 23 '16 at 06:53

score 18 · Accepted Answer · edited May 23 '17 at 11:55

18

try this ,

paint = new Paint();
paint.setColor(Color.GREEN);        
paint.setStrokeWidth(2);            
paint.setStyle(Paint.Style.STROKE);         
canvas.drawCircle(0, 0, (float) (width1/(1.4)), paint);

and refer this , might be help full to you .Android : canvas.drawBitmap() method not working properly

edited May 23 '17 at 11:55

Community

1
1

answered Jan 23 '16 at 08:59

Radhey

2,139
2
24
42

find width1 = display.getWidth(); there. – Radhey Jan 23 '16 at 09:21
No :( it is not working. It is not showing bg grey circle with above code – Piku Jan 23 '16 at 09:32
use this and let me know if you stuck .https://android-arsenal.com/details/1/2182 – Radhey Jan 23 '16 at 09:50
Can u look this link http://stackoverflow.com/questions/35053719/how-to-set-the-border-line-to-semi-circle-progress-bar-edge – Piku Jan 28 '16 at 06:16
I implemented a border but i am struck in edges – Piku Jan 28 '16 at 06:17
can you pest some of your code portion that draw your edges as you mention in your second question ? – Radhey Jan 28 '16 at 07:13
Ya sure c shall we chat in chat room – Piku Jan 28 '16 at 07:14

GIGAMOLE · Answer 2 · 2016-01-23T09:40:27.403

This is my code for your solution. Just copy this class and try to understand what your were doing wrong. This view will draw progress bar in center of view.

    /**
     * Created by GIGAMOLE on 23.01.2016.
     */
    public class StrokeProgressBar extends View {

    private final static float BAR_STROKE = 10.0f;
    private final static float BAR_HEIGHT = 60.0f;
    private final static float BAR_PADDING = 100.0f;

    private final Paint mProgressPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setAntiAlias(true);
            setColor(Color.BLUE);
            setStyle(Style.FILL);
        }
    };

//    private final Paint mBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
//        {
//            setDither(true);
//            setAntiAlias(true);
//            setColor(Color.GRAY);
//            setStyle(Style.FILL);
//        }
//    };

    private final Paint mBgStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setAntiAlias(true);
            setColor(Color.BLUE);
            setStyle(Style.STROKE);
            setStrokeWidth(BAR_STROKE);
            setStrokeCap(Cap.SQUARE);
        }
    };

    public StrokeProgressBar(final Context context) {
        this(context, null);
    }

    public StrokeProgressBar(final Context context, final AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StrokeProgressBar(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // Draw always
        setWillNotDraw(false);
    }

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);

        final float height = canvas.getClipBounds().height();
        final float width = canvas.getClipBounds().width();

        // Background rect
        final Rect bgRect = new Rect(
                (int) BAR_PADDING,
                (int) (height / 2.0f - BAR_HEIGHT / 2.0f),
                (int) (width - BAR_PADDING),
                (int) (height / 2.0f + BAR_HEIGHT / 2.0f)
        );
        // Progress bar rect
        final Rect progressRect = new Rect(
                (int) BAR_PADDING,
                (int) (height / 2.0f - BAR_HEIGHT / 2.0f),
                (int) ((width - BAR_PADDING) * 0.7f), // 0.7f is the fraction of progress == 70%
                (int) (height / 2.0f + BAR_HEIGHT / 2.0f)
        );

        // At first draw stroke
        canvas.drawRect(
                bgRect,
                mBgStrokePaint
        );
//        // At second draw bg
//        canvas.drawRect(
//                bgRect,
//                mBgPaint
//        );
        // At third draw progress
        canvas.drawRect(
                progressRect,
                mProgressPaint
        );
    }
}

Thanks for Your suggestion I will check the code and let you know:) — Piku, Jan 23 '16 at 09:39

How to give border to circle using paint

2 Answers2