Sign It ! Part I (Drawing on the Canvas)

Hello & welcome to the very first Android Project of roadtodroid. In this section we explore various new functionality under the hood of Android & learn how to use all of them to make our app work effortlessly.
So let me first tell you about the things we are gonna explore with Sign It!

How to draw on canvas in Android?
How to clear a canvas?
How to use action bar icons to inflate menus?
How to save the contents of the canvas to the phone memory?
How to change the pen size and color using action bar icon selections? and many more....

This whole app will be demonstrated in several parts, so be patient & go through everything thoroughly.This part demonstrates how to give your app the functionality of a canvas to draw upon. Also how to erase the whole canvas will also be discussed. All this plus adding icons to action bar and using them is also demonstrated. So get ready for this action packed ride to program Android apps & hope you will enjoy it. Feel free to post any constructive comments.

1. Create a new Android Application Project

Go to File > New > Android Application Project.
In the dialog displayed, enter a name for your app(Sign It!).
Select a target SDK version to make the app targeted for a particular Android distribution.
Also select a Minimum Required SDK to make the app backward compatible as far back as you want.
You may also select a Theme for the app if you like.
Do not change anything if you don't want to as it is pre-selected accordingly. Then click Next.

Give a name to the app

In the next dialog just click next or if you want your project to be save elsewhere(other than the current work space ) choose that from the option provided.Click next.
Next dialog allows you to select a custom icon for your app. Select one if you like, fiddle with background color and other options and click next.

Select icon

In the next dialog box select Empty Activity and click next. Similarly click next in the last dialog box.
This would create a project file in the Package Explorer of Eclipse.

2. MainActivity.java

In the MainActivity.java file copy the code shown below to your activity and change the package name to that of your's if any error is shown.
For now just copy the code & go to the end of this post in the Code Explained section to discuss more on the code.

3. Create a new Class for the Custom View implementation

Go to the package in your project, right-click on it and select New> Class.
Give a name for the class(I have used CanvasView.java), & click Finish.
Once the class is created , open it & copy the code below to it.
For more in-depth discussion go to the end of this post.

4. Create a menu to use in Action Bar

In the res folder under your project, create a new folder by right clicking on res and selecting New Folder.
Change the name of the folder to 'menu'.
Now right click on this menu folder and select a new Android XML file from there. Name it my_menu.xml (or anything).
Now to this xml file copy the code shown below to create some of the menu elements & icons.
I have also added two pngs to the res/drawable-hdpi folder as shown below. The icons are downloaded from www.iconarchive.com & can be downloaded from the Download Code section at the end.

menu folder in res

icons in the drawable-hdpi folder

5. Everything is ready

You are now done with the coding part. The only thing left is to test the app either on a real physical device or on an AVD.
To setup an AVD see my previous post.
To run on a physical device connect the device through USB. Make sure the developer options are enabled & the USB Debugging is checked.
Also make sure that the drivers for your device are installed properly. To do this I used the software named moborobo .You can get is from www.moborobo.com.
After all this just press CTRL + F11 in Eclipse & you are done.

App launch view

Scribble around!

Erase anytime

And many more to come!

Code Explained

CanvasView.java

This is a class which extends the View class of Android which means that it can be used for managing drawings on the main UI thread & also handle user interactions. For more on this check out http://developer.android.com/reference/android/view/View.html
Firstly we create three global variables paint,path & a Boolean flag. The Paint class holds the style and color information about how to draw geometries, text and bitmaps.The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves.
Don't get confused just stay focused here.
The class CanvasView has a constructor with the same name which initializes the paint object using the member functions of the Paint class.The functions are quite obvious to understand from their name only. For any kind of suggestions just press Ctrl + Space in Eclipse.
Next in the onDraw() method we just draw the path to which we will add points later.The path is drawn on the canvas using drawPath(,) method on canvas object.
In the next method i.e. onTouchEvent() which is used to handle user interactions, we add to the path the points the user touches or moves to.This is pretty simple:

a.) We get the current touch position using the getX() & getY() methods on the event object.

b.) Then we use a switch on the the type of event or interaction the user has performed.

It can be either the touching of the screen or moving around on it. The names are fairly obvious,

c.) On MotionEvent.ACTION_DOWN we simply add X & Y to the path using moveTo(X,Y) on path object.

d.) On MotionEvent.ACTION_MOVE we draw a line to X,Y using lineTo(X,Y).

e.)Finally to force a view to draw, we call invalidate().

my_menu.xml

This is the xml file used to tell Android about the content to be drawn in the Action Bar.
The xml contains four item tags, all having different id & title.
An icon is provided using the android:icon property.
The android:showAsAction="ifRoom" or android:showAsAction="always" are used to make items hidden if no room is available or to show them anyway.

MainActivity.java

The main activity in the onCreate() method initializes the global CanvasView object and used it in the setContentView() to make it the main UI view of the application.
Then in the onCreateOptionsMenu() method we create a MenuInflator object and we inflate our menu using its inflate() method.
Lastly in the onOptionsItemSelected() method we use a switch on the item id we provided in the my_menu.xml & perform required operations accordingly.
The rest of the code is pretty straight forward & can be done in multiple ways.

Download Code

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