Introduction to Java via Android
Lesson 2 Class Notes and Links

First some intoductory materials for this class. We are covering a lot of topics very fast - one thing I am intentionally giving you a slow introduction to is Java - the programming language. Along the course of learning about Android - I am going to try to introduce to Java in small bites via well done YouTube videos.

First Video:
Interesting parts: 1:30 - to the End
Younger kid talking about Java (not Eclipse)

Second Video:
3:00 - to the End
Same kid installing Eclipse

Third Video:
Same kid... The whole video is pretty applicable.

Now - on to discussing this Lesson:

The goals of this lesson are simple. For you to imagine Something - a character, a race car, a spaceship, whatever - and draw it to the Android screen using the geometry drawing classes in the built-in android SDK. In my example code for this lesson I will be drawing an alien creature that looks (admittedly) a little too much like something out of Monsters, Inc.

First - you should know what an Activity is - Android apps are generally built out of a collection of Activities. An Activity should present the user interfaces necessary to do a certain thing. For example, an activity might present a list of menu items a user can choose from or it might display photographs along with their captions. In our case there will only initially be one Activity will that will simply launch and show our main game screen.

The Activity in my example for this lesson is here. As you can see... there are is not much code in this file. It creates my SpaceCreature - and tell Android that this SpaceCreature needs to be drawn to the screen. Don't worry too much about the details of how this is happening right now. Just know that where you see code on this page that says: "setContentView(_spaceCreature);" I am telling Android to draw my SpaceCreature.

Now we should take a look at the SpaceCreature.java file and see just what in this file will tell Android what to draw.

Inside this file you will find a method called protected void onDraw(Canvas canvas). This method is dedicated to giving the specific instructions about what to draw to the screen. I'll go through some of the code in this method and explicitly describe what all the numbers in the method are doing - but first a little bit of important information:

The Android Emulator Screen Size (also called it's resolution) is 480 pixel by 320 pixels. These pixels can be thought of "dots" or "points" that can be drawn onto a coordinate space that has 480 points on the long side of the phone and 320 points on the short side.

This is probably the ugliest sketch anyone has ever done on this topic - but I think it quickly gets the point across.

Imagine the blue section is the Android's screen. Remember that X runs left to right and Y runs up and down. The lines in the diagram show the coordinates of each corner. As you can see - this actually works differently than what you've been studying in Algebra in a few important ways:

(0,0) is in the top left corner of the screen
X gets bigger as you move to the right
Y get bigger and you move down.

So - armed with this knowledge... let's look at my code example. I should emphasize here that you need to be able to run my example inside of your own emulator before you continue down this path. You will want to start by playing with my example - changing values and seeing what they do before you start on your work or you will feel lost, confused and alone in the universe (okay - well maybe not all that, but get my example running before you move on).

Okay! So... back to our OnDraw method.

	// MIX MY PAINT
	Paint greenPaint = new Paint();
	greenPaint.setStrokeWidth(5);
	greenPaint.setColor(Color.rgb(124, 216, 96));

While it is clear that I'm creating a color to draw with - there are 2 things might not be immediately clear: First, .SetStrokeWidth(5) tells Android that when I draw with this color - how thick I want the line to be drawn... Play with the number and see what you get. And Color.rgb(124, 216, 96) is a system commonly used in programming to describe a color in terms of hue and darkness. In order to play with what colors you can make you should go to this RGB color picker and see what you can come up with. On the page you will see a rainbow of colors that you can click on and a slider on the right that changes the "darkness" of the color. As you click around you will notice a section beneath the rainbow that says "Current Color" - if you look in that section you will see 3 numbers Red, Green and Blue. These are the three numbers in Color.rgb(124, 216, 96) - and so changing these colors will change the color of my creature when you run my app.

     	// DRAW THE alienBody
        ShapeDrawable alienBody = new ShapeDrawable(new OvalShape());
        alienBody.getPaint().setColor(greenPaint.getColor());	
        // 1st Number = left side of the oval, x coordinate
        // 2nd Number = top side of the oval, y coordinate
        // 3rd Number = right side of the oval, x coordinate
        // 4th Number = bottom side of the oval, y coordinate
        alienBody.setBounds(50, 50, 100, 100);        
        alienBody.draw(canvas);

I added some comments to this code to try and describe how SetBounds is handled by Android. Again - an ugly picture might be better.

Hehe. This one is so ugly that it almost makes me giggle. But hopefully - you can follow the lines and see what each number means to the method? If this is still confusing - please email me and let me know!

Only one other thing of note... if you look up at the code again - you will see something that says: new OvalShape(). Clearly - we're drawing circle like things here. But what if you want to draw some other shape instead (we'll get to straight lines in a minute)? Well - go here. This will take you to a a page that shows some information from the Google drawing SDK. If you look at the box in the lower, left-hand corner you will see a section that is labelled - Classes. In there - you will see this OvalShape that we are using. You will also see "RectShape" (which stands for Rectangle) and a few other shape "classes". So yes - you guessed it! These are other shapes you can draw. So - to experiment with drawing different shapes simply replace "new OvalShape()" in the code with some of these other shapes.

       	// DRAW THE LEFT AND RIGHT ARMS
        // 1st and 2nd Numbers - (x, y) of first point on the line
	// 3rd and 4th Numbers - (x, y) of the last point on the line
        canvas.drawLine(52, 65, 52, 120, greenPaint);

This is the last bit of code we need to cover in this lesson. This method draws a simple line. In my example, you can see that I use lines to draw arms, legs, feet, etc... I'm not sure if my comments are particularly helpful or not. Basically you can think about a line being drawn between a start point and an end point. The start point has an x,y coordinate and the end point has an x,y coordinate. If you look at the method above and the comment in this light - you will see that the first 2 numbers describe the first point's x,y coordinates and the last 2 numbers describe the last point's xy coordinates.

Now! Start drawing - have fun!