Android – Create BarChart with Kotlin
Bar Chart is a UI component that is seen in most FinTech applications. These bar charts are used to display vast amounts of data in an easily readable form. In this article, we will be building a simple Bar Chart within our android application using Kotlin. A sample GIF is given below to get an idea about what we are going to do in this article.
Note: If you are looking to implement Bar Chart in your android application using Java. Check out the following article: How to Create Bar Chart in Android using Java
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin 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" ?> <!--on below line we are creating a swipe to refresh layout--> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" android:fillViewport = "true" android:orientation = "vertical" tools:context = ".MainActivity" > < TextView android:id = "@+id/idTVHead" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_margin = "4dp" android:gravity = "center" android:padding = "4dp" android:text = "Bar Chart" android:textAlignment = "center" android:textColor = "@color/purple_200" android:textSize = "20sp" android:textStyle = "bold" /> <!--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" android:layout_below = "@id/idTVHead" /> </ RelativeLayout > |
Step 4: Working with the MainActivity.kt file
Navigate to app>java>your app’s package name>MainActivity.kt file and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject 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 class MainActivity : AppCompatActivity() { // on below line we are creating // variables for our bar chart lateinit var barChart: BarChart // on below line we are creating // a variable for bar data lateinit var barData: BarData // on below line we are creating a // variable for bar data set lateinit var barDataSet: BarDataSet // on below line we are creating array list for bar data lateinit var barEntriesList: ArrayList<BarEntry> override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing // our variable with their ids. barChart = findViewById(R.id.idBarChart) // on below line we are calling get bar // chart data to add data to our array list getBarChartData() // on below line we are initializing our bar data set barDataSet = BarDataSet(barEntriesList, "Bar Chart Data" ) // on below line we are initializing our bar data barData = BarData(barDataSet) // on below line we are setting data to our bar chart barChart.data = barData // on below line we are setting colors for our bar chart text barDataSet.valueTextColor = Color.BLACK // on below line we are setting color for our bar data set barDataSet.setColor(resources.getColor(R.color.purple_200)) // on below line we are setting text size barDataSet.valueTextSize = 16f // on below line we are enabling description as false barChart.description.isEnabled = false } private fun getBarChartData() { barEntriesList = ArrayList() // on below line we are adding data // to our bar entries list barEntriesList.add(BarEntry(1f, 1f)) barEntriesList.add(BarEntry(2f, 2f)) barEntriesList.add(BarEntry(3f, 3f)) barEntriesList.add(BarEntry(4f, 4f)) barEntriesList.add(BarEntry(5f, 5f)) } } |
Now run your application to see the output of it.
Output:
Contact Us