Android – Drawing circle at the touched point of SurfaceView

July 1, 2013

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”

Create new Android application project

Figure 1 : Create new Android application project

2. Configure the project

Configure the project

Figure 2 : Configure the project

3. Design application launcher icon

Design application launcher icon

Figure 3 : Design application launcher icon

4. Create a blank activity

Create a blank activity

Figure 4 : Create a blank activity

5. Enter MainActivity details

Enter MainActivity details

Figure 5 : Enter MainActivity details

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

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview;

import android.content.Context;
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


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

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

        // Start repaint the SurfaceView

    public void pause(){
        mFlag = false;

    public boolean onTouch(View v, MotionEvent event) {
        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();
        return true;

    public void run() {
            // Check whether the object holds a valid surface
            // 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

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

<RelativeLayout xmlns:android=""
    tools:context=".MainActivity" >

        android:layout_height="fill_parent" />


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

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview;

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

public class MainActivity extends Activity {

    PaintSurface mPaintSurface;

    protected void onCreate(Bundle savedInstanceState) {

        // Getting reference to the PaintView
        mPaintSurface = (PaintSurface)findViewById(;

        // Setting the touch listener


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

    protected void onResume() {

    protected void onPause() {

9. Screenshot of the application

Screenshot of the application in execution

Figure 6 : Screenshot of the application in execution

10. Download the source code

How to hire me?

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

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

For hiring me, please mail your requirements to

My other blogs

Android Knowledge Quiz

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

Tags: , , ,

One Response to Android – Drawing circle at the touched point of SurfaceView

  1. ey√ľp on January 20, 2014 at 6:23 pm

    Hi.Thank you so much for sharing. I just wanted to ask you a question that I want to use the X and Y coordinates of the pick. Can you help in this regard?

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner