Drawing circle at the touched position of View Canvas

In this article, we will develop an Android application that draws a circle at the touched position of a custom view canvas.

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 project namely “GraphicsDrawPointViewCanvas”

Figure 1 : 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. Update the file res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Drawing Point - View Canvas</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="coordinates">Touch at some point in the canvas</string>
</resources>

7. Create a new class in src/in/wptrafficanalyzer/graphicsdrawpointviewcanvas/PaintView.java

package in.wptrafficanalyzer.graphicsdrawpointviewcanvas;

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.View;
import android.view.View.OnTouchListener;
import android.widget.TextView;

public class PaintView extends View implements OnTouchListener{

    Paint mPaint;
    float mX;
    float mY;
    TextView mTVCoordinates;

    public PaintView(Context context,AttributeSet attributeSet){
        super(context,attributeSet);

        /** Initializing the variables */
        mPaint = new Paint();
        mX = mY = -100;
        mTVCoordinates = null;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // Setting the color of the circle
        mPaint.setColor(Color.GREEN);

        // Draw the circle at (x,y) with radius 15
        canvas.drawCircle(mX, mY, 15, mPaint);

        // Redraw the canvas
        invalidate();
    }

    public void setTextView(TextView tv){
        // Reference to TextView Object
        mTVCoordinates = tv;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch(event.getAction()){
            // When user touches the screen
            case MotionEvent.ACTION_DOWN:
                // Getting X coordinate
                mX = event.getX();
                // Getting Y Coordinate
                mY = event.getY();

                // Setting the coordinates on TextView
                if(mTVCoordinates!=null){
                    mTVCoordinates.setText("X :" + mX + " , " + "Y :" + mY);
                }
        }
        return true;
    }
}

8. 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" >

    <TextView
        android:id="@+id/tv_coordinates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/coordinates"
        android:padding="10dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true" />

    <in.wptrafficanalyzer.graphicsdrawpointviewcanvas.PaintView
        android:id="@+id/paint_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tv_coordinates" />

</RelativeLayout>

9. Update the file src/in/wptrafficanalyzer/graphicsdrawpointviewcanvas/MainActivity.java

package in.wptrafficanalyzer.graphicsdrawpointviewcanvas;

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

public class MainActivity extends Activity {

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

        // Getting reference to PaintView
        PaintView paintView = (PaintView)findViewById(R.id.paint_view);

        // Getting reference to TextView tv_cooridinate
        TextView tvCoordinates = (TextView)findViewById(R.id.tv_coordinates);

        // Passing reference of textview to PaintView object to update on coordinate changes
        paintView.setTextView(tvCoordinates);

        // Setting touch event listener for the PaintView
        paintView.setOnTouchListener(paintView);

    }

    @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;
    }
}

10. Screenshot of the application

Figure 6 : Showing circle at the touched position

11. Download the source code