Beginner programming example for kids with Android!

A little background:

My dad taught me some basic programming back in the 70’s when I was 8 or 9 years old.  And when I say basic, I mean really basic Basic — entirely text-based, using “goto” to go to different line numbers in the program for control logic, etc.  But it was the first I’d ever seen of being able to program a machine to respond to input.  So even making a simple text-based game like “Guess the animal” was amazing and fun!

Now my kids are 11 & 12 years old, and certainly capable of learning to program.  But the problem is that programming “Guess the animal” isn’t interesting at all when you’re used to games like Angry Birds and Plants vs. Zombies.  (It’s a little like how my dad tried to get me interested in building the circuitry of a radio — which was so cool when he was a kid! — but was too old-fashioned to be interesting to kids of my generation.)

So I’ve spent a lot of time trying to find some programming project that is simple enough for beginners, yet cool enough to keep my kids’ interest.  And I’ve found it: Android, with my simple example program “Sprite Fun”.

This example is not intended to illustrate any kind of “best practices” for Android programming.  It’s optimized to be simple enough that even someone who doesn’t know much (if anything) about programming can understand how it works (and modify it), while having the coolness factor of “Hey I made a real app that I can play on my phone!” — to help kids get excited about teaching themselves to program.

The person setting it up doesn’t really need to know anything about Android programming either except for some basic familiarity with Java and Eclipse.  The first step, naturally, is to download and install the Android SDK, and launch the Eclipse installation that is bundled with it (see here). Then go through the “new Android Application Project” wizard, selecting all of the defaults (and giving it your own package name — I called my project “SpriteFun” and used my domain org.outerblogness).

In the initial version of the SpriteFun game, all it does is allow you to create little androids and move them around by touching the screen.  If there’s no android in the spot you touch, it creates one, and if you select one with your finger, you can move it around by moving your finger around the screen.

All you have to do is add a segment to the default MainActivity class (to set the view), and then add two new classes “SpriteFunGameView” and “Sprite”.  Here’s what to add to MainActivity.java (replacing the default “onCreate” method):

    private SpriteFunGameView mSFGView;

 

    // the list of Sprites to display:

    // static to save them when the orientation changes:

private static List<Sprite> sprites = new LinkedList<Sprite>();

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        Log.v(“”, “in SpriteFun”);

        // Create a SpriteFunGameView instance and set it

        // as the ContentView for this Activity.

        mSFGView = new SpriteFunGameView(this, sprites);

        setContentView(mSFGView);

    }

And here’s the SpriteFunGameView.java class:

package org.outerblogness.spritefun;

 

import java.util.LinkedList;

import java.util.List;

 

import android.content.Context;

import android.graphics.Canvas;

import android.util.Log;

import android.view.MotionEvent;

import android.view.View;

 

public class SpriteFunGameView extends View {

 

Context context;

Sprite activeSprite;

 

List<Sprite> sprites = new LinkedList<Sprite>();

 

// canvas boundaries:

intcanvasWidth;

intcanvasHeight;

 

    public SpriteFunGameView(Context context, List<Sprite> sprites) {

        super(context);

        this.context = context;

        this.sprites = sprites;

   }

    

   @Override

   protected void onDraw(Canvas canvas) {

      super.onDraw(canvas);

      canvasWidth = getWidth();

      canvasHeight = getHeight();

      

  for (Sprite sprite : sprites) {

      sprite.draw(canvas);

  }

  }

   

   @Override

   public boolean onTouchEvent(MotionEvent event) {

  // tell android to repaint the canvas

  this.invalidate();

   

  // get the location of the touch:

  int xPos = (int)event.getX();

  int yPos = (int)event.getY();

   

  Log.v(“”, “x: “ + xPos);

  Log.v(“”, “y: “ + yPos);

   

  int action = event.getAction();

  if (action == MotionEvent.ACTION_DOWN) {

  Log.v(“”, “ACTION_DOWN”);

  activeSprite = null;

  for (Sprite sprite : sprites) {

  if(sprite.isInSprite(xPos, yPos)) {

  activeSprite = sprite;

  }

  }

  if(activeSprite == null) {

  activeSprite = new Sprite(context, xPos, yPos);

  sprites.add(activeSprite);

  }

  } else {

  Log.v(“”, “not ACTION_DOWN: “ + action);

  if(activeSprite != null) {

  activeSprite.setCenter(xPos, yPos);   

  }

  }

 

       returntrue;

}

   }

And here’s the Sprite.java class: 

package org.outerblogness.spritefun;

 

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.drawable.Drawable;

import android.util.Log;

 

public class Sprite {

 

Drawable myImage;

 

// image bounding rectangle:

intimageX;

intimageY;

intimageWidth;

intimageHeight;

 

public Sprite(Context context, int x, int y) {

        Resources res = context.getResources();

        myImage = res.getDrawable(R.drawable.greeny);

        setCenter(x, y);

        //imageWidth = myImage.getIntrinsicWidth();

        //imageHeight = myImage.getIntrinsicHeight();

        imageWidth = 144;

        imageHeight = 144;

}

 

protected boolean isInSprite(int x, int y) {

if(x < imageX) return false;

if(x > imageX + imageWidth) return false;

if(y < imageY) return false;

if(y > imageY + imageHeight) return false;

return true;

}

 

protected void draw(Canvas canvas) {

        myImage.setBounds(imageX, imageY, imageX + imageWidth,    imageY + imageHeight);

myImage.draw(canvas);      

    }

 

protected void setTopLeftCorner(int x, int y) {

imageX = x;

imageY = y;

}

 

protected void setCenter(int x, int y) {

imageX = x – (imageWidth/2);

imageY = y – (imageHeight/2);

}

}

And in the “res” folder in the project hierarchy in the left sidebar, create a new folder called “drawable”, copy into it the icon from one of the other “drawable” folders, and rename the copied image “greeny.png”.  For this first game, you don’t even need to create your own image — just use the default icon as the game character image.

My kids were immediately excited about the game and about making modifications!  They came up with lots of ideas of new features to add.  For example, they wanted an eraser that could be used to erase the androids, and they googled around and found a bunch of additional android icons of different colors to use, and requested a row of buttons to select the color.

Touch-screen programming is great for people who are just learning, because it’s conceptually very easy to use the coordinates of the user’s finger. It’s so much easier than old-fashioned keyboard-based navigation where you need a whole framework to navigate around selectable widgets and decide which one is highlighted, etc.  It was very easy to add a button implementation the kids could understand just by drawing the button on the screen and checking whether the touch event is in the button!

Here you can download the complete project (with the buttons and eraser): SpriteFun.zip

Note that each Android project has an additional “appcompat” project that is added by default (and needed by the program) — which I did not include in my zip file linked above. So I don’t think you can simply import my example.  Just create your own with the “new Android Application Project” with the wizard, and copy-paste the contents of the three classes into Java classes you create with the menu, and copy-paste the images from the res/drawable folder into your own res/drawable folder.

The project was a big success!  My kids started making their own modifications and their own games. After playing with this for a bit, my older son even went back and spontaneously made a new program with Scratch (which my kids had played with for a bit, but had gotten bored of).  And he’s working on a new update to his own mini version of “Plants vs. Zombies” right now!

« Minecraft Server automated backups and automatic restart (Linux)

Sprite Fun: updated! »