Home Android How to add a Pie Chart into an Android Application

How to add a Pie Chart into an Android Application

How to Add Dynamic Markers in Google Maps with Firebase Firstore?

Point Graph Series in Android

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 the form of radii into segments describing relative frequencies or magnitude also known as a circle graph. A pie chart represents numbers in percentages, and the total sum of all segments needs to equal 100%.

Here is the Final Application which will be created.


Step-by-Step Implementation of Pie Chart in Android Application

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

Step 1: Opening/Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: Select Java as the programming language.

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.

1. Navigate to Gradle Scripts->build.gradle (Module: app)



Add the dependencies mentioned below:

dependencies{
     // For Card view
     implementation 'androidx.cardview:cardview:1.0.0'

     // Chart and graph library
     implementation 'com.github.blackfizz:eazegraph:1.2.2@aar'
     implementation 'com.nineoldandroids:library:2.4.0'
}

After Importing following dependencies and click the “sync Now” on the above pop up.


2. Naviagate to app->res->values->colors.xml:


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


Step 3: Designing the Layout of the Application



Below is the code for the xml file.

activity_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 Layout will be like:



Step 4: Changes in the MainActivity File to Add Functionality in the Application



  • Open the MainActivity.java file there within the class, first of all create the object of TextView class and the pie chart class.
Java 
    // 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.
Java 
    // 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.
Java 
    // 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.
Java 
    // 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().
Java 
    // 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.final_pie_chart_java;

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

Run The Application, Check this article Android | Running your first Android app as the reference.


Note : To access the full android application using Pie chat check this repository: Pie Chart Android Application

Click Here to Learn How to Create Android Application



Tags:
#Android-Misc #Java-Android #Android

How to Add Dynamic Markers in Google Maps with Firebase Firstore?

Point Graph Series in Android

Contact Us

Categories
Learn the most popular programming languages in the world.