How to draw circle with partitioned in android?

Question

I want to draw this type of circle in my application. I am able to draw circle using Canvas but I can't get any idea about how to make partitioned?

Can anyone suggest me how can I make partitioned of circle?

enter image description here

Edit:- I want to draw line that are in inner circle.

enter image description here

Thanks in advance.

himanshu · Accepted Answer · 2012-02-10T06:14:00.303

Here's the working code for your requirement....

Editing the code:-

    Paint paint1 = new Paint();
        Paint paint2 = new Paint();
        Paint paint3 = new Paint();
        Paint paint4 = new Paint();
        Paint paint5 = new Paint();
        final RectF rect = new RectF();
        int mRadius = 130;
        //Example values
        rect.set(getWidth()/2- mRadius, getHeight()/2 - mRadius, getWidth()/2 + mRadius, getHeight()/2 + mRadius); 
        paint1.setColor(Color.GREEN);
        paint1.setStrokeWidth(mRadius/2);
        paint1.setAntiAlias(true);
        paint1.setStrokeCap(Paint.Cap.BUTT);
        paint1.setStyle(Paint.Style.STROKE);
        paint2.setColor(Color.RED);
        paint2.setStrokeWidth(mRadius/2);
        paint2.setAntiAlias(true);
        paint2.setStrokeCap(Paint.Cap.BUTT);
        paint2.setStyle(Paint.Style.STROKE);
        paint3.setColor(Color.BLUE);
        paint3.setStrokeWidth(5);
        paint3.setAntiAlias(true);
        paint3.setStrokeCap(Paint.Cap.BUTT);
        paint3.setStyle(Paint.Style.STROKE);
        canvas.drawArc(rect, 0, 60, false, paint1);
        canvas.drawArc(rect, 60, 60, false, paint2);
        canvas.drawArc(rect, 120, 60, false, paint1);
        canvas.drawArc(rect, 180, 60, false, paint2);
        canvas.drawArc(rect, 240, 60, false, paint1);
        canvas.drawArc(rect, 300, 60, false, paint2);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2-mRadius/2, getHeight()/2-mRadius/2,paint3);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2+mRadius/2, getHeight()/2-mRadius/2,paint3);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2-mRadius/2, getHeight()/2+mRadius/2,paint3);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2+mRadius/2, getHeight()/2+mRadius/2,paint3);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2-mRadius/4-mRadius/2, getHeight()/2,paint3);

        canvas.drawLine(getWidth()/2, 
                getHeight()/2, getWidth()/2+mRadius/4+mRadius/2, getHeight()/2,paint3);

        paint4.setColor(Color.BLACK);

        canvas.drawCircle(getWidth()/2, getHeight()/2, mRadius/2, paint4);

        paint5.setColor(Color.YELLOW);
        paint5.setStrokeWidth(3);
        paint5.setAntiAlias(true);
        paint5.setStrokeCap(Paint.Cap.BUTT);
        paint5.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(getWidth()/2, getHeight()/2, mRadius/2, paint5);

I hope now you satisfy with my answer....

Hey himanshu can you tell me if I want to draw a simple lines according to this circle then how can I? I tried by my end but I am not able to found my mistake. I posted the image which I want to do. Thanks in advance — anddev, Feb 09 '12 at 11:47
ok i understand what you want,give me some time.I'll try on it. — himanshu, Feb 09 '12 at 12:00
Thanks himanshu, I updated my image. I show the line using arrow which I want to draw in my app. — anddev, Feb 09 '12 at 12:02
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7493/discussion-between-mansi-vora-and-himanshu) — anddev, Feb 09 '12 at 12:02
Hello himanshu.. GM.. How r u? Do u know how to draw circle border color using Canvas? — anddev, Feb 13 '12 at 07:06
Its not good morning,Its good afternoon.you can put a different colored ring just outside your circle.Try paint.setStrokeWidth(0 or 1); and use this paint to draw the ring. — himanshu, Feb 13 '12 at 07:32
Can you tell me if I want to make same as above picture with black border then how can I make that? Thanks. — anddev, Feb 13 '12 at 08:18
@himanshu : thanks and i useful for this code but how can i text set on it cirlce? — Najib.Nj, Dec 31 '12 at 10:45

score 5 · Answer 2 · answered Feb 09 '12 at 05:40

5

I have an idea first draw inside circle with partition using

        can.drawArc(oval, startAngle, sweepAngle, useCenter, paint)

Take angle value like 0 t0 60, and then again draw another arc with same center take angle value from 60 to 120 and so on.Every time set different color in Paint.After completion of inside circle, almost all work done.Now draw white circle with same center but small radius after first circle.So it will create over first

Hope it will help you :)

answered Feb 09 '12 at 05:40

Tofeeq Ahmad

11,935
4
61
87

Thanks Sameer for quick reply, Yes I got your idea but can you tell me the value of oval parameter? – anddev Feb 09 '12 at 05:49
1

for ex RectF rect=new RectF(100,100,130,140); can.drawArc(rect, 0.0f, 60.0f, true, new Paint()); and if you got any idea from any answer then learn to appreciate it by giving up vote – Tofeeq Ahmad Feb 09 '12 at 05:56
if you have any more doubt then you can come to chat?today im little less busy – Tofeeq Ahmad Feb 09 '12 at 06:10
Yes using this I am not able to get complete output which I want to get. Can you give me the example code in more details? – anddev Feb 09 '12 at 06:13
You can see Himanshu give me the link to follow according to that are you able to get any idea? – anddev Feb 09 '12 at 06:25
Hopefully you should understand that its not possible for me to write code for you.Now it just about coordinate geometry.You should try yourself on the base of this idea – Tofeeq Ahmad Feb 09 '12 at 06:36

score 1 · Answer 3 · answered Feb 10 '12 at 05:54

Hey I found the solution of my query,

final RectF rect1 = new RectF();
int mWidth = this.getWidth()/2;
int mHeight = this.getHeight()/2;
int mRadius = 130, mRadius1 = 50;
rect1.set(mWidth -(mRadius-mRadius1), mHeight - (mRadius-mRadius1), mWidth + (mRadius-mRadius1), mHeight + (mRadius-mRadius1));

Paint paintLines = new Paint();
paintLines.setColor(Color.BLACK);
paintLines.setStrokeWidth((mRadius-mRadius1)/2);
paintLines.setAntiAlias(false);
paintLines.setStrokeCap(Paint.Cap.BUTT);
paintLines.setStyle(Paint.Style.STROKE);

canvas.drawArc(rect1, 0, 1, false, paintLines); 
canvas.drawArc(rect1, 30, 1, false, paintLines);
canvas.drawArc(rect1, 60, 1, false, paintLines);
canvas.drawArc(rect1, 90, 1, false, paintLines);
canvas.drawArc(rect1, 120, 1, false, paintLines);
canvas.drawArc(rect1, 150, 1, false, paintLines);

Yes I saw that thanks himanshu. Do you know how to use zoom functionality in canvas? — anddev, Feb 10 '12 at 09:28
I asked to google and I used this code http://vivin.net/2011/12/04/implementing-pinch-zoom-and-pandrag-in-an-android-view-on-the-canvas/ and zoom is working but it is not scroll properly. I will zoom only in one side of screen. — anddev, Feb 10 '12 at 09:37

How to draw circle with partitioned in android?

3 Answers3

Linked