How to plot arrays (X and Y coordinates) on axes in your Android App without using dependencies or libraries?

In this video it shows how to plot any graph with x and y coordinates in a view in your Android App. It uses Surface view and Image view to plot the coordinates on the plane, 2-dimensional plane. It takes a simple array of 5 numbers or points as x and y in the code.

I hope you like this video. For any questions, suggestions or appreciation please contact us at: https://programmerworld.co/contact/ or email at: programmerworld1990@gmail.com

Complete source code:

package com.programmerworld.plotxandyaxes;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private TextView textView;
private ImageView imageView;
private SurfaceView surfaceView;
private SurfaceHolder surfaceHolder;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

textView = findViewById(R.id.textView);
imageView = findViewById(R.id.imageView);
surfaceView = findViewById(R.id.surfaceView);

surfaceHolder = surfaceView.getHolder();
}

public void buttonPlot(View view){

int[] x = new int[]{100, 200, 300, 400, 500};
int[] y = new int[]{70, 100, 160, 180, 300};

Bitmap bitmap = Bitmap.createBitmap(surfaceView.getWidth(), surfaceView.getHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);

canvas.drawLine(0, bitmap.getHeight(), bitmap.getWidth(), bitmap.getHeight(), paint);
canvas.drawLine(0, bitmap.getHeight(), 0, 0, paint);

Path path = new Path();
path.moveTo(x[0], bitmap.getHeight() - y[0]);
path.lineTo(x[1], bitmap.getHeight() - y[1]);
path.lineTo(x[2], bitmap.getHeight() - y[2]);
path.lineTo(x[3], bitmap.getHeight() - y[3]);
path.lineTo(x[4], bitmap.getHeight() - y[4]);

canvas.drawPath(path, paint);

imageView.setImageBitmap(bitmap);

// Surface View plot below:
canvas = surfaceHolder.lockCanvas();

canvas.drawLine(0, bitmap.getHeight(), bitmap.getWidth(), bitmap.getHeight(), paint);
canvas.drawLine(0, bitmap.getHeight(), 0, 0, paint);

canvas.drawPath(path, paint);

surfaceHolder.unlockCanvasAndPost(canvas);

// Showing the coordinates in TextView
textView.setText("X = " + Integer.toString(x[0]) + " "
+ Integer.toString(x[1]) + " "
+ Integer.toString(x[2]) + " "
+ Integer.toString(x[3]) + " "
+ Integer.toString(x[4]) +
"\nY = " + Integer.toString(y[0]) + " "
+ Integer.toString(y[1]) + " "
+ Integer.toString(y[2]) + " "
+ Integer.toString(y[3]) + " "
+ Integer.toString(y[4]));
}
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.317"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.191" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="104dp"
android:layout_marginTop="36dp"
android:onClick="buttonPlot"
android:text="Display the Plot"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<SurfaceView
android:id="@+id/surfaceView"
android:layout_width="212dp"
android:layout_height="209dp"
android:layout_marginStart="93dp"
android:layout_marginTop="45dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="93dp"
android:layout_marginTop="54dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/surfaceView"
app:srcCompat="@drawable/ic_launcher_background" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.317"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.191" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="104dp"
android:layout_marginTop="36dp"
android:onClick="buttonPlot"
android:text="Display the Plot"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<SurfaceView
android:id="@+id/surfaceView"
android:layout_width="212dp"
android:layout_height="209dp"
android:layout_marginStart="93dp"
android:layout_marginTop="45dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="93dp"
android:layout_marginTop="54dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/surfaceView"
app:srcCompat="@drawable/ic_launcher_background" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.programmerworld.plotxandyaxes">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.PlotXAndYAxes">
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Leave a Reply

%d bloggers like this:
Available for Amazon Prime