Make a basic single touch drawing app for Android



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

Android Hello World drawing

Android Hello World drawing

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!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+21Share on StumbleUpon437Share on Reddit11Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!