How to save canvas drawing and display it when the button is clicked

Question

hey i am trying to create android app where i can draw on canvas with two buttons on the bottom i managed to get the drawing to work however right now i need to add two buttons(one is for saving the drawing canvas into database (Sqlite if possible) or bitmap and the other one to import the image from the sqlite and display it into the graphicview)

right now i have no idea what code i have to put into it to make the save and display button works so please help me with the code and thank you for your time :)

here is my code at the moment (the graphic drawing works fine and now i need the code for the save and display button as well as what ive missed in the graphicview.java and MainActivity.java)

GraphicsView.java

package org.example.graphics;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Path.Direction;
import android.view.*;

public class GraphicsView extends View implements View.OnTouchListener {

public GraphicsView(Context context) {
    super(context);
    setBackgroundColor(Color.WHITE);
    setOnTouchListener(this);
}

ArrayList<MyPoint> arrOfPoints=new ArrayList<MyPoint>();

class MyPoint
{
    float x, y;
}
float downx, downy;

@Override
protected void onDraw(Canvas canvas) {
    // Drawing commands go here

    Paint rectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    rectPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    rectPaint.setColor(Color.BLACK);
    canvas.drawRoundRect(new RectF(0, 0, 100, 100), 10, 10, rectPaint);

    rectPaint.setColor(Color.BLUE);
    rectPaint.setAlpha(40);
    canvas.drawCircle(300, 300, 200, rectPaint);
    canvas.drawRect(new RectF(40, 40, 200, 200), rectPaint);
    Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG
            | Paint.STRIKE_THRU_TEXT_FLAG);
    canvas.drawText("Hello there!", 200, 200, textPaint);

    canvas.drawText("You clicked on " + downx + "," + downy, 200, 600,
            textPaint);
        for(int i=0;i<arrOfPoints.size();i++)
                {
                    canvas.drawCircle(arrOfPoints.get(i).x, arrOfPoints.get(i).y, 20, rectPaint);
                }

}

@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
    int action = arg1.getAction();
    MyPoint p=null;
    switch (action) {
    case MotionEvent.ACTION_DOWN:
        downx = arg1.getX();
        downy = arg1.getY();

        p=new MyPoint();
        p.x=arg1.getX();p.y=arg1.getY();

        arrOfPoints.add(p);
        invalidate();
        break;
    case MotionEvent.ACTION_MOVE:
        downx = arg1.getX();
        downy = arg1.getY();
        p=new MyPoint();
        p.x=arg1.getX();p.y=arg1.getY();
        arrOfPoints.add(p);
        invalidate();
        break;
    case MotionEvent.ACTION_UP:

        break;
    case MotionEvent.ACTION_CANCEL:
        break;
    default:
        break;
    }
    return true;
}

MainActivity.java

package org.example.graphics;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.RectF;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new GraphicsView(this));
}

main.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/background">

 <org.example.graphics.GraphicsView
   android:id="@+id/graphics"
   android:layout_width="fill_parent"
   android:layout_height="341dp" />

   <Button
    android:id="@+id/ChoosePictureButton"/>
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Choose Picture"

 <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Save Picture" android:id="@+id/SavePictureButton"/>

</LinearLayout>

My AndroidManifest.xml is still at default because i havent edit anything in it yet

Answer 1

You can use this code in your save button click listener.

int canvasWidth = 500;
int canvasHeight = 500;
View v = new GraphicsView(MainActivity.this);
Bitmap bitmap = Bitmap.createBitmap(canvasWidth, canvasHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
v.draw(canvas);

//now bitmap has your canvas image

//set it to your ImageView
yourImageView.setImageBitmap(bitmap);

//or save to sdcard
File dir = new File("/sdcard/yourAppFolder/");
if (!dir.isDirectory()) {
    dir.mkdirs();
}
File outputFile = new File(dir, "image.jpg");
OutputStream fout = null;
fout = new FileOutputStream(outputFile);
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fout);
fout.flush();
fout.close();