How to add a Pie Chart into an Android Application

Pre-requisites:

A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. It depicts a special chart that uses “pie slices”, where each sector shows the relative sizes of data. A circular chart cuts in a form of radii into segments describing relative frequencies or magnitude also known as circle graph. A pie chart represents numbers in percentages, and the total sum of all segments needs to equal 100%.

So let’s see the steps to add a Pie Chart into an Android app.

  1. Step1: Opening a new project
    • Open a new project just click of File option at topmost corner in left.
    • Then click on new and open a new project with whatever name you want.
    • Now we gonna work on Empty Activity with language as Java. Leave all other options as untouched.
    • You can change the name of project as per your choice.



    • By default, there will be two files activity_main.xml and MainActivity.java.
  2. Step 2: Before going to the coding section first you have to do some pre-task.
    • Go to app->res->values->colors.xml section and set the colors for your app.

      colors.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <color name="colorPrimary">#024265</color>
          <color name="colorPrimaryDark">#024265</color>
          <color name="colorAccent">#05af9b</color>
        
          <color name="color_one">#fb7268</color>
          <color name="color_white">#ededf2</color>
          <color name="color_two">#E3E0E0</color>
        
          <color name="R">#FFA726</color>
          <color name="Python">#66BB6A</color>
          <color name="CPP">#EF5350</color>
          <color name="Java">#29B6F6</color>
        
      </resources>

      chevron_right

      
      

    • Go to Gradle Scripts->build.gradle (Module: app) section and import following dependencies and click the “sync Now” on the above pop up.

      build.gradle (:app)

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // For Card view
      implementation 'androidx.cardview:cardview:1.0.0'
       
      // Chart and graph library
      implementation 'com.github.blackfizz:eazegraph:1.2.5l@aar'
      implementation 'com.nineoldandroids:library:2.4.0'

      chevron_right

      
      

  3. Step3: Designing the UI
    • Below is the code for the xml file.

      actibity_main.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout
        
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@color/color_white"
          tools:context=".MainActivity">
        
          <!-- Card view for displaying the --->
          <!-- Pie chart and details of pie chart -->
          <androidx.cardview.widget.CardView
              android:id="@+id/cardViewGraph"
              android:layout_width="match_parent"
              android:layout_height="200dp"
              android:layout_marginLeft="20dp"
              android:layout_marginRight="20dp"
              android:layout_marginTop="15dp"
              android:elevation="10dp"
              app:cardCornerRadius="10dp">
        
        
              <!--Linear layout to display pie chart --->
              <!-- and details of pie chart-->
        
              <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="horizontal"
                  android:weightSum="2">
        
                  <!--Pie chart to display the data-->
        
                  <org.eazegraph.lib.charts.PieChart
                      xmlns:app="http://schemas.android.com/apk/res-auto"
                      android:id="@+id/piechart"
                      android:layout_width="0dp"
                      android:layout_height="match_parent"
                      android:padding="6dp"
                      android:layout_weight="1"
                      android:layout_marginTop="15dp"
                      android:layout_marginLeft="15dp"
                      android:layout_marginBottom="15dp"
        
                      />
        
                  <!--Creating another linear layout --->
                  <!-- to display pie chart details -->
                  <LinearLayout
                      android:layout_width="0dp"
                      android:layout_height="match_parent"
                      android:layout_weight="1"
                      android:layout_marginLeft="20dp"
                      android:orientation="vertical"
                      android:gravity="center_vertical"
                      >
        
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="15dp"
                          android:layout_gravity="center_vertical">
        
                          <!--View to display the yellow color icon-->
                          <View
                              android:layout_width="15dp"
                              android:layout_height="match_parent"
                              android:background="@color/R"/>
        
                          <!--Text view to display R -->
                          <TextView
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:text="R"
                              android:paddingLeft="10dp"/>
        
                      </LinearLayout>
        
                      <!--Linear layout to display Python-->
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="15dp"
                          android:layout_gravity="center_vertical"
                          android:layout_marginTop="5dp">
        
                          <!--View to display the green color icon-->
                          <View
                              android:layout_width="15dp"
                              android:layout_height="match_parent"
                              android:background="@color/Python"/>
        
                          <!--Text view to display python text -->
                          <TextView
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:text="Python"
                              android:paddingLeft="10dp"/>
        
                      </LinearLayout>
        
                      <!--Linear layout to display C++-->
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="15dp"
                          android:layout_gravity="center_vertical"
                          android:layout_marginTop="5dp">
        
                          <!--View to display the red color icon-->
                          <View
                              android:layout_width="15dp"
                              android:layout_height="match_parent"
                              android:background="@color/CPP"/>
        
                          <!--Text view to display C++ text -->
                          <TextView
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:text="C++"
                              android:paddingLeft="10dp"/>
        
                      </LinearLayout>
        
                      <!--Linear layout to display Java-->
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="15dp"
                          android:layout_gravity="center_vertical"
                          android:layout_marginTop="5dp">
        
                          <!--View to display the blue color icon-->
                          <View
                              android:layout_width="15dp"
                              android:layout_height="match_parent"
                              android:background="@color/Java"/>
        
                          <!--Text view to display Java text -->
                          <TextView
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:text="Java"
                              android:paddingLeft="10dp"/>
        
                      </LinearLayout>
        
                  </LinearLayout>
        
              </LinearLayout>
        
          </androidx.cardview.widget.CardView>
        
        
          <!-- Another Card view for displaying --->
          <!-- Use of programming languages -->
          <androidx.cardview.widget.CardView
              android:layout_width="match_parent"
              android:layout_height="260dp"
              android:layout_below="@+id/cardViewGraph"
              android:layout_marginLeft="20dp"
              android:layout_marginRight="20dp"
              android:layout_marginTop="20dp"
              android:layout_marginBottom="20dp"
              android:elevation="10dp"
              app:cardCornerRadius="10dp"
              android:id="@+id/details">
        
              <!--Relative layout to display --->
              <!-- use of programming languages -->
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:orientation="vertical">
        
                          <!--Text view to use of --->
                          <!-- programming languages text-->
                          <TextView
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:text="Use of Programming Languages(In Percentage):"
                              android:textSize="23sp"
                              android:textStyle="bold"
                              android:layout_marginLeft="25dp"
                              android:layout_marginTop="20dp"/>
        
                          <!--View to display the line-->
                          <View
                              android:layout_width="match_parent"
                              android:layout_height="1dp"
                              android:background="@color/color_two"
                              android:layout_marginLeft="20dp"
                              android:layout_marginRight="20dp"
                              android:layout_marginTop="5dp"/>
        
                          <RelativeLayout
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:layout_marginRight="25dp"
                              android:layout_marginLeft="25dp"
                              android:layout_marginTop="10dp"
                              android:layout_marginBottom="10dp">
        
                              <!--Text view to display R -->
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:fontFamily="sans-serif-light"
                                  android:text="R"
                                  android:textSize="18sp"/>
        
                              <!--Text view to display the --->
                              <!-- percentage of programming language --->
                              <!-- used. For now default set to 0-->
                              <TextView
                                  android:layout_width="fill_parent"
                                  android:layout_height="wrap_content"
                                  android:text="0"
                                  android:id="@+id/tvR"
                                  android:textAlignment="textEnd"
                                  android:textSize="18sp"
                                  android:textColor="@color/color_one"
                                  android:textStyle="bold"
                                  android:fontFamily="sans-serif-light"
                                  android:layout_alignParentRight="true"/>
                          </RelativeLayout>
        
                          <!--View to display the line-->
                          <View
                              android:layout_width="match_parent"
                              android:layout_height="1dp"
                              android:background="@color/color_two"
                              android:layout_marginLeft="20dp"
                              android:layout_marginRight="20dp" />
        
                          <RelativeLayout
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:layout_marginRight="25dp"
                              android:layout_marginLeft="25dp"
                              android:layout_marginTop="10dp"
                              android:layout_marginBottom="10dp">
        
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:fontFamily="sans-serif-light"
                                  android:text="Python"
                                  android:textSize="18sp"/>
        
                              <!--Text view to display the percentage --->
                              <!-- of programming language used. --->
                              <!-- For now default set to 0-->
        
                              <TextView
                                  android:layout_width="fill_parent"
                                  android:layout_height="wrap_content"
                                  android:text="0"
                                  android:id="@+id/tvPython"
                                  android:textAlignment="textEnd"
                                  android:textSize="18sp"
                                  android:textColor="@color/color_one"
                                  android:textStyle="bold"
                                  android:fontFamily="sans-serif-light"
                                  android:layout_alignParentRight="true"/>
        
                          </RelativeLayout>
                          <View
                              android:layout_width="match_parent"
                              android:layout_height="1dp"
                              android:background="@color/color_two"
                              android:layout_marginLeft="20dp"
                              android:layout_marginRight="20dp" />
        
                          <RelativeLayout
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:layout_marginRight="25dp"
                              android:layout_marginLeft="25dp"
                              android:layout_marginTop="10dp"
                              android:layout_marginBottom="10dp">
        
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:fontFamily="sans-serif-light"
                                  android:text="C++"
                                  android:textSize="18sp"/>
        
                              <!--Text view to display the percentage --->
                              <!-- of programming language used. --->
                              <!-- For now default set to 0-->
                              <TextView
                                  android:layout_width="fill_parent"
                                  android:layout_height="wrap_content"
                                  android:text="0"
                                  android:id="@+id/tvCPP"
                                  android:textAlignment="textEnd"
                                  android:textSize="18sp"
                                  android:textColor="@color/color_one"
                                  android:textStyle="bold"
                                  android:fontFamily="sans-serif-light"
                                  android:layout_alignParentRight="true"/>
        
                          </RelativeLayout>
                          <View
                              android:layout_width="match_parent"
                              android:layout_height="1dp"
                              android:background="@color/color_two"
                              android:layout_marginLeft="20dp"
                              android:layout_marginRight="20dp" />
        
                          <RelativeLayout
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:layout_marginRight="25dp"
                              android:layout_marginLeft="25dp"
                              android:layout_marginTop="10dp"
                              android:layout_marginBottom="10dp">
        
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:fontFamily="sans-serif-light"
                                  android:text="Java"
                                  android:textSize="18sp"/>
        
                              <!--Text view to display the percentage --->
                              <!-- of programming language used. --->
                              <!-- For now default set to 0-->
                              <TextView
                                  android:layout_width="fill_parent"
                                  android:layout_height="wrap_content"
                                  android:text="0"
                                  android:id="@+id/tvJava"
                                  android:textAlignment="textEnd"
                                  android:textSize="18sp"
                                  android:textColor="@color/color_one"
                                  android:textStyle="bold"
                                  android:fontFamily="sans-serif-light"
                                  android:layout_alignParentRight="true"/>
        
                          </RelativeLayout>
        
                      </LinearLayout>
        
          </androidx.cardview.widget.CardView>
        
      </RelativeLayout>

      chevron_right

      
      

    • After using this code in .xml file, the UI will be like:

  4. Step4: Working with Java file
    • Open the MainActivity.java file there within the class, first of all create the object of TextView class and the pie chart class.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Create the object of TextView and PieChart class
      TextView tvR, tvPython, tvCPP, tvJava;
      PieChart pieChart;

      chevron_right

      
      

    • Secondly inside onCreate() method, we have to link those objects with their respective id’s that we have given in .XML file.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Link those objects with their respective
      // id's that we have given in .XML file
      tvR = findViewById(R.id.tvR);
      tvPython = findViewById(R.id.tvPython);
      tvCPP = findViewById(R.id.tvCPP);
      tvJava = findViewById(R.id.tvJava);
      pieChart = findViewById(R.id.piechart);

      chevron_right

      
      

    • Creat a private void setData() method outside onCreate() method and define it.
    • Inside setData() method the most important task is going to happen that is how we set the data in the text file and as well as on the piechart.
    • First of all inside setData() method set the percentage of language used in their respective text view.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Set the percentage of language used
      tvR.setText(Integer.toString(40));
      tvPython.setText(Integer.toString(30));
      tvCPP.setText(Integer.toString(5));
      tvJava.setText(Integer.toString(25));

      chevron_right

      
      

    • And then set this data to the pie chart and also set their respective colors using addPieSlice() method.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Set the data and color to the pie chart
      pieChart.addPieSlice(
          new PieModel(
              "R",
              Integer.parseInt(tvR.getText().toString()),
              Color.parseColor("#FFA726")));
      pieChart.addPieSlice(
          new PieModel(
              "Python",
              Integer.parseInt(tvPython.getText().toString()),
              Color.parseColor("#66BB6A")));
      pieChart.addPieSlice(
          new PieModel(
              "C++",
              Integer.parseInt(tvCPP.getText().toString()),
              Color.parseColor("#EF5350")));
      pieChart.addPieSlice(
          new PieModel(
              "Java",
              Integer.parseInt(tvJava.getText().toString()),
              Color.parseColor("#29B6F6")));

      chevron_right

      
      

    • For better look animate the piechart using startAnimation().
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // To animate the pie chart
      pieChart.startAnimation();

      chevron_right

      
      

    • At last invoke the setData() method inside onCreate() method.

    Below is the complete code for MainActivity.java file:

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package com.example.piechart;
      
    // Import the required libraries
    import androidx.appcompat.app.AppCompatActivity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.widget.TextView;
    import org.eazegraph.lib.charts.PieChart;
    import org.eazegraph.lib.models.PieModel;
      
    public class MainActivity
        extends AppCompatActivity {
      
        // Create the object of TextView
        // and PieChart class
        TextView tvR, tvPython, tvCPP, tvJava;
        PieChart pieChart;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            // Link those objects with their
            // respective id's that
            // we have given in .XML file
            tvR = findViewById(R.id.tvR);
            tvPython = findViewById(R.id.tvPython);
            tvCPP = findViewById(R.id.tvCPP);
            tvJava = findViewById(R.id.tvJava);
            pieChart = findViewById(R.id.piechart);
      
            // Creating a method setData()
            // to set the text in text view and pie chart
            setData();
        }
      
        private void setData()
        {
      
            // Set the percentage of language used
            tvR.setText(Integer.toString(40));
            tvPython.setText(Integer.toString(30));
            tvCPP.setText(Integer.toString(5));
            tvJava.setText(Integer.toString(25));
      
            // Set the data and color to the pie chart
            pieChart.addPieSlice(
                new PieModel(
                    "R",
                    Integer.parseInt(tvR.getText().toString()),
                    Color.parseColor("#FFA726")));
            pieChart.addPieSlice(
                new PieModel(
                    "Python",
                    Integer.parseInt(tvPython.getText().toString()),
                    Color.parseColor("#66BB6A")));
            pieChart.addPieSlice(
                new PieModel(
                    "C++",
                    Integer.parseInt(tvCPP.getText().toString()),
                    Color.parseColor("#EF5350")));
            pieChart.addPieSlice(
                new PieModel(
                    "Java",
                    Integer.parseInt(tvJava.getText().toString()),
                    Color.parseColor("#29B6F6")));
      
            // To animate the pie chart
            pieChart.startAnimation();
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.