Note: This article is really old. It is here for posterity only. You should really find a more current tutorial.

I’ve been a little frustrated by the lack of Android tutorials. I got a Hello world going, and found that most of the few tutorials I could find were WAY more complicated than what I want to start with. GPS, map overlays, to-do lists, etc, which is great and all but I want to start simple and work up from that. So I set out to build “Hello Circle,” a program which drew a dot on the screen wherever you touched it. After about 12 hours of beating my head against Eclipse, the Android SDK, and the frequently incorrect Android documentation I got it working. So here’s a tutorial.

Setting up the environment I’m going to assume you already successfully completed the Hello World tutorial. Which means you’ve got yourself an IDE (probably Eclipse), the Android SDK, and the ADK (Android Development Kit) which is a plugin for Eclipse to help keep things in order. If you haven’t done that yet follow these instructions and pray everything works as planned. I’ll see you in a few hours. Create a project just like you did for Hello World. Creating the ViewGroup In order for anything to display on the screen you need to create a view. In the Hello World tutorial you created a TextView. We’re going to use the XML setup for creating our view, and rather than creating a TextView we’re going to use a FrameLayout, which is acutlaly a view group. Open up /res/layout/main.xml and plop in this fine code (obliterating anything that may be there):

This, when it’s called in our code, will create a FrameLayout view with an id of “main view,” a width/height that fills the screen, and a neon green background. The hex color code for the background includes the alpha channel (the first to FFs). Setting the contentView to our XML Head over to your main class and call setContentView on your layout. Your code should look something vaguely like this:

If you run your code at this point you should get a big green background which does nothing. Hooray! Creating the Ball class Now we want to create a circle. Actually we want to create a lot of circles. So the first step is to create a new class called Ball. Right click on your project’s main class in the Package Explorer (on the left) and click New > Class. Give it the name Ball and click Finish. Our ball is actually going to be another view. What? Yeah. It’s a view. All of our Ball views will eventually go into our FrameLayout, but we’ll worry about that later. So first, modify your Ball class so that it extends View, since it’s a new type of View, and while you’re at it go ahead and import some of the things we’ll need for drawing:

In order to draw a ball we need a handful of things: a Canvas to draw them on, x and y coordinates to place the center of the ball, the radius, and Paint to give it color. So we’ll start by establishing those (I hid the imports for the sake of clarity, you should leave yours there):

In the last line we create a new Paint object, creatively called mPaint. A Paint contains information like colors, text sizes, etc, which affect the appearance of the drawing. So far we haven’t assigned any of those things to the Paint, we’ve just created it. Now we need to write the Ball constructor, which is the method to be called whenever we create a new ball:

Our constructor takes a Context, x, y, and radius r. We pass these arguments in when we instantiate the object and assign them to the object properties. And lastly, the method which actually draws the circle, onDraw:

Ok, our Ball class is done. Save it and head back over to the main class. Drawing a Ball on the screen At this point we haven’t actually drawn anything. We’ve just created Ball which we *could* draw if we so desired. In order to draw it on the screen we first have to get a hold of our FrameLayout. Since we created it via XML we’ll need to find it again using findViewById():

Run your code now and, if all goes well, you’ll have a circle with a radius of 25 pixels in the upper left corner of the screen. Yay! Take some time to play around with Paint options, positioning, etc with the various methods outlined in the documentation. Now all we have to do is add a touch listener to react when the screen is touched. Which is thankfully pretty easy. We’re going to create a new touch listener and attach it to our main view all in one fell swoop:

The onTouch() method is a callback function which will be hit whenever you touch the screen. Android will send it a View (v) and a MotionEvent (e). We already know what a view is, and a MotionEvent is an object containing information about the touch. All we care about are the X and Y coordinates, which are accessible via the getX() and getY() methods.

The last thing we have to do before we can start drawing is to cast the view we were sent as a FrameLayout, so we can use the addView() method with it. Then we can instantiate a new Ball at the coordinates sent in the Motion Event:

The getParent() call sets the context for the Ball to the main Activity. I only vaguely understand why it has to be done this way. So now, the moment of truth! You should have all the code you need to run the app in your emulator or even on a real phone. Touching the screen will place a dot where you touched. Amazing! Hopefully you now have enough of an idea of how all this stuff plays together that you can forge your way to making something vaguely useful (which this isn’t).

I have a couple of questions though. I’m just trying to add a button to it that when clicked, if will show a ball at a different location. I changed the layout to a relative layout and added a button at the bottom. I added an OnClickListener and used copied in the code from the OnTouchListnener. It runs, but when I click my button, it bombs out. Here is what I added

Hey its really nice tutorial with clear ideas.
I need some help. Can you please tell me the way to access the coordinates of the center of the circle and edge of the circle.
I want to create pie chart.
Thank you. 🙂

its a great tutorial.but while i run the program the ball show on the screen.but when i touch the ball an error occour with notification is”The application RoboTown (process com.robo.town)has stopped unexpectedly.please try again”

Hey, thanks for the tutorial. I had to make the following changes in to the MainActivity.java to get the code work:

@Override
public boolean onTouch(View v, MotionEvent e) {

float x = e.getX();
float y = e.getY();

FrameLayout flView = (FrameLayout) v;

System.out.println(getActivity() == null);

flView.addView(new Ball(getActivity(), x, y, 25));

return true;
}

private MainActivity getActivity() {
return this;
}

As you can see I _replaced getParent() with getActivity()_ to be able to get the hosting activity and _added return true_ to the end of the file, else the program will crash when either painting dots or starting up, respectively. Hope someone gets use from these.