Painting a Circle using TouchListener in Android

This program is used to create a colored circle using a View context whenever the user touch the screen.The color generated is random and changes rapidly when dragged…

Note:A basic knowledge in Android needed .

Project structure:-

Source 1:

This is the Activity class.We simply create an instance of our “drawingView” class(which extends View) and add it to current content view…


import android.os.Bundle;

public class Activity1 extends Activity{
    /** Called when the activity is first created. */

    drawingView dview;                    //creating the reference

    public void onCreate(Bundle savedInstanceState)
        dview=new drawingView(this); //creating the instance
        setContentView(dview);         //adding to the activity

Source 2:

This is our “drawingView” class which extends the “View” class from “import android.view.View” package.  This class contains the following logic,

  • Generating a random color value .
  • Implements “OnTouchListener” for generating touch events.
  • Drawing the circle.

import android.content.Context;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
public class drawingView extends View implements OnTouchListener{

	static int x,y,r=255,g=255,b=255;
	final static int radius=30;
	Paint paint;     //using this ,we can draw on canvas

	public drawingView(Context context)
	        paint=new Paint();
		paint.setAntiAlias(true);       //for smooth rendering
		paint.setARGB(255, r, g, b);    //setting the paint color

		//to make it focusable so that it will receive touch events properly

		//adding touch listener to this view

	//overriding the View's onDraw(..) method
	public void onDraw(Canvas canvas)
		paint.setARGB(255, r, g, b);

		//drawing the circle


	//this is the interface method of "OnTouchListener"
	public boolean onTouch(View view,MotionEvent event)
		x=(int)event.getX()-(radius/2);      //some math logic to plot the circle  in exact touch place
		  //System.out.println("X,Y:"+"x"+","+y);      //see this output in "LogCat"
		randColor();       //calls this method to generate a color before drawing
		invalidate();      //calls onDraw method
		return true;

	//this method sets a random color using Math.random()
	//Note: RGB color values ranges from 0 to 255..
	public void randColor()
		//Toast.makeText(c, "r,g,b="+r+","+g+","+b,Toast.LENGTH_SHORT).show();

Some screenshots in Emulator,

This slideshow requires JavaScript.

Note:The above slideshow(a wordpress plugin) has some bug and so it displays the file structure picture…ignore it

About PraveenMax
My Interests: ------------------ Programming , Drawing & Music

9 Responses to Painting a Circle using TouchListener in Android

  1. sam says:

    hey great post…. is there a way to make the circles move using accelerometer on a swipe?

  2. json edbergh says:

    is there a way to retain the canvas nd not erase the previously drawn circles?

  3. Anupriya says:

    Don’t we need any layout design for this???… if yes, then pls upload the layout and manifest file too..

    • PraveenMax says:

      There is no layout file. We are creating a custom view (drawingView) and adding its instance in source 1(line 14,15). But keeping the default layout xml file doesnt harm your app.

  4. Harshiv Patel says:

    your page doesn’t show up properly in opera mobile android app,the code listing’s width should be increased otherwise great tutorial

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: