Sometimes you need to draw a circle in your app. Sometimes more than a circle but here we will start with a circle. I will go through the mistakes I keep making to future proof myself when I need to draw them circles. The code is available at https://github.com/sunwicked/draw-dragon
Step 1: Start a new project in Android Studio
Step 2: Create a class CircleView which extends View
Get our brush ready for drawing a circle
Step 3: Now is the time to draw our circle. How do we draw a circle? We ask the canvas to do it for us. Let’s ask it nicely in onDraw() method.
But how do we know we are doing it right. To get around we will add the view in a layout first and see. Let’s do that in step 4
Step 4: Adding the circle in an XML file
and voila! It is rendered
Do you know why it is rendered on the left top side? Because we gave x and y coordinates as (50,50) and canvas (0,0) starts from left top.
Let’s see how much space the view is actually occupying. Let’s add a background colour to the view.
It is actually occupying the whole screen and drawing the circle at one point. A bit greedy. Let’s try to fix this.
Step 5: We can give specific height and width values to the view.
Step 6: Let’s try to add more circles. We can add more views to XML but what’s the fun in that. Let’s add a circle wherever the user taps.
First, we add a touch listener to the parent layout.
and then whenever the user touches the screen we fire a method to add a circle.
Looks good but when you run it you find new circles are not there.
So what is happening here? All the new views are added at the same location, lets set different locations for the new views.
Look Ma! I made Circles 🙂 So what is happening here.
We added a margin to the top and left of circle view, hence the views are added from the point where we tap.
Step 7: Remember how the view we added in XML was taking the entire space. We still have that issue. Because last time we explicitly told the dimensions via XML. Let’s fill the canvas and see.
These rectangles start from the tap point on the screen. The position is correct but we still need to take care of space which the view is taking. We would add the size, we want the circle view to be just like we did in the XML.
Notice the width and height parameters now and now when you run it again. Fixed it!
Step 8: Plot twist: What if we need only one circle and we need to move it around with the user’s finger. Ahh, project requirements! You son of a beach.
Now we would stop adding more circles. Let’s go back to one circle in XML. Now we need to get to know when the user taps on the circle and when he moves it and when he releases it. We will start by drawing our circle to the point user taps.
Now we need to move the circle with drag. Let’s just call the same method from ACTION_MOVE. What do you get? A moving circle? Nope. It just appears at the point we tap not moves with the drag.
Notice that we are returning false. Henceforth we are not getting further actions after the first ACTION_DOWN. The boolean value is an indicator of whether we are consuming the event or not. Let’s make the changes.
So now we can replace the circle with any view we want. Did someone say dragons?
This wraps up the first episode. Next episode we will try to draw something more than a circle and put in some text also for fun.
Imagine a non-circle + text = mind blown.
Au revoir!
