如何在画布中的圆圈周围制作可用的填充空间（Android）

Question

I am having problems displaying dots on the outer ring of a circle. When a dot is placed at one of the edges of the circle, the dot is half cut off . Screenshot: https://drive.google.com/file/d/0B9BaYaKRY3v3Y2hXYkpSOE1nY28/edit?usp=sharing

I simply want to make the circles radius a litte smaller so there is some space around it where the outer dots have got some space. Of course the circle must still stay in the middle of the view. Tipps on how to do this are very appreciated.

The working code blow is fully working accept for the fact that the dots are being cut off. (Thanks to @Sherif elKhatib for the help on creating a 2 color circle)

public class PercentView extends View {

public PercentView(Context context) {
    super(context);
    init();
}

public PercentView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public PercentView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

private void init() {
    paint = new Paint();
    paint.setColor(Color.parseColor("#3498db"));
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
    bgpaint = new Paint();
    bgpaint.setColor(Color.parseColor("#2980b9"));
    bgpaint.setAntiAlias(true);
    bgpaint.setStyle(Paint.Style.FILL);
    rect = new RectF();
    circlePaint = new Paint();
}

Paint paint;
Paint bgpaint;
RectF rect;
float percentage = 5;
Paint circlePaint;
float[] dots = new float[1000];
int dotsNum = -1;
String[] colorCode = new String[1000];

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // draw background circle anyway
    canvas.drawArc(rect, -90, 360, true, bgpaint);
    if (percentage != 0) {
        int left = 0;
        int width = getWidth();
        int top = 0;
        rect.set(left, top, left + width, top + width);
        canvas.drawArc(rect, -90, (float) (3.6 * percentage), true, paint);

        for (int i = 0; i <= dotsNum; i++) {
            circlePaint.setAntiAlias(true);
            circlePaint.setColor(Color.parseColor(colorCode[i]));
            circlePaint.setStyle(Paint.Style.FILL);
            float dotX = (float) (this.getWidth() / 2 + this.getWidth() / 2
                    * Math.cos((dots[i] * 3.6 - 90) * Math.PI / 180));
            float dotY = (float) (this.getHeight() / 2 + this.getWidth()
                    / 2 * Math.sin((dots[i] * 3.6 - 90) * Math.PI / 180));
            canvas.drawCircle(dotX, dotY, 30, circlePaint);
        }
    }
}

public void setPercentage(float inpercentage) {
    this.percentage = inpercentage;
    invalidate();
}

public void setDot(int type) {
    dotsNum++;

    switch (type) {
    case 0: 
        colorCode[dotsNum] = "#27ae60";
        break;
    case 1: 
        colorCode[dotsNum] = "#f1c40f";
        break;
    case 2: 
        colorCode[dotsNum] = "#e74c3c";
        break;
    case 3: 
        colorCode[dotsNum] = "#34495e";
        break;
    }

    dots[dotsNum] = percentage;
    invalidate();
}

}

Answer 1

The only one working approach for me was that piece of code "width = getWidth() - padding". Kudos @Catherine.