Android – Line Graph View with Kotlin
Last Updated :
30 Jun, 2022
Graphs are used in android applications to display vast amounts of data in an easily readable form. There are different types of graphs used such as BarGraph, GroupBar graph, point, and line graph to represent data. In this article, we will take a look at How to use Line Graph View in Android using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.
Note: If you are looking to implement Line Graph View in Android using Java. Check out the following article: Line Graph View 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 the build.gradle(Module:app) file
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 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"
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.LineGraphSeries
class MainActivity : AppCompatActivity() {
lateinit var lineGraphView: GraphView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
lineGraphView = findViewById(R.id.idGraphView)
val series: LineGraphSeries<DataPoint> = LineGraphSeries(
arrayOf(
DataPoint( 0.0 , 1.0 ),
DataPoint( 1.0 , 3.0 ),
DataPoint( 2.0 , 4.0 ),
DataPoint( 3.0 , 9.0 ),
DataPoint( 4.0 , 6.0 ),
DataPoint( 5.0 , 3.0 ),
DataPoint( 6.0 , 6.0 ),
DataPoint( 7.0 , 1.0 ),
DataPoint( 8.0 , 2.0 )
)
)
lineGraphView.animate()
lineGraphView.viewport.isScrollable = true
lineGraphView.viewport.isScalable = true
lineGraphView.viewport.setScalableY( true )
lineGraphView.viewport.setScrollableY( true )
series.color = R.color.purple_200
lineGraphView.addSeries(series)
}
}
|
Now run your application to see the output of it.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...