If you are looking for a UI component to represent a huge form of data in easily readable formats then you can think of displaying this huge data in the form of bar charts or bar graphs. It makes it easy to analyze and read the data with the help of bar graphs. In this article, we will take a look at the implementation of bar graphs in Android.
What we are going to build in this article?
We will be building a simple application in which we will be displaying a bar chart with some sample data in it. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Important Attributes of BarChart
|
Attributes |
Description |
|---|---|
| setData | to set bar data in our bar chart. |
| setColors | to set colors to our bar chart. |
| setValueTextColor | to set the color for our text in the bar graph. |
| setValueTextSize | to set text size for our value |
| getDescription | to get the description of our bar chart. |
Step by Step Implementation
Step 1: Create 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 that select Java as the programming language.
Step 2: Add dependency and JitPack Repository
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’
Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.
allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}
After adding this dependency sync your project and now we will move towards its implementation.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!--Ui component for our bar chart--> <com.github.mikephil.charting.charts.BarChart android:id="@+id/idBarChart" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
Step 4: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.graphics.Color;import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import com.github.mikephil.charting.charts.BarChart;import com.github.mikephil.charting.data.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.utils.ColorTemplate; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { // variable for our bar chart BarChart barChart; // variable for our bar data. BarData barData; // variable for our bar data set. BarDataSet barDataSet; // array list for storing entries. ArrayList barEntriesArrayList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initializing variable for bar chart. barChart = findViewById(R.id.idBarChart); // calling method to get bar entries. getBarEntries(); // creating a new bar data set. barDataSet = new BarDataSet(barEntriesArrayList, "Geeks for Geeks"); // creating a new bar data and // passing our bar data set. barData = new BarData(barDataSet); // below line is to set data // to our bar chart. barChart.setData(barData); // adding color to our bar data set. barDataSet.setColors(ColorTemplate.MATERIAL_COLORS); // setting text color. barDataSet.setValueTextColor(Color.BLACK); // setting text size barDataSet.setValueTextSize(16f); barChart.getDescription().setEnabled(false); } private void getBarEntries() { // creating a new array list barEntriesArrayList = new ArrayList<>(); // adding new entry to our array list with bar // entry and passing x and y axis value to it. barEntriesArrayList.add(new BarEntry(1f, 4)); barEntriesArrayList.add(new BarEntry(2f, 6)); barEntriesArrayList.add(new BarEntry(3f, 8)); barEntriesArrayList.add(new BarEntry(4f, 2)); barEntriesArrayList.add(new BarEntry(5f, 4)); barEntriesArrayList.add(new BarEntry(6f, 1)); }} |
Now run your app and see the output of the app.
