Hangman Tutorial Lesson 7 – Drawing the Hangman

We have all the functionality to play hangman now, but the picture of a stick figure hangman is iconic to the game. So let’s add it in.

We are going to need a picture of each state that the hangman picture is going to be in. I’ve create the images already, and you can find them below:

ImageImageImageImageImageImageImage

Right click on each image and save it to your computer. The names of the files should be hangman0.png, hangman1.png, all the way up to hangman6.png.

We need to put these images in your res folder. The res folder has many different drawable folders for our images. You’ll see drawable- and then a suffix (ldpi, mdpi, hdpi, xhdpi). These represent screen densities. Depending on which device you are using and what the screen density is, Android will pick the appropriate folder to find the image in. That way, if your user has a really low density screen, Android can choose a really low resolution version of your image and avoid scaling (which can cause bluriness). You can learn more about these different folders here: http://developer.android.com/guide/practices/screens_support.html. We’re going keep things simple though and let Android scale the image as necessary. For this behavior, we need to place our images in the drawable folder. This folder doesn’t exist by default, so we have to create it.

Image

Place all the hangman images in this folder. Now go to the Graphical Layout, expand “Images & Media”, and click and drag ImageView onto the LinearLayout, right above txtPhrase.

Image

A dialog should open up to let you choose the image you want to use. You should see the hangman images. Select hangman0.

Image

Let’s change the Id of the ImageView to imgHangman. Also, the image is pretty large, so let’s adjust the size. Just grab one of the edges of the image and shrink it until it’s about the size in my screenshot.

Image

We want the picture to be in the middle, so let’s change the gravity on the LinearLayout. Select the LinearLayout, goto the properties window and click on the elipses on the gravity attribute, and check “center_horizontal”. You’ll also want to change txtPhrase’s gravity to center_horizontal too, so when the phrase wraps to 2 lines, the text is still centered.

Image

It makes more sense to put the wrongGuesses label right below the image, so let’s move it up one in the LinearLayout. Let’s move it this time using the Outline. Click and drag txtWrongGuesses to be in between imgHangman and txtPhrase.

Image

 

It should look like this now:

Image

Now we need to update the image when the user gets a wrong guess. Let’s go to the MainActivity file. We are going to update the updatePhrase() method to also update the image.

private void updatePhrase()
{
    TextView txtPhrase = (TextView)findViewById(R.id.txtPhrase);
    txtPhrase.setText(hangmanPhrase.getDisplayString());
    
    TextView txtWrongGuesses = (TextView)findViewById(R.id.txtWrongGuesses);
    txtWrongGuesses.setText(wrongGuesses + " wrong guesses");
    
    ImageView imgHangman = (ImageView)findViewById(R.id.imgHangman);
    switch (wrongGuesses)
    {
        case 0: imgHangman.setImageResource(R.drawable.hangman0); break;
        case 1: imgHangman.setImageResource(R.drawable.hangman1); break;
        case 2: imgHangman.setImageResource(R.drawable.hangman2); break;
        case 3: imgHangman.setImageResource(R.drawable.hangman3); break;
        case 4: imgHangman.setImageResource(R.drawable.hangman4); break;
        case 5: imgHangman.setImageResource(R.drawable.hangman5); break;
        case 6: imgHangman.setImageResource(R.drawable.hangman6); break;
    }
    imgHangman.refreshDrawableState();
}

We first get a reference to the ImageView. Then based on how many wrongGuesses we have, we set the imageSource to the correct image. At the end, we have to call refreshDrawableState so that the image refreshes.

Let’s deploy and see what it looks like.

device-2014-03-29-141715

 

We’re running out of screen space, so let’s move the Next button to be on the same row as the hangman image. We would still like the image to be in the center, so this makes that layout tricky. To accomplish this, we’re going to use a RelativeLayout. Go ahead and drag a RelativeLayout onto your LinearLayout.

2014-03-29 14_20_26-Java - Hangman_res_layout_main.xml - Eclipse

Then inside the Outline window, move the imgHangman and btnNext into the RelativeLayout (select both and drag it onto the RelativeLayout).

2014-03-29 14_25_08-Java - Hangman_res_layout_main.xml - Eclipse

 

When working with a RelativeLayout, it’s easiest to just drag and drop things where you want on the Preview screen. Click on btnNext and drag it to the top right, so that it locks to the top and right (you’ll see a tooltip popup that says alignParentRight=true and alignParentTop=true).

2014-03-29 14_26_12-Java - Hangman_res_layout_main.xml - Eclipse

Now click on the image and drag it to the middle so that it locks to the center. It should say centerHorizontal=true and alignParentTop=true.

2014-03-29 14_27_20-Java - Hangman_res_layout_main.xml - Eclipse

 

Lastly, let’s put a little padding between the phrase and the letter buttons so that they are not so squished together. In the Outline window, select txtPhrase, go to the properties window and select Padding Bottom and enter 16dp (density pixels). It should now look something like this:

device-2014-03-29-143322

 

We have a fully functional application! However, there are a few more things I’d like to work on. First of all, it would be nice if each phrase had a hint (Person, Food, Place, etc) to make it a little easier. Of course, we would want to optionally turn the hint on or off. Also, we still need to set out own custom icon. In the next lesson we’ll work on these things.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s