Android – Drawing circle at the touched point of SurfaceView

SurfaceView is a drawing surface provided by Android. In SurfaceView, drawings are performed in a non-ui thread which protects the application from ANR (  Application Not Responding ) errors.

In this article, we will develop an Android application which draws a circle at the touched position of SurfaceView.

This application is developed in Eclipse 4.2.0 with ADT Plugin (22.0.1) and Android SDK ( 22.0.1 ) .

1. Create a new Android application namely “GraphicsDrawPointSurfaceView”

Figure 1 : Create new Android application project

2. Configure the project

Figure 2 : Configure the project

3. Design application launcher icon

Figure 3 : Design application launcher icon

4. Create a blank activity

Figure 4 : Create a blank activity

5. Enter MainActivity details

Figure 5 : Enter MainActivity details

6. Create a new class file in src/in/wptrafficanalyzer/graphicsdrawpointsurfaceview/PaintSurface.java

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.View.OnTouchListener;

public class PaintSurface extends SurfaceView implements Runnable, OnTouchListener{

    // Surface holder allows to control and monitor the surface
    private SurfaceHolder mHolder;

    // A thread where the painting activities are taking place
    private Thread mThread;

    // A flag which controls the start and stop of the repainting of the SurfaceView
    private boolean mFlag = false;

    // X coordinate of the touched position
    private float mX;

    // Y Coordinate of the touched position
    private float mY;

    // Paint
    private Paint mPaint;

    public PaintSurface(Context context, AttributeSet attrs) {
        super(context, attrs);

        // Getting the holder
        mHolder = getHolder();

        // Initializing the X position
        mX = -100;

        // Initializing the Y position
        mY = -100;

        // Initializing the paint object mPaint
        mPaint = new Paint();

        // Setting the color for the paint object
        mPaint.setColor(Color.BLUE);

    }

    public void resume(){
        // Instantiating the thread
        mThread = new Thread(this);

        // setting the mFlag to true for start repainting
        mFlag = true;

        // Start repaint the SurfaceView
        mThread.start();
    }

    public void pause(){
        mFlag = false;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch(event.getAction()){
        case MotionEvent.ACTION_DOWN:
            // Getting the X-Coordinate of the touched position
            mX = event.getX();

            // Getting the Y-Coordinate of the touched position
            mY = event.getY();
            break;
        }
        return true;
    }

    @Override
    public void run() {
        while(mFlag){
            // Check whether the object holds a valid surface
            if(!mHolder.getSurface().isValid())
                continue;
            // Start editing the surface
            Canvas canvas = mHolder.lockCanvas();
            // Draw a background color
            canvas.drawARGB(255, 255, 255, 255);
            // Draw a circle at (mX,mY) with radius 5
            canvas.drawCircle(mX, mY, 5, mPaint);
            // Finish editing the canvas and show to the user
            mHolder.unlockCanvasAndPost(canvas);
        }
    }
}

7. Update the layout file res/layout/activity_main.xml

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <in.wptrafficanalyzer.graphicsdrawpointsurfaceview.PaintSurface
        android:id="@+id/paint_surface"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</RelativeLayout>

8. Update the class in the file src/in/wptrafficanalyzer/graphicsdrawpointsurfaceview/MainActivity.java

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends Activity {

    PaintSurface mPaintSurface;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Getting reference to the PaintView
        mPaintSurface = (PaintSurface)findViewById(R.id.paint_surface);

        // Setting the touch listener
        mPaintSurface.setOnTouchListener(mPaintSurface);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    protected void onResume() {
        super.onResume();
        mPaintSurface.resume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mPaintSurface.pause();
    }
}

9. Screenshot of the application

Figure 6 : Screenshot of the application in execution

10. Download the source code

Android - Drawing circle at the touched point of SurfaceView 1.01 MB

Download Full Source Code

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: canvas, graphics, SurfaceView, Thread