How to create a simple graph in Android

In this article, we will demonstrate how to create graphs in Android using the GraphView library. The aim is to give you a head start if you intend to add graphs in your Android project.

Getting started

Create a new Android studio project and name it whatever you like.

Add that line to your build.gradle file under your app directory into the dependencies block:

implementation 'com.jjoe64:graphview:4.2.2'

Creating the graph

Create a GraphView element in the XML layout file and do the initialization in the Java code.

XML Layout file:

The User will input four values of the x and y axis and on clicking the upload button will be plotted on the graph.

<<? xml version = "1.0" encoding = "utf-8" ? >
 <RelativeLayout 
xmlns: android = "http://schemas.android.com/apk/res/android"
xmlns: app = "http://schemas.android.com/apk/res-auto"
xmlns: tools = "http://schemas.android.com/tools"
android: layout_width = "match_parent"
android: orientation = "vertical"
android: layout_height = "match_parent"
tools: context = ".MainActivity" >
<com.jjoe64.graphview.GraphView
android: layout_width = "match_parent"
android: layout_height = "200dip"
android: id = "@+id/graph" / >
<LinearLayout
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: layout_alignParentBottom = "true"
android: layout_alignParentStart = "true"
android: layout_marginBottom = "191dp"
android: orientation = "horizontal" >
<LinearLayout
android: id = "@+id/inputOne"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_marginStart = "13dp"
android: orientation = "vertical" >
<EditText
android: id = "@+id/firstNum_1"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value x"
android: inputType = "number" / >
<EditText
android: id = "@+id/secondNum_1"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value y"
android: inputType = "number" / >
</LinearLayout>
<LinearLayout
android: id = "@+id/inputTwo"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_marginStart = "15dp"
android: orientation = "vertical" >
<EditText
android: id = "@+id/firstNum_2"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value x"
android: inputType = "number" / >
<EditText
android: id = "@+id/secondNum_2"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value y"
android: inputType = "number" / >
</LinearLayout>
<LinearLayout
android: id = "@+id/inputThree"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_marginStart = "15dp"
android: orientation = "vertical" >
<EditText
android: id = "@+id/firstNum_3"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value x"
android: inputType = "number" / >
<EditText
android: id = "@+id/secondNum_3"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value y"
android: inputType = "number" / >
</LinearLayout>
<LinearLayout
android: id = "@+id/inputFour"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: layout_marginStart = "15dp"
android: orientation = "vertical" >
< EditText
android: id = "@+id/firstNum_4"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value x"
android: inputType = "number" / >
< EditText
android: id = "@+id/secondNum_4"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: hint = "value y"
android: inputType = "number" / >
</LinearLayout>
</LinearLayout>
<Button
android: id = "@+id/addButton"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_alignParentBottom = "true"
android: layout_centerHorizontal = "true"
android: layout_marginBottom = "17dp"
android: text = "upload" / >
</RelativeLayout>

Initialize the GraphView with a series and the data from the user in the MainActivty :

public class MainActivity extends AppCompatActivity {
 EditText firstNum_1, secondNum_1;
 EditText firstNum_2, secondNum_2;
 EditText firstNum_3, secondNum_3;
 EditText firstNum_4, secondNum_4;
@Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
firstNum_1 = findViewById(R.id.firstNum_1);
  secondNum_1 = findViewById(R.id.secondNum_1);
  firstNum_2 = findViewById(R.id.firstNum_2);
  secondNum_2 = findViewById(R.id.secondNum_2);
  firstNum_3 = findViewById(R.id.firstNum_3);
  secondNum_3 = findViewById(R.id.secondNum_3);
  firstNum_4 = findViewById(R.id.firstNum_4);
  secondNum_4 = findViewById(R.id.secondNum_4);
final GraphView graph = (GraphView) findViewById(R.id.graph);
  Button button = findViewById(R.id.addButton);
graph.setVisibility(View.VISIBLE);
button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
String firstInput_1, secondInput_1;
    String firstInput_2, secondInput_2;
    String firstInput_3, secondInput_3;
    String firstInput_4, secondInput_4;
    //  1 and 5
    firstInput_1 = firstNum_1.getText().toString();
    secondInput_1 = secondNum_1.getText().toString();
firstInput_2 = firstNum_2.getText().toString();
    secondInput_2 = secondNum_2.getText().toString();
firstInput_3 = firstNum_3.getText().toString();
    secondInput_3 = secondNum_3.getText().toString();
firstInput_4 = firstNum_4.getText().toString();
    secondInput_4 = secondNum_4.getText().toString();
try {
     LineGraphSeries < DataPoint > series = new LineGraphSeries < > (new DataPoint[] {
      new DataPoint(0, 1),
       new DataPoint(Integer.valueOf(firstInput_1), Integer.valueOf(secondInput_1)),
       new DataPoint(Integer.valueOf(firstInput_2), Integer.valueOf(secondInput_2)),
       new DataPoint(Integer.valueOf(firstInput_3), Integer.valueOf(secondInput_3)),
       new DataPoint(Integer.valueOf(firstInput_4), Integer.valueOf(secondInput_4))
     });
     graph.addSeries(series);
} catch (IllegalArgumentException e) {
     Toast.makeText(MainActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();
    }
   }
  });
}
}

Yesss! we are done. Run the app, you will see the results as below:

You can always study the code and edit it for your projects!. Let me know your thoughts below in the comment section.

Don’t forget to look up the official documentation on GraphView for more details including realtime graphs, bar charts etc.