arash moeen
arash moeen

Reputation: 4713

Android draw a half circle with borders

I wanted to know if there is possible to draw a circle that has half of it filled, something like below:

enter image description here

if possible, later on I would like to fill this cirlce or make it empty with just borders left, which is fine but is there anyway to add animation to it? like from an empty circle to half filled or fully filled circle to happen with a transition?

thanks in advance

Upvotes: 5

Views: 9921

Answers (2)

Gelldur
Gelldur

Reputation: 11558

Answer by sample code:

Also checkout this answer: https://stackoverflow.com/a/22568222/1052261

public class CircleView extends View {

    public CircleView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        _paint = new Paint();
        _paint.setColor(context.getResources().getColor(R.color.colorPrimary));
        _paint.setAntiAlias(true);

        _paintCenter = new Paint();

        _paintCenter.setColor(Color.BLUE);
        _paintCenter.setAntiAlias(true);

        _timeRingSize = Utils.convertDpToPixel(context, 10);
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        final float height = canvas.getHeight();
        final float width = canvas.getWidth();

        float radious = width > height ? height * 0.5F : width * 0.5F;

        final float centerX = canvas.getWidth() * 0.5F;
        final float centerY = canvas.getHeight() * 0.5F;

        canvas.drawCircle(centerX, centerY, radious, _paint);

        RectF rectF = new RectF();
        rectF.set(centerX - radious, centerY - radious, centerX + radious, centerY + radious);

        canvas.drawArc(rectF, 0, 90, true, _paintCenter);
    }

    private final float _timeRingSize;
    private Paint _paintCenter;
    private Paint _paint;
}

Output:

enter image description here

Upvotes: 0

Muhammed Refaat
Muhammed Refaat

Reputation: 9103

try to assign a customized background to it, like:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >

    <gradient
        android:angle="0"
        android:endColor="#FF000000"
        android:startColor="#00000000" />

</shape>

Upvotes: 0

Related Questions