





Some times, android applications will consist of more than some buttons and some text. Or maybe you are looking into Android game development. Maybe you want to make a sketching application? You’ll have to know the basics about using the onTouch event. So let’s make a basic single touch drawing app on Android!

Let’s have a look at what we will be creating

As you can see it will be ultra-basic but it will teach you about some key concepts.

Creating a custom view

First (of course) create a new Android application in your preferred IDE. The first thing we want to do now is create a custom View. We can do this by creating a new class that extends the View class.

package com.example.app; import android.content.Context; import android.util.AttributeSet; import android.view.View; public class MainDrawingView extends View { public MainDrawingView(Context context, AttributeSet attrs) { super(context, attrs); } }

This is about the bare minimum that you will need.

In the designer view of your main activity, you can now add the newly created MainDrawingView. You can add it inside of a layout and, if you wish to expand on this example, you could add some buttons for colors, etc…

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" tools:context="com.example.app.FullscreenActivity"> <!-- This is the view on which we will draw. --> <view android:layout_width="match_parent" android:layout_height="match_parent" class="com.example.app.MainDrawingView" android:id="@+id/single_touch_view" android:layout_gravity="left|top" android:background="#ffffff" /> </FrameLayout>

Great! Now if we run this, our application will run the activity and create the layout with our custom view. But it doesn’t do anything yet, let’s fix that!

Using the onTouch event to draw on a canvas

Now that we have our view created we can implement the code to draw on a Canvas.

First, let’s think about how we will handle this.

We need to:

Set a paint style

Listen for a touch event

Create a new starting point when we touch the screen

Draw a path when we move our finger

Redraw the view when the onTouchEvent fires.

So let’s do this!







First, let’s declare some variables and override the onDraw and onTouchEvent functions. We want the onTouchEvent to fire the onDraw method to update the view with the new information. For this we can just call invalidate() from onTouchEvent.

We need the onDraw event to draw the path on the canvas.

package com.example.app; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class MainDrawingView extends View { private Paint paint = new Paint(); private Path path = new Path(); public MainDrawingView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { canvas.drawPath(path, paint); } @Override public boolean onTouchEvent(MotionEvent event) { // Makes our view repaint and call onDraw invalidate(); return true; } }

Of course now we still need to make sure our paint variable gets a color, style and width. We will define this upon construction the view. Edit your constructor like this:

public MainDrawingView(Context context, AttributeSet attrs) { super(context, attrs); paint.setAntiAlias(true); paint.setStrokeWidth(5f); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.STROKE); paint.setStrokeJoin(Paint.Join.ROUND); }

We now have defined that our path will be stroked with a black color that is 5dpi in width. The points of the path we draw will be joined and rounded.

Now all that is left is to make sure that we add points to the path when we move our finger over the screen! Edit the onTouchEvent like this:

public boolean onTouchEvent(MotionEvent event) { // Get the coordinates of the touch event. float eventX = event.getX(); float eventY = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // Set a new starting point path.moveTo(eventX, eventY); return true; case MotionEvent.ACTION_MOVE: // Connect the points path.lineTo(eventX, eventY); break; default: return false; } // Makes our view repaint and call onDraw invalidate(); return true; }

What we do in the code above, is first store the X and Y coordinates of the event (the touch or the moving of your finger) in variables. We then put in a switch statement to identify the type of event that was fired. In this case we need to create a new starting point for the path if the event is of type MotionEvent.ACTION_DOWN, which means we placed our finger on the screen, and connect points on MotionEvent.ACTION_MOVE which is when we moved our finger.

Next, we invalidate the view so we force it to redraw. The onDraw method will now be triggered and draw on the canvas. Go ahead and test it out!