How to add a Pie Chart into an Android Application

0 0 5 minutes read

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.

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.

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'

Step3: Designing the UI

Below is the code for the xml file.

actibity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  
    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: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:

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