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

Your email address will not be published. Required fields are marked *