10

To draw circles and pie charts in Android, we can use the AChartEngine Android framework as shown here.

However, how can we draw circles that is partly filled horizontally (or vertically) in Android? I mean circles which are filled, for example, from the bottom to the top according to the percentage specified in Java code.

Here is a preview of what we need:

Preview

Community
  • 1
  • 1
Omar
  • 1,430
  • 1
  • 14
  • 31
  • 3
    I've an example of one way to do that in [my answer here](http://stackoverflow.com/questions/24858531/filling-a-circle-gradually-from-bottom-to-top-android). Actually, two ways, if you check the revision history for the initial post. My initial answer, however, only works in API 19 and above. – Mike M. Aug 20 '15 at 10:47
  • 1
    Your answer is better and so simple (one utility class). Thank you @MikeM. – Omar Aug 22 '15 at 08:02

2 Answers2

7

Try this lib Circle Progress.
Here is a sample from lib's author:

<com.github.lzyzsd.circleprogress.CircleProgress
    android:id="@+id/circle_progress"
    android:layout_marginLeft="50dp"
    android:layout_width="100dp"
    android:layout_height="100dp"
    custom:circle_progress="20"/>

circle

justHooman
  • 3,044
  • 2
  • 17
  • 15
  • I find some difficulty to implement and run successfully this lib/code. This lib is though detailed and provides many ways of progress forms in Android. Thank you @Minhtdh. – Omar Aug 22 '15 at 08:22
0

Extend Drawable and let your draw method look like this:

public void draw(Canvas c) {
    float size = ...; // The size of your circle
    Paint color = new Paint();
    color.setColor(...); // Color of your circle
    c.drawCircle(size / 2, size / 2, size / 2, color);
    Path p = new Path();
    float ratio = ...; // How many of the circle you want to have filled
    float offset = size * (float) Math.sqrt(1-((double) (0.5-ratio) * 2)*((double) (0.5-ratio) * 2)) / 2;
    float angle = (float) Math.asin((double) (0.5-ratio) * 2);
    p.addArc(offset, size * (1-percent), size - offset, size, angle, Math.PI - angle);
    p.close();
    c.drawPath(p, color);
}
user4759923
  • 531
  • 3
  • 12