Divide a circle dynamically in android

Question

I am working in an android application and I have a List of stings. If the List of string contains 3 string, I have to divide the circle into 3 equal parts and bind the three string in the divided area of the circle. How can I do this. Which widget should I use to make this circle. Please help me.

Answer 1

You can create a custom view and inside this draw one circle and divide in no of the section using draw line.

Inside your onDraw() method use this code.

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

    int width = getWidth(); // get center point of view.
    // Draw circle
    Paint mPaintCircle = new Paint();
    mPaintCircle.setColor(Color.WHITE);
    mPaintCircle.setAntiAlias(true);
    mPaintCircle.setStyle(Paint.Style.STROKE);
    mPaintCircle.setStrokeWidth(5);

    canvas.drawCircle(width / 2, width / 2, width / 2, mPaintCircle);
    // Draw line
    Paint mPaintLine = new Paint();
    mPaintLine.setColor(Color.GREEN);
    mPaintLine.setStrokeWidth(5);

    //number of section you want to divide.
    int pointsTODraw = 8; 
    float pointAngle = 360 / pointsTODraw; //angle between points
    for (float angle = 0; angle < 360; angle = angle + pointAngle) { //move round the circle to each point
            float x = (float) (Math.cos(Math.toRadians(angle)) * radiusPart); //convert angle to radians for x and y coordinates
            float y = (float) (Math.sin(Math.toRadians(angle)) * radiusPart);
            canvas.drawLine(radiusPart, radiusPart, x + radiusPart, y + radiusPart, mPaintLine);
    }
}

Answer 2

public class Demo extends Activity {
    /** Called when the activity is first created. */
    float values[]={300,400,100,500};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        LinearLayout linear=(LinearLayout) findViewById(R.id.linear);
        values=calculateData(values);
        linear.addView(new MyGraphview(this,values));

    }
    private float[] calculateData(float[] data) {
        // TODO Auto-generated method stub
        float total=0;
        for(int i=0;i<data.length;i++)
        {
            total+=data[i];
        }
        for(int i=0;i<data.length;i++)
        {
        data[i]=360*(data[i]/total);            
        }
        return data;

    }
    public class MyGraphview extends View
    {
        private Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
        private float[] value_degree;
        private int[] COLORS={Color.BLUE,Color.GREEN,Color.GRAY,Color.CYAN,Color.RED};
        RectF rectf = new RectF (10, 10, 200, 200);
        int temp=0;
        public MyGraphview(Context context, float[] values) {

            super(context);
            value_degree=new float[values.length];
            for(int i=0;i<values.length;i++)
            {
                value_degree[i]=values[i];
            }
        }
        @Override
        protected void onDraw(Canvas canvas) {
            // TODO Auto-generated method stub
            super.onDraw(canvas);

            for (int i = 0; i < value_degree.length; i++) {//values2.length; i++) {
                if (i == 0) {
                    paint.setColor(COLORS[i]);
                    canvas.drawArc(rectf, 0, value_degree[i], true, paint);
                } 
                else
                {
                        temp += (int) value_degree[i - 1];
                        paint.setColor(COLORS[i]);
                        canvas.drawArc(rectf, temp, value_degree[i], true, paint);
                }
            }
        }

    }
}

Answer 3

This is only a sample. You need to modify according to to your needs. Since you asked for a sample i have pasted the below code.

http://developer.android.com/training/custom-views/custom-drawing.html. Documentation on drawing. There is a sample at the end of the link

Using achartengine is easy. http://www.achartengine.org/

For pie chart using achartengine. http://wptrafficanalyzer.in/blog/android-drawing-pie-chart-using-achartengine/.

To draw on view you can use the following sample.

 public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    MyView mv= new MyView(this);
    setContentView(mv);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
}
class MyView extends View
{
    Context c;
      private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mBitmapPaint;
        private Paint mpaint,paint2;

    public MyView(Context context) {
        super(context);
        c= context;
        mpaint= new Paint();
        mpaint.setColor(Color.RED);
        mpaint.setStyle(Paint.Style.FILL);
        paint2 = new Paint();
        paint2.setColor(Color.GREEN);
        paint2.setStrokeWidth(10);
            mBitmapPaint = new Paint();
            mBitmapPaint.setColor(Color.RED);
        // TODO Auto-generated constructor stub
    }
      @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
        }

        @Override
        protected void onDraw(Canvas canvas) {
             Display display = ( (Activity) c).getWindowManager().getDefaultDisplay();  
            float w = display.getWidth(); 
            float h = display.getHeight();
           canvas.drawCircle(w/2, h/2, 350, mpaint);
           canvas.drawLine(w/2, h/2, 20, h/2, paint2);

        }
}
}

You draw text with canvas.drawText(text, x, y, paint). Modify the same according to your needs. Add Animation on the view.

Answer 4

You can use AChartEngine to accomplish this. It has pretty powerful methods to draw pie charts.