Drawing circle at the touched position of View Canvas

June 24, 2013
By

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”

New Android application project

Figure 1 : 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. 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

Showing circle at the touched position

Figure 6 : Showing circle at the touched position


11. Download the 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: , , , ,

One Response to Drawing circle at the touched position of View Canvas

  1. yagnik on May 31, 2016 at 12:44 pm

    help to store multiple coordinates in array and show all of it on click button click event in the main activity….

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