SignIt! Part III (Alert Dialog and HashMap )

SIGN IT PART III

Hey everyone! Welcome to the final part of the Sign It series. In this section we will add the functionality to let the user select the stroke width and color of the paint object. Also the method of saving different styled paths to the bitmap is also demonstrated.

Before moving any further, it's highly recommended to go through the previous pars of the series for the basic code. Let's go now.

1. Add the function to change the Stroke Width

• Add this function in our CanvasView.java class.
• In this function we create an AlertDialog using AlertDialog.Builder.
• The setPositiveButton() is used to add the "OK" button to the dialog. In the same way a negative or "Cancel" button can be added using setNegativeButton().
• setSingleChoiceItems() is used to add the CharSequence declared before to the addded to the Alert Dialog.
• Finally we show the Alert Dialog using the show() member function.

	public void change_strokewidth(Context c){
	final CharSequence[] items ={"0","1","2","5","10","20"};
	AlertDialog.Builder alert_builder= new AlertDialog.Builder(c);
	alert_builder.setTitle("Pick a pencil size");
	alert_builder.setPositiveButton("OK", new DialogInterface.OnClickListener(){
	@Override
	public void onClick(DialogInterface dialog, int which) {}
	});
	alert_builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() {
	@Override
	public void onClick(DialogInterface dialog, int which) {
	// TODO Auto-generated method stub
	String width=items[which].toString();
	paint.setStrokeWidth(Integer.valueOf(width));
	}
	});
	alert_builder.show();
	}

view raw change_strokewidth.java hosted with ❤ by GitHub

2. Add the function to change the Paint Color

• Same as what we have done with stroke width , we are going to do with paint color.
• We create the Alert Dialog in same way as before. 
• In setSingleChoiceItems() we just use a switch-case construct to set the paint color accordingly.

	public void change_color(Context c){
	final CharSequence[] items ={"RED","GREEN","BLUE"};
	AlertDialog.Builder alert_builder= new AlertDialog.Builder(c);
	alert_builder.setTitle("Pick a pencil color");
	alert_builder.setPositiveButton("OK", new DialogInterface.OnClickListener(){
	@Override
	public void onClick(DialogInterface dialog, int which) {}
	});
	alert_builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() {
	@Override
	public void onClick(DialogInterface dialog, int which) {
	// TODO Auto-generated method stub
	String color=items[which].toString();
	switch(color){
	case "RED": paint.setColor(Color.RED);
	break;
	case "BLUE": paint.setColor(Color.BLUE);
	break;
	case "GREEN": paint.setColor(Color.GREEN);
	break;
	}
	}
	});
	alert_builder.show();
	}

view raw change_color.java hosted with ❤ by GitHub

3. Change the onTouchEvent() method to store path and paint in Hash Map

• We use a private Map pathMap to store each path with its own paint settings.
• The values are put on the Hash Map on ACTION_UP, using the pathMap.put(key,value). 

	private Map<Path,Paint> pathMap = new HashMap<Path,Paint>();
	@Override
	public boolean onTouchEvent(MotionEvent event) {
	// TODO Auto-generated method stub
	float X= event.getX();
	float Y= event.getY();
	switch(event.getAction()){
	case MotionEvent.ACTION_DOWN:
	if(flag_erase_on==false){
	path = new Path();
	path.reset();
	path.moveTo(X, Y);
	}
	return true;
	case MotionEvent.ACTION_MOVE:
	if(flag_erase_on==false){
	path.lineTo(X, Y);}
	break;
	case MotionEvent.ACTION_UP:
	Paint tempPaint = new Paint();
	tempPaint.set(paint);
	pathMap.put(path,tempPaint); //Inserting new path and new paint in Hash Map
	break;
	}
	invalidate();
	return true;
	}

view raw OnTouchEvent.java hosted with ❤ by GitHub

4. Change the onDraw() accordingly 

• In the onDraw() method just add for loop to loop through all the key-value pairs in our Hash Map.
• Draw all the paths using their own specific paints, both on the canvas and on the singleusecanvas (to store it on the bitmap as in Part II).

	@Override
	protected void onDraw(Canvas canvas) {
	// TODO Auto-generated method stub
	super.onDraw(canvas);
	canvas.drawPath(path, paint);
	//To save canvas to Bitmap
	Canvas singleuseCanvas = new Canvas();
	myBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
	singleuseCanvas.setBitmap(myBitmap);
	//for drawing stored paths on canvas and on singleusecanvas
	for(Map.Entry<Path,Paint> p : pathMap.entrySet()){
	canvas.drawPath(p.getKey(),p.getValue());
	singleuseCanvas.drawPath(p.getKey(), p.getValue());
	singleuseCanvas.drawBitmap(myBitmap, 0, 0, p.getValue());
	}
	}

view raw onDraw.java hosted with ❤ by GitHub

5. Change the set_erase_on() method to clear all paths in Map

• Add the method to clear the hash map so as to clear all the paths stored.

	public void set_erase_on(){
	flag_erase_on=true;
	path.reset();
	pathMap.clear(); //clear all the stored paths and paints
	}

view raw erase.java hosted with ❤ by GitHub

Sample Screenshots

Stroke width selection

Color selection

 Download Source Code

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”.

• 
•