Android Pie Chart – How to Create Pie Chart in Android Studio

Last Updated on July 21, 2018

Hi and welcome to another tutorial from Codingdemos, in this tutorial you will learn how to create pie chart in Android Studio. You will be building an app that will show a quarterly sales of a company for the year inside a pie chart graph.

Android pie chart

By the end of this tutorial, you will have an app that looks like this. (Large preview)

You will be using a 3rd party library called Hellocharts-Androidto help you build Android pie chart.

Check out the previous tutorial if you are interested in learning how to draw line chart in Android.

In this tutorial we will be using the following:

    – Android studio version 3.0.1
    – Android emulator Nexus 5X with API 26
    – Minimum SDK API 16

1- Open up Android Studio and open any project that you have in your computer.

android studio welcome screen

Create new Android Studio project or open existing project. (Large preview)

2- Open up build.gradle (module:app) and add the library in the dependencies.


implementation 'com.github.lecho:hellocharts-library:1.5.8@aar'

3- Next you need to open up build.gradle (Project) and add Jcenter because this library is available through it.


allprojects {
    repositories {
        google()
        jcenter()
    }
}

4- Now sync your project by clicking on Sync Now.

Android studio sync project

Android studio sync project. (Large preview)

5- Open up colors.xml file to change the colors of the main app.


< color name="colorPrimary">#00BCD4< /color>
< color name="colorPrimaryDark">#0097A7< /color>
< color name="colorAccent">#009688< /color>

6- Build and run the app to see the new colors.

Android pie chart

New colors for the app. (Large preview)

7- Open up activity_main.xml and add the following code for Android pie chart view.


< lecho.lib.hellocharts.view.PieChartView
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

8- Next you need to reference pie chart view inside MainActivity.java file.


PieChartView pieChartView = findViewById(R.id.chart);

9- Now you need to initialize the data which will appear later inside Android pie chart. You will do that by declaring List of a type SliceValue like the following.


List< SliceValue > pieData = new ArrayList<>();

10- You can add data inside pieData list like this.


pieData.add(new SliceValue(15, Color.BLUE));
pieData.add(new SliceValue(25, Color.GRAY));
pieData.add(new SliceValue(10, Color.RED));
pieData.add(new SliceValue(60, Color.MAGENTA));

SliceValue will take 2 arguments:

  • Float value which represent the size of pie chart.
  • Color which you can set for that particular pie chart

11- Create PieChartData so that you can pass pie chart data inside this model.


PieChartData pieChartData = new PieChartData(pieData);

12- Next you can set the pie chart data inside pieChartView to be able to see the actual data appears inside Android pie chart.


pieChartView.setPieChartData(pieChartData);

13- Build and run the app to see the result.

Android pie chart tutorial

Pie chart in Android app. (Large preview)

How to show label inside Android pie chart

14- Modify pieData code to include label along with size and color of pie chart like this.


pieData.add(new SliceValue(15, Color.BLUE).setLabel("Q1: $10"));
pieData.add(new SliceValue(25, Color.GRAY).setLabel("Q2: $4"));
pieData.add(new SliceValue(10, Color.RED).setLabel("Q3: $18"));
pieData.add(new SliceValue(60, Color.MAGENTA).setLabel("Q4: $28"));

15- Make sure to include the following code, otherwise the label will not appear inside pie chart graph.


pieChartData.setHasLabels(true);

16- Now build and run the app to see pie chart graph.

Android pie chart with label

Android pie chart with label. (Large preview)

How to increase label text size of pie chart graph

17- You can increase the label text size of the pie chart by modifying the code in step 15 to the following code.


pieChartData.setHasLabels(true).setValueLabelTextSize(14);

18- Build and run the app to see the result.

Android pie chart example

Increased label text size in pie chart graph. (Large preview)

Adding label in the center of pie chart graph in Android

19- You can further customize the appearance of Android pie chart by adding a label in the center of the graph like this.


pieChartData.setHasCenterCircle(true).setCenterText1("Sales in million");

20- Build and run the app to see the output.

Pie chart in Android

Showing pie chart with label in center. (Large preview)

21- You can also adjust the size as well as the color of the center text like this.


pieChartData.setHasCenterCircle(true).setCenterText1("Sales in million").setCenterText1FontSize(20).setCenterText1Color(Color.parseColor("#0097A7"));

22- Now build and run the app.

how to create pie chart in android studio

Customized the appearance of pie chart graph. (Large preview)

23- Here is the full code for activity_main.xml file.


< ?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="com.codingdemos.codingdemos.MainActivity">

  < lecho.lib.hellocharts.view.PieChartView
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

< /LinearLayout>

24- Here is the full code for MainActivity.java file.


package com.codingdemos.codingdemos;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.model.PieChartData;
import lecho.lib.hellocharts.model.SliceValue;
import lecho.lib.hellocharts.view.PieChartView;

public class MainActivity extends AppCompatActivity {

    PieChartView pieChartView;

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

        pieChartView = findViewById(R.id.chart);

        List<SliceValue> pieData = new ArrayList<>();
        pieData.add(new SliceValue(15, Color.BLUE).setLabel("Q1: $10"));
        pieData.add(new SliceValue(25, Color.GRAY).setLabel("Q2: $4"));
        pieData.add(new SliceValue(10, Color.RED).setLabel("Q3: $18"));
        pieData.add(new SliceValue(60, Color.MAGENTA).setLabel("Q4: $28"));

        PieChartData pieChartData = new PieChartData(pieData);
        pieChartData.setHasLabels(true).setValueLabelTextSize(14);
        pieChartData.setHasCenterCircle(true).setCenterText1("Sales in million").setCenterText1FontSize(20).setCenterText1Color(Color.parseColor("#0097A7"));
        pieChartView.setPieChartData(pieChartData);
    }

}
android pie chart tutorial

25- I hope you find this tutorial helpful and if you have any question please post them in the comment below.

17 Comments

  1. I am trying to add the values of piechart from two different functions and now what happens is the new value replaces the whole pie chart what should i do

      1. package com.example.simantstha.expensetracker;

        import android.content.Intent;
        import android.graphics.Color;
        import android.support.v7.app.AlertDialog;
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.View;
        import android.widget.Button;
        import android.widget.EditText;
        import android.widget.ImageButton;
        import android.widget.TextView;
        import android.widget.Toast;
        import java.util.*;

        import lecho.lib.hellocharts.model.PieChartData;
        import lecho.lib.hellocharts.model.SliceValue;
        import lecho.lib.hellocharts.view.PieChartView;

        public class Main2Activity extends AppCompatActivity {
        final ArrayList expTit = new ArrayList();
        final ArrayList expAmt = new ArrayList();
        PieChartView pieChartView;
        final List pieData = new ArrayList();
        public void popbox(View view)
        {
        ImageButton plus = (ImageButton) findViewById(R.id.plus);
        plus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        AlertDialog.Builder mBuilder = new AlertDialog.Builder(Main2Activity.this);
        View mView = getLayoutInflater().inflate(R.layout.popup,null);
        final EditText title = (EditText) mView.findViewById(R.id.title);
        final EditText amount = (EditText) mView.findViewById(R.id.bgamount);
        Button expAdd = (Button) mView.findViewById(R.id.expAdd);
        expAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        if(title.getText().toString().isEmpty())
        {
        Toast.makeText(Main2Activity.this, “Empty Feild”, Toast.LENGTH_SHORT).show();
        }
        else
        {
        Toast.makeText(Main2Activity.this, “Congratulations”, Toast.LENGTH_SHORT).show();
        expTit.add(title.getText().toString());
        expAmt.add(Integer.parseInt(amount.getText().toString()));
        int sum=0;
        for (Integer number : expAmt) {
        sum+=number;
        }
        TextView t1=(TextView)findViewById(R.id.exp);
        pieData.add(new SliceValue(sum, Color.RED).setLabel(“B”));
        t1.setText(“Expense: “+Integer.toString(sum));
        }
        }
        });
        mBuilder.setView(mView);
        AlertDialog dialog = mBuilder.create();
        dialog.show();
        }
        });
        }
        public void popbox2(View view)
        {
        Button budget = (Button) findViewById(R.id.budget);
        budget.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        AlertDialog.Builder mBuilder = new AlertDialog.Builder(Main2Activity.this);
        View mView = getLayoutInflater().inflate(R.layout.popup2,null);
        final EditText bgamount = (EditText) mView.findViewById(R.id.bgamount);
        Button budAdd = (Button) mView.findViewById(R.id.budAdd);
        budAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        if(bgamount.getText().toString().isEmpty())
        {
        Toast.makeText(Main2Activity.this, “Empty Feild”, Toast.LENGTH_SHORT).show();
        }
        else
        {
        Toast.makeText(Main2Activity.this, “Congratulations”, Toast.LENGTH_SHORT).show();
        TextView t=(TextView)findViewById(R.id.bug);
        t.setText(“Budget: “+bgamount.getText().toString());
        pieData.add(new SliceValue(Integer.parseInt(bgamount.getText().toString()), Color.BLUE).setLabel(“c”));
        }
        }
        });
        mBuilder.setView(mView);
        AlertDialog dialog = mBuilder.create();
        dialog.show();
        }
        });
        }

        public void actFunc(View view)
        {
        Intent intent1 = new Intent(Main2Activity.this,Main3Activity.class);
        intent1.putExtra(“expTit”,expTit);
        Intent intent2 = new Intent(Main2Activity.this,Main3Activity.class);
        intent2.putExtra(“expAmt”,expAmt);
        startActivity(intent1);
        startActivity(intent2);
        }

        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        pieChartView = findViewById(R.id.chart);
        PieChartData pieChartData = new PieChartData(pieData);
        pieChartData.setHasLabels(true).setValueLabelTextSize(20);
        pieChartData.setHasCenterCircle(true).setCenterText1(“Expense Pie”).setCenterText1FontSize(20).setCenterText1Color(Color.parseColor(“#0097A7”));
        pieChartView.setPieChartData(pieChartData);
        }
        }

        Its the code if you could look every time different function runs it takes whole pie

    1. Hi, just remove the color from SliceValue like this:

      //Before
      pieData.add(new SliceValue(15, Color.BLUE));

      //After
      pieData.add(new SliceValue(15));

    1. changing the inner circle diameter will change the slice width. use setCenterCircleScale(float);

  2. hi. how can i change this List pieData = new ArrayList(); to be the month of the year using the system calender?.

  3. Hi,
    What do you do if you turn your phone into landscape mode and want to save the state of the pie chart. (Like save the pie chart from one rotation to the other)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>