10

Does anyone know how to create a doughnut chart similar to the one in Google Fit.

Google Fit Chart

Makyen
  • 31,849
  • 12
  • 86
  • 121
Chris D
  • 810
  • 1
  • 9
  • 21
  • I found this: https://github.com/txusballesteros/fit-chart I hope this helps someone with the same problem. – André Augusto Costa Santos Nov 11 '15 at 10:38
  • If someone stills need a library that does that, here are some: For Java: - https://github.com/txusballesteros/fit-chart - https://github.com/PhilJay/MPAndroidChart For Kotlin: - https://github.com/futuredapp/donut – Brugui Jan 07 '21 at 21:44

3 Answers3

12

I also wanted this, but the best answer i could find was "make your own". So I did.

This is pretty basic (I'm new to android) and unfinished, but it should give you the idea.

Basically, you just set up your paint objects 

    paintPrimary = new Paint();
    paintPrimary.setAntiAlias(true);
    paintPrimary.setColor(colorPrimary);
    paintPrimary.setStyle(Paint.Style.STROKE);
    paintPrimary.setStrokeCap(Paint.Cap.ROUND);

and call canvas.drawArc

class FitDoughnutView extends View {

    private RectF _oval;

    public FitDoughnutView(Context ctx) {
        super(ctx);
    }

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

        canvas.drawArc(_oval, 0, 360, false, paintSecondary);

        canvas.drawArc(_oval, 270, percentDeg, false, paintPrimary);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        _oval = new RectF(width, width, w - width, h - width);
    }
}

Full source here: github.com/tehmantra/fitdoughnut

Someone's tutorial: hmkcode.com/android-canvas-how-to-draw-2d-donut-chart/

Michael Wildman
  • 136
  • 1
  • 3
3

I would recommend this library because it's actively maintained and has a lot of options.

It has a guide of how to use it in Kotlin, but you also can use it in Java like this:

In your layout file:

<app.futured.donut.DonutProgressView
        android:id="@+id/dpvChart"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="8dp"
        app:donut_bgLineColor="@color/grey"
        app:donut_gapAngle="270"
        app:donut_gapWidth="20"
        app:donut_strokeWidth="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Then in your Java Activity:

private DonutProgressView dpvChart;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);

    dpvChart = findViewById(R.id.dpvChart);

    DonutSection section = new DonutSection("Section 1 Name", Color.parseColor("#f44336"), 80.0f);
    dpvChart.setCap(100f);
    dpvChart.submitData(new ArrayList<>(Collections.singleton(section)));
}
Brugui
  • 574
  • 6
  • 20
  • How does one implement clicking a slice? I wold want the slice to visually indicate that it's selected. – Aykhan Hagverdili Nov 28 '21 at 15:14
  • I didn't see anywhere where you can do that with this library. Maybe try with this one: https://github.com/furkanaskin/ClickablePieChart – Brugui Nov 29 '21 at 22:00
0
        <com.google.android.material.progressindicator.CircularProgressIndicator
          app:indicatorSize="60dp"
          android:progress="60"
          app:trackCornerRadius="10dp"
          app:trackThickness="10dp"
          app:trackColor="@color/white"
          app:indicatorColor="@color/teal_200"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
Vipul Gupta
  • 51
  • 1
  • 4