Shares

Android Drawing App Tutorial – Pt. 2

Android Drawing App Tutorial

This blog post is part two of my Android Drawing App tutorials. It is strongly encouraged that you finish part one of this tutorial before proceeding with this one.  At the end of part one of this tutorial, we were able to draw something with our Android drawing app, and we added some Icons to the bottom toolbar. We will now proceed to implement the functionalities that each of those icons represents. You can download the source code from here.

Implement Delete Drawing

The implementation for deleting or erasing everything in the screen is actually quite simple, all we need to do is to clear the screen like this:

However before you call the above method, you may want to give the user the option to confirm the wipe the screen call. We accomplish this with an Alert dialog, go ahead and add this method to your MainActivity.

You need to add an instance of the CustomView at the top of the MainActivity like this private CustomView mCustomView, and in the onCreate() method go ahead and instantiate this class like this  mCustomView = (CustomView)findViewById(R.id.custom_view);

And with that, you can now call the delete method whenever the user touches the icon you designate as the delete or erase icon. Update your handleDrawingIconTouched method like this:

Implement Undo and Redo

Follow the steps below to implement redo and undo in your Android drawing app.

Step 1: Add Path List – near the top of your CustomView.java class, add two array list to hold the paths that are drawn on the screen and the paths that have been removed from the screen like this:

Step 2: Update Touch Event Handler – now that we need to record the history of the paths we draw, we need to handle our drawing differently. Instead of adding our updating our drawing in the onTouchEvent() method we can create separate private methods and then call them from the onTouchEvent() method like this:

Step 3: Create Touch Start Method – the touch start methods is called when the finger touches the screen which is considered a MotionEvent.Action_Down event and when this happens, we want to clear the parts list and reset the Path object. Add the following method to your app:

Step 3: Create Touch Move Method – when the user moved from point A to the point, we will need to evaluate the tolerance value that we set in the last step and then apply this method adapted from the  Android FingerPaint App.

Step 4: Create Touch Up Method – when the user lifts up their finger from the screen, we want to paint what they have just drawn on the screen as well as save it to our path like like this:

Step 5: Update the onDrawMethod – we will need to update our onDraw() so that it draws from the path list.

Step 6: Add Undo and Redo Methods  – now we need to add the methods that will trigger the undo and the redo.  Add following two methods to your custom view.

Step 7: Call the Undo and Redo Methods – update your handleDrawingIconTouched() method in MainActivity to handle undo and redo button click.

Implement Share Drawing

In this section of the tutorial, we will implement the ability to share our drawing.  To share our picture, we will necessarily take a screenshot of what we drew, save that as an image and then share it with share intent. Follow the steps below to share your drawing.

Step 1: Request Permission – we will save the drawing we wan to save as an image to the device external folder, so we need to write permission for the external folder. Add this line of code to your AndroidManifest.xml file:

Step 2: Add Share Method – add the method that needs to be called to perform a share, we will leave this method blank for now and populate it shortly. Add the method private void shareDrawing() to your MainActivity.java file.

Step 3: Call Share Method – update the handleDrawingIconTouched() method to call the share method whenever the icon representing share is touched.

Step 4: Populate Share Method – we can now populate the share method with the following code

Code Walk through 

Here is what is going on in the above code:

  1. First, we enabled drawing cache on our custom view
  2. We created a file with the android_drawing_app.png
  3. We then get the cache of our drawing and compress it into a JPEG
  4. Then we create a share intent to deliver our drawing.

Go ahead and run your app and make sure that you can share an image, if not use the comment box to let me know what you need help with. If you have not already done so, You can download the source code from here.

Implement Change Brush Size

brush_size_picker_dialog_framed1

When we initiated our custom view, we set the brush size to 20. In this section, we want to implement the code that will give the user the option to choose a different size. I have chosen to use a Seekbar to implement this feature with values from 1 to 50. So the user will have a dialog like the one below to drag left of right to pick a brush size.

Follow the steps below to implement brush chooser to your Android drawing app.

Step 1: Add Set Brush Methods – in your CustomView.java class file add the following methods that will set and get the brush size

Step 2: Add Packages – the alert dialog that will show the choose new brush dialog will be defined in a separate file and when a new brush size is selected we will use a listener to tell the MainActivity that a new size has been selected. This listener will also be defined in a separate file. So for code organization let use go ahead and two packages: “dialogs” and “listeners”.

Step 3: Add Listener – in the listeners package add an Interface OnNewBrushSizeSelectedListener.java and here is the content of this Interface (take not that an Interface is not a class).

Step 4: Add Dialog – In the dialogs, package add a blank Fragment with the name BrushSizeChooserFragment.java and here is the content of the layout of this Fragment

Step 5: Call the Dialog – before implementing the dialog fragment go ahead and add the code below to your MainActivity. This will be the method that calls the dialog, ignore the red squiggly lines for now.

And now you can update your handleDrawingIconTouched() method to call the method above when the icon representing brush size is selected. Here is the update method.

Step 6: Implement Dialog Fragment – copy and paste the code below to your BrushSizeChooserFragment.java , you will need to add required text to your res/string folder.

 

In the code above we used newInstance method to pass in the currently selected brush size to the Fragment. This way we can set the Seekbar to the current size thereby giving the user a visual feedback on what size they currently have before they make a new selection.

Run the app now, and you should be able to change the size of the brush.

Conclusion

This concludes my two-part tutorial series on creating Android drawing app. You should now have a functioning basic drawing app. If you want to expand this app further then you may want to take my course on the topic.

 

 

 

 

 

 

 

 


Also published on Medium.

About the Author valokafor

I am a Software Engineer with expertise in Android Development. I am available for Android development projects.

follow me on:
6 comments

Comments are closed