In this really simple mini-project, we will really harness the power of classes and objects by using classes from the Android API which allow us to draw graphics on the screen. We will see how we can draw shapes, lines, pixels, text, and even custom-designed graphics like game characters. We will do all of this by making objects of other people’s classes. We are then a big step closer to building our first real game.

Create a new Android Studio project, call it Graphics Demo with a blank Activity called GraphicsDemoActivity. Delete all the code in GraphicsDemoActivity.java and enter the code below. Notice it has a few differences from our previous mini-projects. Also, note that your project will have errors until we enter the rest of the code. Also, I have listed all the import... code. Remember you can either type this in now or wait until we use the appropriate class and press the Alt|Enter keyboard combination to enter the import... line automatically.

Notice that immediately below the class declaration we declare an object of the type ImageView called ourView. It is this ImgaeView class, provided by Android that we will use to draw upon. So why did we declare it outside of any method? The reason we did this is so that any methods in the class can “see” and use the method. Up until now, we have declared all of our objects and other variables in a method. We will not only use ourView in the onCreate method but also our draw method. Declaring it here makes this possible. This is called a member variable.

The next new thing in our code is the call to the draw method. This is a method that we will create in a moment and will draw on ourView. Notice then that we use the setContentView method just like all the other mini-projects but this time we pass in ourView. This makes whatever we draw upon ourView appear on the screen. So let’s get on and implement our draw method.

Before we get coding we want to add a cute character graphic to our project files so we can use it in our drawing code. Meet Bob.

You can download Bob by right-clicking on the image and selecting Save image as… Just make sure the file is named bob.png. Add the bob bitmap to the drawable folder in your Android Studio folders by dragging it there just like you would move any other file between folders on your PC. The drawable folder is shown in the next image.

Add the bob graphic into the drawable folder in Android Studio, directly. Don’t use your operating system as it would be easy to get it wrong.

Now let’s implement our draw method. I am going to show you all the code at once so you can examine it and run it right away. We will dissect how it works when we have seen it in action. Enter the code as shown below. Make sure you do so just before the final closing curly brace } of the GraphicsDemoActivity class.

Here is what the code does chunk by chunk.

First, we have our method signature and the opening curly brace {.

Next, we do a number of things to create a virtual canvas on which to draw. If you try to imagine the internal workings of a graphics card and its relationship to the CPU and the complexity of how our graphics are stored in memory and then represented on the device screen it might give you a headache- it’s not simple. But what these four lines (excluding comments) do is vastly simplify the whole thing.

We create an object of type Bitmap, which we can think of as a blank graphic to draw upon. First, we declare it and then we initialize it using the createBitmap method. The method parameters are 600, 600, Config.ARGB_888, which are the length, width, and format of the bitmap.

Then we declare an object of type Canvas and immediately initialize it- with our blank Bitmap object. Here is that code again we will see how we use this new object of type Canvas really soon.

Below we initialize ourView which is an ImageView object. Then we set blankBitmap as its image. Now anything we do with canvas will appear on ourView which you might remember we set as the view for the entire program in the onCreate method.

Now we declare and initialize an object of the type Paint which perhaps unsurprisingly will allow us to paint on our canvas object.

Below we draw the entire screen as white using the drawColor method and we set the color of the brush we will be using in a moment to Game Code School blue. The four numbers that we use represent the level of transparency, red, green, and blue. If you have not come across the RGB color model before it is simply a way of describing a color using amounts of transparency, red, green, and blue with values between 0 and 255.

Next, we declare another Bitmap object and then use the decodeResource() method to decode our bob.png file into a format suitable for use in our bitmapBob. Then we get to see our canvas object in action. we call the drawBitmap method of the Canvas class. The parameters are the bitmap to draw ( bitmapBob), the x,y screen location ( 500, 50) and our Paint object ( paint).

Now we draw a line with drawLine and the numbers represent the starting and ending x,y coordinates of the line. Next in the code below, we use drawText to perhaps unsurprisingly draw a String at a specific x,y location. After that, we draw a single pixel with drawPoint. Again we pass in the x, y location where we want the point and our object, paint.

[widgets_on_pages id=”udemy_advert_java_3″][widgets_on_pages id=”udemy_code_details”]
We see next that we can also draw shapes like circles and rectangles with the respective methods of the Canvas class. Notice in between we change the color that we draw the rectangle with the setColor method. The parameters of drawCircle are the x, y screen location followed by the radius. The parameters of drawRect are the left, top, right, and bottom locations that represent the rectangle.

Finally, we end the draw method with a closing curly brace } and execution returns to the onCreate method where you might remember we call setContentView(ourView) which displays all our lovely doodling on the screen.

Run the code on an Android device if you haven’t already.

Having achieved what we just have it should not be too hard to imagine replacing the coordinates we used to draw our graphics with variables. We could then manipulate those variables to make them move, perhaps in some kind of loop. Now we are able to draw pixels, shapes, text for perhaps a game’s GUI, and bitmaps that can be used like sprites, we are so close to our first real game project I can nearly smell it.

Before we do we just need a little bit more Java knowledge. The logical next step is Handling game data with Java arrays.