Open In App

How to add a Pie Chart into an Android Application

Improve
Improve
Like Article
Like
Save
Share
Report

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




      <?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>

      
      

    • 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)




      // 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'

      
      

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

      actibity_main.xml




      <?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>

      
      

    • 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.




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

      
      

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




      // 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);

      
      

    • Create 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.




      // 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));

      
      

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




      // 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")));

      
      

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




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

      
      

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

    Below is the complete code for MainActivity.java file:

    MainActivity.java




    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();
        }
    }

    
    

Output:



Last Updated : 27 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads