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”
2. Configure the project
3. Design application launcher icon
4. Create a blank activity
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
10. Download the source code


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
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?