Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

How to add a Pie Chart into an Android Application

To integrate a pie chart into an Android application, one of the most popular libraries you can use is the MPAndroidChart library by PhilJay. It offers a vast array of customizable charts, including pie charts.

Here's a step-by-step guide on how to integrate a pie chart using MPAndroidChart:

1. Add the Dependency:

First, add the MPAndroidChart library to your build.gradle (Module: app) file:

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

Then sync the project.

2. Add PieChart to Your Layout:

In your XML layout file where you want to display the pie chart, add the PieChart view:

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/pieChart"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

3. Configure and Display the PieChart:

In your corresponding Kotlin activity or fragment, set up the pie chart:

import com.github.mikephil.charting.charts.PieChart
import com.github.mikephil.charting.data.PieData
import com.github.mikephil.charting.data.PieDataSet
import com.github.mikephil.charting.data.PieEntry
import com.github.mikephil.charting.utils.ColorTemplate

// ...

private lateinit var pieChart: PieChart

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    pieChart = findViewById(R.id.pieChart)

    val entries = ArrayList<PieEntry>()
    entries.add(PieEntry(45f, "Green"))
    entries.add(PieEntry(10f, "Red"))
    entries.add(PieEntry(25f, "Yellow"))
    entries.add(PieEntry(20f, "Blue"))

    val dataSet = PieDataSet(entries, "Colors")
    dataSet.colors = ColorTemplate.COLORFUL_COLORS.toList()

    val data = PieData(dataSet)
    pieChart.data = data
    pieChart.invalidate()  // Refresh the chart
}

In the above example, we're setting up a simple pie chart that represents four colors with varying values.

4. Customize (Optional):

MPAndroidChart offers extensive customization options. You can adjust the look of the pie chart, its interaction behaviors, and much more. Refer to the official documentation and Wiki on the library's GitHub repository for more details.

5. Pro Tip:

Always ensure that the values you're inserting into the pie chart make sense (i.e., they should ideally add up to a meaningful whole, like 100% for percentage distributions). The library will visualize the data you provide based on their absolute and relative values, but it's up to you to ensure the data's integrity.

That's it! You now have a working pie chart in your Android application. Adjust and customize as needed to fit the style and requirements of your app.

  1. Integrating Pie Chart library in Android app:

    • Description: Integrating a Pie Chart library in Android involves adding a third-party library to your project, such as MPAndroidChart or AnyChart. This provides pre-built components for creating Pie Charts.
    • Code: The integration code depends on the chosen library. For MPAndroidChart, add the following to your app's build.gradle:
      implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
      
  2. Creating a Pie Chart in Android example code:

    • Description: Create a basic Pie Chart using the integrated library. This includes setting up the chart view in the layout file and populating it with data in the activity.

    • Code:

      <!-- Inside layout file -->
      <com.github.mikephil.charting.charts.PieChart
          android:id="@+id/pieChart"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />
      
      // Inside activity
      val pieChart = findViewById<PieChart>(R.id.pieChart)
      val entries = listOf(PieEntry(25f, "Category 1"), PieEntry(75f, "Category 2"))
      val dataSet = PieDataSet(entries, "Pie Chart")
      val pieData = PieData(dataSet)
      pieChart.data = pieData
      pieChart.invalidate()
      
  3. Customizing colors and styles in Android Pie Chart:

    • Description: Customize the appearance of the Pie Chart by changing colors, styles, and other visual attributes. This can include setting different colors for each slice, adjusting text size, and modifying the legend.
    • Code:
      // Inside activity
      dataSet.colors = listOf(Color.BLUE, Color.GREEN)
      dataSet.valueTextColor = Color.BLACK
      dataSet.valueTextSize = 12f
      pieChart.legend.textSize = 14f
      pieChart.invalidate()
      
  4. Handling data input for Pie Chart in Android:

    • Description: Input data for the Pie Chart can be dynamic and come from various sources. This example demonstrates how to handle data dynamically.
    • Code:
      // Inside activity
      // Assume data is fetched dynamically
      val dynamicEntries = fetchDataDynamically()
      val dynamicDataSet = PieDataSet(dynamicEntries, "Dynamic Pie Chart")
      val dynamicPieData = PieData(dynamicDataSet)
      pieChart.data = dynamicPieData
      pieChart.invalidate()
      
  5. Animating Pie Chart slices in Android application:

    • Description: Add animations to the Pie Chart to create a visually appealing effect when the chart is initially displayed or when data changes.
    • Code:
      // Inside activity
      pieChart.animateY(1500, Easing.EaseInOutQuad)
      
  6. Adding legends and labels to Pie Chart in Android:

    • Description: Enhance the Pie Chart by adding legends and labels. Legends provide information about each slice, and labels display additional information.
    • Code:
      // Inside activity
      pieChart.legend.isEnabled = true
      pieChart.setDrawSliceText(true)
      
  7. Interactive Pie Chart with touch events in Android:

    • Description: Make the Pie Chart interactive by handling touch events. This can involve responding to taps on slices, enabling rotation, or allowing zoom gestures.
    • Code:
      // Inside activity
      pieChart.isRotationEnabled = true
      pieChart.setOnChartValueSelectedListener(object : OnChartValueSelectedListener {
          override fun onValueSelected(e: Entry?, h: Highlight?) {
              // Handle value selection
          }
      
          override fun onNothingSelected() {
              // Handle no selection
          }
      })