GeeksforGeeks App
Open App
Browser
Continue

# 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

 ```<``resources``>``    ``<``color` `name``=``"colorPrimary"``>#024265``    ``<``color` `name``=``"colorPrimaryDark"``>#024265``    ``<``color` `name``=``"colorAccent"``>#05af9b`` ` `    ``<``color` `name``=``"color_one"``>#fb7268``    ``<``color` `name``=``"color_white"``>#ededf2``    ``<``color` `name``=``"color_two"``>#E3E0E0`` ` `    ``<``color` `name``=``"R"``>#FFA726``    ``<``color` `name``=``"Python"``>#66BB6A``    ``<``color` `name``=``"CPP"``>#EF5350``    ``<``color` `name``=``"Java"``>#29B6F6`` ` ``

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

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

 ```<``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"``>`` ` `    ````    ````    ``<``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"``>`` ` ` ` `        ````        ```` ` `        ``<``LinearLayout``            ``android:layout_width``=``"match_parent"``            ``android:layout_height``=``"match_parent"``            ``android:orientation``=``"horizontal"``            ``android:weightSum``=``"2"``>`` ` `            ```` ` `            ``<``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"`` ` `                ``/>`` ` `            ````            ````            ``<``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``                        ``android:layout_width``=``"15dp"``                        ``android:layout_height``=``"match_parent"``                        ``android:background``=``"@color/R"``/>`` ` `                    ````                    ``<``TextView``                        ``android:layout_width``=``"wrap_content"``                        ``android:layout_height``=``"wrap_content"``                        ``android:text``=``"R"``                        ``android:paddingLeft``=``"10dp"``/>`` ` `                ```` ` `                ````                ``<``LinearLayout``                    ``android:layout_width``=``"match_parent"``                    ``android:layout_height``=``"15dp"``                    ``android:layout_gravity``=``"center_vertical"``                    ``android:layout_marginTop``=``"5dp"``>`` ` `                    ````                    ``<``View``                        ``android:layout_width``=``"15dp"``                        ``android:layout_height``=``"match_parent"``                        ``android:background``=``"@color/Python"``/>`` ` `                    ````                    ``<``TextView``                        ``android:layout_width``=``"wrap_content"``                        ``android:layout_height``=``"wrap_content"``                        ``android:text``=``"Python"``                        ``android:paddingLeft``=``"10dp"``/>`` ` `                ```` ` `                ````                ``<``LinearLayout``                    ``android:layout_width``=``"match_parent"``                    ``android:layout_height``=``"15dp"``                    ``android:layout_gravity``=``"center_vertical"``                    ``android:layout_marginTop``=``"5dp"``>`` ` `                    ````                    ``<``View``                        ``android:layout_width``=``"15dp"``                        ``android:layout_height``=``"match_parent"``                        ``android:background``=``"@color/CPP"``/>`` ` `                    ````                    ``<``TextView``                        ``android:layout_width``=``"wrap_content"``                        ``android:layout_height``=``"wrap_content"``                        ``android:text``=``"C++"``                        ``android:paddingLeft``=``"10dp"``/>`` ` `                ```` ` `                ````                ``<``LinearLayout``                    ``android:layout_width``=``"match_parent"``                    ``android:layout_height``=``"15dp"``                    ``android:layout_gravity``=``"center_vertical"``                    ``android:layout_marginTop``=``"5dp"``>`` ` `                    ````                    ``<``View``                        ``android:layout_width``=``"15dp"``                        ``android:layout_height``=``"match_parent"``                        ``android:background``=``"@color/Java"``/>`` ` `                    ````                    ``<``TextView``                        ``android:layout_width``=``"wrap_content"``                        ``android:layout_height``=``"wrap_content"``                        ``android:text``=``"Java"``                        ``android:paddingLeft``=``"10dp"``/>`` ` `                ```` ` `            ```` ` `        ```` ` `    ```` ` ` ` `    ````    ````    ``<``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"``>`` ` `        ````        ````                ``<``LinearLayout``                    ``android:layout_width``=``"match_parent"``                    ``android:layout_height``=``"wrap_content"``                    ``android:orientation``=``"vertical"``>`` ` `                    ````                    ````                    ``<``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``                        ``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"``>`` ` `                        ````                        ``<``TextView``                            ``android:layout_width``=``"wrap_content"``                            ``android:layout_height``=``"wrap_content"``                            ``android:fontFamily``=``"sans-serif-light"``                            ``android:text``=``"R"``                            ``android:textSize``=``"18sp"``/>`` ` `                        ````                        ````                        ````                        ``<``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"``/>``                    ```` ` `                    ````                    ``<``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"``/>`` ` `                        ````                        ````                        ```` ` `                        ``<``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"``/>`` ` `                    ````                    ``<``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"``/>`` ` `                        ````                        ````                        ````                        ``<``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"``/>`` ` `                    ````                    ``<``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"``/>`` ` `                        ````                        ````                        ````                        ``<``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"``/>`` ` `                    ```` ` `                ```` ` `    ```` ` ``

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

My Personal Notes arrow_drop_up
Related Tutorials