Sign It! Part II (Saving the Canvas & Updating Gallery)

Welcome to the part 2 of the Sign It! app series on roadtodroid. In this post we explore the method to save our drawing from the canvas to a bitmap image & also to store that image onto the system storage.
For this part I will use the app made till the previous post and build onto it only. So I recommend your to go through that one first.

1. Update the onDraw() method to create Bitmap for the canvas

• In the onDraw() method , previously we only drew to the view using canvas.drawPath(path, paint);
• We now  create a new temporary canvas and call it singleuseCanvas.
• Also we create a global Bitmap called myBitmap to store each update to singleuseCanvas.
• We first set myBitmap to singleuseCanvas using singleuseCanvas.setBitmap(myBitmap).
• We then draw to the new canvas using singleuseCanvas.drawPath(path, paint).
• And finally we draw to the Bitmap using singleuseCanvas.drawBitmap(myBitmap, 0, 0, paint).

	private Bitamp myBitmap;
	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
	// TODO Auto-generated method stub
	super.onDraw(canvas);
	canvas.drawPath(path, paint);
	Canvas singleuseCanvas = new Canvas();
	myBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
	singleuseCanvas.setBitmap(myBitmap);
	singleuseCanvas.drawPath(path, paint);
	singleuseCanvas.drawBitmap(myBitmap, 0, 0, paint);
	}

view raw onDraw().java hosted with ❤ by GitHub

2. Save the Bitmap when Save on Action Bar is pressed

• When the save button is pressed we call the function saveMyBitmap(); in the CanvasView.
• Here we first create an empty FileOutputStream (For more visit : http://developer.android.com/reference/java/io/FileOutputStream.html).
• Now we get the root path for the External SD card using Environment.getExternalStorageDirectory().
• After this we create a new File object giving its constructor the path of the directory we want our images to be stored on. This is done by appending root string to "Sign It" folder(You can give any name). The File.separator is the devices' default & specific file separator .
• Then we just create the string containing the name we want to give our file (I have used the systems current date &  time), create another file containing root and file name, give that to the FileOutputStream. 
• We use compress method on myBitmap to compress and put it on the output stream.
• Finally we flush and close the stream.

	@SuppressLint("DefaultLocale")
	public void saveMyBitmap(){
	FileOutputStream fo= null;
	try{
	String root = Environment.getExternalStorageDirectory().toString();
	File ImageDir = new File(root + File.separator + "SignIt");
	ImageDir.mkdirs(); // CREATE THE DIRECTORY IF NOT PRESENT
	String fname=String.format("SignIt-%d.png",System.currentTimeMillis());
	File file = new File(ImageDir,fname);
	fo = new FileOutputStream(file);
	myBitmap.compress(Bitmap.CompressFormat.PNG, 100, fo);
	fo.flush();
	fo.close();
	Toast.makeText(getContext(), ImageDir + "--" + fname, Toast.LENGTH_SHORT).show();
	}
	catch(FileNotFoundException e ){
	e.printStackTrace();
	}catch(IOException e){
	e.printStackTrace();
	}finally{}
	}

view raw saveMyBitmap.java hosted with ❤ by GitHub
• Also remember to add the following line to the manifest file:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

view raw uses_perm.xml hosted with ❤ by GitHub

3. Update Gallery

• Now the next thing is to notify the gallery to update its data when we save a new image to our phone storage. To accomplish this we MediaScannerConnection class.
• The context used in the function is the context of our MainActivity which we will pass later in the MainActivity.
• The code is quite straight forward.

	public void updategallery(Context c) {
	// TODO Auto-generated method stub
	MediaScannerConnection.scanFile(c, new String[]{Environment.getExternalStorageDirectory().toString() + File.separator + "SignIt" }, null, new MediaScannerConnection.OnScanCompletedListener() {
	@Override
	public void onScanCompleted(String path, Uri uri) {
	// TODO Auto-generated method stub
	Log.i("ExternalStorage", "Scanned " + path + ":");
	Log.i("ExternalStorage", "-> uri=" + uri);
	}
	});
	}

view raw updategallery.java hosted with ❤ by GitHub

4. Modify the MainActivity

• In the main activity just add the corresponding function calls in the onOptionsItemSelected.
• Also here we add a new method called  opengallery() to open gallery from our app only. The ACTION_VIEW specifies that some data is to be shown to user of which the Uri we have parsed. Also we add a flag to the intent Intent.FLAG_ACTIVITY_NO_HISTORY , which restricts gallery to be kept in stack.
• And now just run the project.

	package com.roadtodroid.blogspot.in.signit;
	import android.app.Activity;
	import android.content.Intent;
	import android.net.Uri;
	import android.os.Bundle;
	import android.view.Menu;
	import android.view.MenuInflater;
	import android.view.MenuItem;
	import android.widget.Toast;
	public class MainActivity extends Activity {
	private CanvasView myCanvas;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	myCanvas= new CanvasView(this);
	setContentView(myCanvas);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	// TODO Auto-generated method stub
	MenuInflater inflater = getMenuInflater();
	inflater.inflate(R.menu.my_menu, menu);
	return super.onCreateOptionsMenu(menu);
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	// TODO Auto-generated method stub
	switch(item.getItemId()){
	case R.id.gallery:
	Toast.makeText(getBaseContext(), "Gallery", Toast.LENGTH_SHORT).show();
	opengallery();
	break;
	case R.id.save:
	Toast.makeText(getBaseContext(), "Save", Toast.LENGTH_SHORT).show();
	myCanvas.saveMyBitmap();
	myCanvas.updategallery(this);
	break;
	case R.id.erase:
	Toast.makeText(getBaseContext(), "Eraser", Toast.LENGTH_SHORT).show();
	myCanvas.set_erase_on();
	setContentView(myCanvas);
	myCanvas.clear_erase_on();
	break;
	case R.id.pencil:
	Toast.makeText(getBaseContext(), "Pencil", Toast.LENGTH_SHORT).show();
	break;
	}
	return super.onOptionsItemSelected(item);
	}
	private void opengallery(){
	Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("content://media/internal/images/media"));
	intent.addFlags(Intent.FLAG_ACTIVITY_NO_HISTORY); // FLAG_ACTIVITY_NO_HISTORY restricts gallery to be kept in stack
	startActivity(intent);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

PREVIEW:

Scribble down

Click Save icon 

Images stored in gallery

Voila!!

Download Code:

CLICK THE ICON

SHARE

Shobhit Chittora

Hi there, I am Shobhit Chittora. I am a college student and like to develop apps for Android platform.I started this blog to share my experiences with Android development and may be help you guys on the “roadtodroid”.

• 
•