Android – Point Graph Series with Kotlin
Last Updated :
30 Jun, 2022
Graphs are used to represent vast amounts of data in an easily readable form. There are several graphs used to display data such as simple bar graphs, group bar graphs, point graph series, and others. In this article, we will take a look at the implementation of Point Graph Series in Android applications using Kotlin.
Note: If you are looking to implement Point Graph Series in Android using Java. Check out the following article: Point Graph Series 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 to build.gradle(Module:app)
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation 'com.jjoe64:graphview:4.2.2'
After adding the above dependency now sync your project and we will now move towards the implementation of our GraphView.
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. Comments are added in the code to get to know in detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
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 = "@string/app_name"
android:textAlignment = "center"
android:textColor = "@color/purple_200"
android:textSize = "20sp"
android:textStyle = "bold" />
< com.jjoe64.graphview.GraphView
android:id = "@+id/idGraphView"
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.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.jjoe64.graphview.GraphView
import com.jjoe64.graphview.series.DataPoint
import com.jjoe64.graphview.series.PointsGraphSeries
class MainActivity : AppCompatActivity() {
lateinit var graphView: GraphView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
graphView = findViewById(R.id.idGraphView)
val series: PointsGraphSeries<DataPoint> = PointsGraphSeries<DataPoint>(getDataPoint())
graphView.addSeries(series)
graphView.viewport.isScrollable = true
graphView.viewport.isScalable = true
graphView.viewport.setScalableY( true )
graphView.viewport.setScrollableY( true )
series.shape = PointsGraphSeries.Shape.POINT
series.size = 12f
series.color = R.color.purple_200
}
private fun getDataPoint(): Array<DataPoint> {
return arrayOf(
DataPoint( 0.0 , 1.0 ),
DataPoint( 1.0 , 2.0 ),
DataPoint( 2.0 , 3.0 ),
DataPoint( 3.0 , 5.0 ),
DataPoint( 4.0 , 1.0 ),
DataPoint( 4.0 , 3.0 ),
DataPoint( 5.0 , 3.0 ),
DataPoint( 6.0 , 2.0 )
)
}
}
|
Now run your application to see the output of it.
Output:
Share your thoughts in the comments
Please Login to comment...