cs.gettysburg.educs.gettysburg.edu/~tneller/resources/android/android pig...  · web viewandroid...

24
Android Pig Development Tutorial Todd Neller, Gettysburg College, October 12 th , 2016 Before we begin developing, we first introduce the game we’ll be developing. 1 The game of Pig 2 is a simple jeopardy dice game that excels as a teaching tool because it has very simple rules while still being fun to play. It thus has a high fun-to-SLOC (Source Lines Of Code) ratio. We can state the rules in two sentences: The first player to score 100 or more points wins. On a player’s turn, the player rolls the die as many times as desired until either (1) the player “holds” (i.e. chooses to stop rolling) and scores the sum of the rolls, or (2) the player rolls a 1 (“pig”) and scores nothing that turn. For example, suppose Ann has 20 points. Ann rolls a 6 and has a turn total of 6 points. Ann can either hold, score 6 points, and end the turn with 20 + 6 = 26 points, or Ann can keep rolling. Ann rolls a 2, and can either hold, scoring 6 + 2 = 8 points (bringing her score to 28), or can keep rolling. Ann chooses to roll again, and rolls a 1 (“pig”), so she scores no points for the turn, but still retains her 20 points from previous turn(s). Her turn is now over. The key pieces of information for decision-making in the game are the player’s scores and the current turn total. At any time, the decision is whether the current player wishes to roll or hold. This makes for a very simple game implementation exercise that allows us to become familiar with labels (for game information), images (for displaying the die), and buttons (for choosing to roll/hold). Now we turn our attention to developing Pig. The following tutorial assumes one is using Eclipse with the Android SDK already installed 1 http://cs.gettysburg.edu/~tneller/resources/pig/cs1/gui.html 2 http://cs.gettysburg.edu/projects/pig/

Upload: vonguyet

Post on 14-Mar-2019

220 views

Category:

Documents


0 download

TRANSCRIPT

Android Pig Development TutorialTodd Neller, Gettysburg College, October 12th, 2016

Before we begin developing, we first introduce the game we’ll be developing.1 The game of Pig2 is a simple jeopardy dice game that excels as a teaching tool because it has very simple rules while still being fun to play. It thus has a high fun-to-SLOC (Source Lines Of Code) ratio. We can state the rules in two sentences:

The first player to score 100 or more points wins. On a player’s turn, the player rolls the die as many times as desired until either (1) the player “holds” (i.e. chooses to stop rolling) and scores the sum of the rolls, or (2) the player rolls a 1 (“pig”) and scores nothing that turn.

For example, suppose Ann has 20 points. Ann rolls a 6 and has a turn total of 6 points. Ann can either hold, score 6 points, and end the turn with 20 + 6 = 26 points, or Ann can keep rolling. Ann rolls a 2, and can either hold, scoring 6 + 2 = 8 points (bringing her score to 28), or can keep rolling. Ann chooses to roll again, and rolls a 1 (“pig”), so she scores no points for the turn, but still retains her 20 points from previous turn(s). Her turn is now over.

The key pieces of information for decision-making in the game are the player’s scores and the current turn total. At any time, the decision is whether the current player wishes to roll or hold. This makes for a very simple game implementation exercise that allows us to become familiar with labels (for game information), images (for displaying the die), and buttons (for choosing to roll/hold). Now we turn our attention to developing Pig. The following tutorial assumes one is using Eclipse with the Android SDK already installed (http://developer.android.com/sdk/installing.html). It also assumes that one regularly updates the packages imported using the handy control-shift-o feature of Eclipse.

On our system, one specifies the location of the Android SDK via Window Preferences Android, setting the path to “/usr/local/android-sdk-linux/”.

In Eclipse, we need to first create a new Android Virtual Device (AVD) for emulation of your program.

Window AVD Manager New… Name: AVD (can name this anything intuitive to you) Target: API Level 22 (or 23) Click “Create AVD”. Close Android AVD Manager window.

1 http://cs.gettysburg.edu/~tneller/resources/pig/cs1/gui.html

2 http://cs.gettysburg.edu/projects/pig/

Or you can Clone a device from the Device Definitions tab. The important thing is to select one that is API level 22 or 23. Next, we create a new Android project that starts with a sort of “Hello, world!” do-nothing app skeleton.

File New Android Application Project Call application name “Pig”, the project “Android Pig”, and the package name

“edu.gettysburg.pig”. Select the Minimum Required SDK to be “API 22: Android 5.1.1”, and the Target SDK to be “API 23: Android 6.0”

Click the “Next>” button 4 times, and click the “Finish” button.

Open your new Android Pig project in the package explorer and poke around in the subfolders. Note:

In src (source files) edu.gettysburg.pig is the main Java file you’ll be programming: MainActivity.java

In res (resource files) drawable is where you will place image files. (You’ll need to create this. All other drawable folders are for specific DPI ranges.)

In res layout main.xml is the XML (eXtensible Markup Language) file defining the main layout for your app.

In res values strings.xml is the XML file defining the strings used in your app.

For now, open MainActivity.java and click the run button. Run it as an “Android Applicaton”. The emulator will take a long time to start, but unless you close it or get it into a funky state, you’ll not need to restart it between debugging runs. Control-<Window>-F113 toggles the orientation between portrait and landscape. The “Hello World!” app runs automatically in the emulator window.

As a first step towards creating an app, we need to populate it with resources,

Create a res/drawable subdirectory in your project. Copy the provided Pig app image files4 into the res/drawable subdirectory of your project. Press F5 to refresh your project contents and show that the files are in place.

Next, open res/values/strings.xml. Note the bottom tabs that allow you to toggle between a form-based editor, and direct editing of XML. We’ll use the form editor and then see the generated XML. “Add…” the following elements types with resource names and values:

Resource Type

Name Value

String your_score Your Score:String my_score My Score:String turn_total Turn Total:String roll RollString hold HoldString zero 0

3 On some systems, this will be Control-Alt-F11 or just simply Control-F11.4 http://cs.gettysburg.edu/~tneller/resources/pig/cs1/images/png/

Color black #000000Color white #ffffff

Now choose the strings.xml lower tab and change the app_name and title_activity_main to “Pig”. It should look something like this:

<resources> <string name="app_name">Android Pig 2012</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">Pig</string> <string name="your_score">Your Score:</string> <string name="my_score">My Score:</string> <string name="turn_total">Turn Total:</string> <string name="roll">Roll</string> <string name="hold">Hold</string> <string name="zero">0</string> <color name="black">#000000</color> <color name="white">#ffffff</color></resources> Why not just use the Strings in the app program? The reason for such basic specification of resources is that it makes internationalization easier. All we need to do in order to create a version for another language is to create a resource subdirectory with a language code (e.g. res/values-es/ for Spanish), and reuse the XML with the same names but with translated values. Similarly, we can specify different images for different resolutions by having different image subdirectories. It’s beyond the scope of this tutorial, but it’s motivating and good to know.

Next, we create a layout to hold these elements. Open res/layout/activity_main.xml. Here too we can toggle between a graphical editor and direct XML specification. If something seems awry in the graphical editor, look at the generated XML and it’s outline form to the right to see what has happened.

We’d like to create a layout that looks like this:

NOTE: At time of writing, the Graphical Layout pane is not faithfully representing the layout as shown in the images of this document. One must run and test the app to see its true appearance. Thus, we’ll rely heavily on the Outline pane to do the bulk of our editing. The direct xml editing pane is also helpful for clarifying details.

In the Outline pane, right-click and “Remove” the RelativeLayout to start fresh. From the Graphical Layout pane, drag a Layouts LinearLayout (Vertical) element into the center of the Graphical pane.5

Next, we’ll drag three elements from the Graphical Layout pane into the LinearLayout element of the Outline pane:

Layouts TableLayout Images & Media ImageView (Choose the “roll” image if prompted.) Layouts TableLayout

Place each at the bottom of previous elements.

Next select the tableLayout1 element from the Outline pane and notice how it expands and highlights in the Graphical Layout window in the center. If there are not already TableRows in each table layout, drag three Layout TableRow elements to the first TableLayout, and one more to the second, such that they appear approximately as below:

Delete any extra unwanted TableRow elements. Next, we’ll add two Form Widgets TextView elements to each of the first three table rows. Also, we’ll add two Form Widgets Button elements to the bottom fourth table row. The Outline should now look approximately like this:

5 NOTE: In our installation this defaults to the creation of a LinearLayout (Horizontal)! Click the “Set Vertical Orientation” button in the upper-left of the Graphical Layout pane to correct this.

For now, don’t worry if the names don’t match those shown here. The Graphical Layout pane should look something like this:

Next, it would be nice to center these elements and expand table row elements to fill the width of the screen. Now that we have the elements in place, we’ll see what changing some of their Properties can do. By right-clicking on an element in the Graphical Layout or Outline panes, we can choose “Properties”. For example, in the Outline Layout, right-click the top-level LinearLayout, choose Other Properties Inherited from View Background… Color “black”. This “black” is the color we defined in strings.xml.

Next, to make sure the TextView labels are legible, select all of them by clicking one in the Outline panes, and Control-clicking the rest. Then, right-click on one and select Edit TextColor… and set it to “white”. Note that the property changes could also be made through the lower-right Properties pane.

Select all 6 TextView and 2 Button elements in the Outline window by Control-clicking each. Then right-click, choose Other Properties Layout Parameters Layout Weight…, and enter the number 1.

To Center the image, select the ImageView, Other Properties Layout Parameters Layout Gravity Center.

Select all three left column TextView elements, and choose Other Properties Defined by TextView Layout Gravity Right. We want to have spacing between the left and right TextView elements, so with the same three, choose Other Properties Inherited from View PaddingRight…, and enter “4pt”. At this point, your Graphical Layout should look something like this:

Finally, it’s time to change element names for more intuitive programming, and fill each with the resources we’ve defined. Here is a list of the changes you’ll now make to each:

textView1: Edit Text… your_score textView3: Edit Text… my_score textView5: Edit Text… turn_total textView2: Edit Text… zero, Edit ID… textViewYourScore textView4: Edit Text… zero, Edit ID… textViewMyScore textView6: Edit Text… zero, Edit ID… textViewTurnTotal imageView1: Properties src… drawable roll, Edit ID… imageView button1: Edit Text… roll, Edit ID… buttonRoll button2: Edit Text… hold, Edit ID… buttonHold

Finally, select all elements in the Outline window, right-click and choose Layout Width Fill Parent. This will affect 13 out of the 16 elements.

Now, your Graphical Layout and Outline should look like this:

And the main.xml should look something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/black" android:orientation="vertical" >

<TableLayout android:id="@+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<TextView android:id="@+id/textView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_weight="1" android:gravity="right" android:paddingRight="4pt" android:text="@string/your_score" android:textColor="@color/white" />

<TextView android:id="@+id/textViewYourScore" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/zero" android:textColor="@color/white" /> </TableRow>

<TableRow android:id="@+id/tableRow2" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<TextView android:id="@+id/textView3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_weight="1" android:gravity="right" android:paddingRight="4pt" android:text="@string/my_score" android:textColor="@color/white" />

<TextView android:id="@+id/textViewMyScore" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/zero" android:textColor="@color/white" /> </TableRow>

<TableRow android:id="@+id/tableRow3" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<TextView android:id="@+id/textView5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_weight="1" android:gravity="right" android:paddingRight="4pt" android:text="@string/turn_total" android:textColor="@color/white" />

<TextView android:id="@+id/textViewTurnTotal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/zero" android:textColor="@color/white" /> </TableRow> </TableLayout>

<ImageView android:id="@+id/imageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/roll" />

<TableLayout android:id="@+id/tableLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<TableRow android:id="@+id/tableRow4" android:layout_width="fill_parent" android:layout_height="wrap_content" >

<Button android:id="@+id/buttonRoll" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/roll" />

<Button android:id="@+id/buttonHold" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/hold" /> </TableRow> </TableLayout>

</LinearLayout>

One can make many improvements to this layout, but this suffices for our demonstration purposes. Do a test run to see that all looks good in emulation. Now that we’ve laid the groundwork, let’s turn our attention to the code that gives life to the interface. We’ll approach the project in stages:

1. Define variables and bind them to resources and GUI elements.2. Set up means to update our TextView labels and ImageView image, testing it with a simple

behavior: die rolling with appropriate turn total updates. 3. Add a hold action that adds the turn total to the current player’s score, and resets the turn total

to zero4. Add a turn changing behavior that changes the current player.

5. Introduce a computer player, disabling buttons when the computer is playing, and showing how one can interact with the GUI thread from another thread.

6. Detect when a player wins, report the win, and ask the user whether to play again or not. 7. Show how to store and restore state during interruptions to the app, e.g. when the display

orientation changes.

First, add the following fields to the MainActivity class. These set up constants, variables for game state, and references to GUI elements and resources.

// COMPUTER_DELAY - delay between computer rolls in millisecondsprotected static final long COMPUTER_DELAY = 1000; // GOAL_SCORE - goal score at or above which the holding player winsprivate static final int GOAL_SCORE = 100; // Game state variables: private int userScore = 0, computerScore = 0, turnTotal = 0; // userStartGame - whether or not the user starts the current game private boolean userStartGame = true; // isUserTurn - whether or not it is currently the user's turnprivate boolean isUserTurn = true; // imageName - name of the current displayed imageprivate String imageName = "roll";

// GUI viewsprivate TextView textViewYourScore, textViewMyScore, textViewTurnTotal;private ImageView imageView;// GUI buttonsprivate Button buttonRoll, buttonHold;

// mapping from image strings to Drawable resourcesprivate HashMap<String, Drawable> drawableMap = new HashMap<String, Drawable>(); // random - random number generator for rolling diceprivate Random random;

Next, we initialize these in the onCreate method, adding the following lines within the default implementation:

textViewYourScore = (TextView) findViewById(R.id.textViewYourScore);textViewMyScore = (TextView) findViewById(R.id.textViewMyScore);textViewTurnTotal = (TextView) findViewById(R.id.textViewTurnTotal);buttonRoll = (Button) findViewById(R.id.buttonRoll);buttonHold = (Button) findViewById(R.id.buttonHold);imageView = (ImageView) findViewById(R.id.imageView);drawableMap.put("roll", getDrawable(R.drawable.roll));drawableMap.put("hold", getDrawable(R.drawable.hold));drawableMap.put("die1", getDrawable(R.drawable.die1));drawableMap.put("die2", getDrawable(R.drawable.die2));drawableMap.put("die3", getDrawable(R.drawable.die3));drawableMap.put("die4", getDrawable(R.drawable.die4));drawableMap.put("die5", getDrawable(R.drawable.die5));drawableMap.put("die6", getDrawable(R.drawable.die6));random = new Random();

When we want to get a reference to a GUI element, we use findViewById and find the element using a constant named by the GUI element ID we defined within a class called R. For example, we get our roll button using findViewById(R.id.buttonRoll), which then must be cast to a Button. The resource class R you see used frequently is auto-generated from our XML specifications. R.java should never be edited directly. To get Drawable image resources, we use: getDrawable(R.drawable.<insert ID here>).

The hash map drawableMap is set up to allow convenient reference to our images by mapping simple strings to the associated Drawable resources we retrieve. Think of this as being like an array of Drawable resource indexed by Strings. Finally, we create our random number generator.

It would be easy to update a score variable and forget to change the corresponding label (or vice versa), so it’s often good practice to create methods to perform such changes at the same time, keeping information consistent. We will now create such methods to update our views. Add the following methods:

private void setUserScore(final int newScore) {userScore = newScore;textViewYourScore.setText(String.valueOf(newScore));

}

private void setComputerScore(final int newScore) {computerScore = newScore;textViewMyScore.setText(String.valueOf(newScore));

}

private void setTurnTotal(final int newTotal) {turnTotal = newTotal;textViewTurnTotal.setText(String.valueOf(newTotal));

}

private void setImage(final String newImageName) {imageName = newImageName;imageView.setImageDrawable(drawableMap.get(imageName));

}

Each of these takes a piece of information about the state of the game or current image, stores it in the relevant field, and causes the GUI view we reference to update accordingly. Note that we need to convert the integers to text with String.valueOf, and we use the drawableMap to easily retrieve a specified image.

To test this, we need to add our first simple user interaction. Add the following code to the end of method onCreate in order to cause a click of our roll and hold buttons to call methods roll() and hold() , respectively:

buttonRoll.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {

roll();}

});buttonHold.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {hold();

}});

Accordingly, create private roll and hold methods:

private void roll() {}

private void hold() {}

In hold, we wish to first take the simple step of rolling a die and changing the image of the associated die. We can do so as follows:

private void roll() {int roll = random.nextInt(6) + 1;setImage("die" + roll);

}

Test it. Now, let’s update the turn total, setting it to 0 when the roll is a 1, and accumulating the roll to the turn total otherwise:

private void roll() {int roll = random.nextInt(6) + 1;setImage("die" + roll);if (roll == 1) {

setTurnTotal(0);}else {

setTurnTotal(turnTotal + roll);}

}

Test. For the hold method, we want to set the image to the “hold” image, accumulate the turn total to the current player’s score and reset the turn total to 0:

private void hold() {setImage("hold");if (isUserTurn)

setUserScore(userScore + turnTotal);else

setComputerScore(computerScore + turnTotal);setTurnTotal(0);

}

Test. At this point, we want to add the ability to change whose turn it is. For this, we add a new method, changeTurn() and call it at the appropriate points in roll() and hold().

private void roll() {int roll = random.nextInt(6) + 1;setImage("die" + roll);if (roll == 1) {

setTurnTotal(0);changeTurn();

}else {

setTurnTotal(turnTotal + roll);}

}

private void hold() {setImage("hold");if (isUserTurn)

setUserScore(userScore + turnTotal);else

setComputerScore(computerScore + turnTotal);setTurnTotal(0);changeTurn();

}

private void changeTurn() {isUserTurn = !isUserTurn;

}

Test. We next wish to add a computer player. The strategy this computer player will follow was devised by the author and Clif Presser and is called the “Keep Pace and End Race” strategy6. While not optimal, it is within 1% of optimal performance and makes for a challenging computer player. The strategy is as follows:

If the player can hold and win, hold. Otherwise, if either player has a score 71 or higher, keep rolling until the goal is reached. Otherwise, subtract the player’s score from the opponent’s score, divide by 8, round to the

nearest integer, add 21, and use the result as the turn total at or above which the player should hold.

To implement this, we need to create a separate thread of execution, where the computer delays between decisions, allowing the human opponent to follow the computer’s turn progress. (We also want to disable the buttons during the computer turn, but we’ll do this later.) However, we must be careful when calling methods on the GUI thread from another thread. If we try to interact directly with the GUI from another thread of execution, it will result in an application crash. Below, we can see the great care that must be taken to queue-up method calls for the GUI thread in a way that is thread-safe. Observe and imitate the patterns here:

private void computerTurn() {new Thread(new Runnable() {

public void run() {Thread.yield();try { Thread.sleep(COMPUTER_DELAY); } catch (InterruptedException e) { e.printStackTrace(); }while (!isUserTurn) {

int holdValue = 21 + (int) Math.round((userScore - computerScore)/8.0);if (!(computerScore + turnTotal >= GOAL_SCORE) &&

(userScore >= 71 || computerScore >= 71 || turnTotal < holdValue))runOnUiThread(new Runnable() {public void run() {roll();}});

else {runOnUiThread(new Runnable() {public void run() {hold();}});break;

}Thread.yield();try { Thread.sleep(COMPUTER_DELAY); } catch (InterruptedException e) { e.printStackTrace(); }

}

6 Practical Play of the Dice Game Pig, The UMAP Journal 31(1) (2010), pp. 5-19.

}}).start();

}

In addition to common use of Java Threads (beyond the score of this tutorial), especially note the use of the runOnUiThread method, which queues-up a Runnable object that the GUI thread itself will invoke when it is safe to invoke. We would naturally invoke this computerTurn method in the changeTurn method:

private void changeTurn() {isUserTurn = !isUserTurn;if (!isUserTurn)

computerTurn();}

Test. Naturally, we’d like to make it so that the user can’t click the buttons and interfere with the computer’s turn. First, we create a method setButtonsState that makes sure that buttons are enabled or disabled according to which player is currently playing:

private void setButtonsState() {buttonHold.setEnabled(isUserTurn);buttonRoll.setEnabled(isUserTurn);

}

Further, we call this in the changeTurn method:

private void changeTurn() {isUserTurn = !isUserTurn;setButtonsState();if (!isUserTurn)

computerTurn();}

Test. Next, we would like to detect a game winning condition, and create a popup window that announces the win and asks the player whether or not another game is desired. If so, the starting player changes, and the game is reset to initial conditions. If not, the app exits. This is accomplished in the following endGame method:

private void endGame() {String message = (!isUserTurn)

? String.format("I win %d to %d.", computerScore, userScore): String.format("You win %d to %d.", userScore, computerScore);

message += " Would you like to play again?";AlertDialog.Builder builder = new AlertDialog.Builder(this);builder.setMessage(message) .setCancelable(false) .setPositiveButton("New Game", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { setUserScore(0); setComputerScore(0); setTurnTotal(0); userStartGame = !userStartGame; isUserTurn = userStartGame; setButtonsState(); if (isUserTurn)

setImage("roll"); else computerTurn(); dialog.cancel(); } }) .setNegativeButton("Quit", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { MainActivity.this.finish(); } });AlertDialog alert = builder.create();alert.show();

}

There is a lot going on here. In the first lines, we build up the message using String formatting and the Java selection operator – just standard Java with no Android particulars. Everything else is based on the particulars of Android’s AlertDialog class. The AlertDialog.Builder allows a chain of method calls where it returns itself each time for further modification. We set the message, disable cancellation of the dialog, and set up the behaviors of the positive and negative answer buttons, which we label “New Game” and “Quit”, respectively.

The positive “New Game” button, when clicked, causes the game state to be reset, the starting player to change, the current player to be set to the starting player, button states to be updated, the image reset or the computer player set in motion as appropriate, and the popup dialog to close.

The negative “Quit” button simply terminates the app. Now that the popup alert dialog has been specified, it is created, and we show it.

We test for the end game condition in the hold method:

private void hold() {setImage("hold");if (isUserTurn)

setUserScore(userScore + turnTotal);else

setComputerScore(computerScore + turnTotal);setTurnTotal(0);if (userScore >= GOAL_SCORE || computerScore >= GOAL_SCORE)

endGame();else

changeTurn();}

To test the game ending condition easily, I recommend temporarily changing GOAL_SCORE to 20. Do so, and test your app to make sure it functions correctly. Then change it back to 100.

We now reach the last stage, where we equip our app to gracefully handle interruptions. A simple example of an interruption to execution occurs when the Android phone is rotated and the screen orientation changes. You can do this in emulation by typing control-F11. Try playing a game for a bit until there’s a score, and then type control-F11.

This causes the app to completely reinitialize. If we want to regain our previous state, then we need to save it in what is called the app Bundle. Now one can see that all of the state variables have an additional purpose: to store and restore an app’s state.

To store out an app’s state when interrupted by a call, reorientation, etc., we need to add an onSaveInstanceState method like the following:

protected void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);outState.putInt("userScore", userScore);outState.putInt("computerScore", computerScore);outState.putInt("turnTotal", turnTotal);outState.putBoolean("userStartGame", userStartGame);outState.putBoolean("isUserTurn", isUserTurn);outState.putString("imageName", imageName);

}

Each essential pieces of information is stored in a Bundle object. We give them arbitrary labels. Labels that match the corresponding variables are intuitive choices. Next, we add an onRestoreInstanceState method that does the reverse and sets in motion what was previously happening:

protected void onRestoreInstanceState(Bundle savedInstanceState) {super.onRestoreInstanceState(savedInstanceState);setUserScore(savedInstanceState.getInt("userScore", 0));setComputerScore(savedInstanceState.getInt("computerScore", 0));setTurnTotal(savedInstanceState.getInt("turnTotal", 0));setImage(savedInstanceState.getString("imageName"));userStartGame = savedInstanceState.getBoolean("userStartGame", true);isUserTurn = savedInstanceState.getBoolean("isUserTurn", true);setButtonsState();if (userScore >= GOAL_SCORE || computerScore >= GOAL_SCORE)

endGame();else if (!isUserTurn)

computerTurn();}

Note a few important things here: The getInt and getBoolean methods include default values. Also, note that we have to think through every possible case in the last lines. Are the buttons enabled/disabled? Was there a game end popup at the time? Is it currently the computer’s turn, such that I need to restart that thread?

Coding an app takes care, good coding discipline, and the building of good habits. You’ll find some things easier/harder than expected. Constraints will force you to change your style of programming. For example, use of threads is very important to ensure that the app is always responsive to user input. Even a fraction of a second where a button press is being ignored causes Android to force close an app. Immediate responsiveness is key, and that dictates a different style of coding.

At this point, we’ve reach the goal and your code should look something like this:

package edu.gettysburg.pig;

import java.util.HashMap;import java.util.Random;import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInterface;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.ImageView;import android.widget.TextView;

public class MainActivity extends Activity {// COMPUTER_DELAY - delay between computer rolls in millisecondsprotected static final long COMPUTER_DELAY = 1000; // GOAL_SCORE - goal score at or above which the holding player winsprivate static final int GOAL_SCORE = 100; // Game state variables: private int userScore = 0, computerScore = 0, turnTotal = 0; // userStartGame - whether or not the user starts the current game private boolean userStartGame = true; // isUserTurn - whether or not it is currently the user's turnprivate boolean isUserTurn = true; // imageName - name of the current displayed imageprivate String imageName = "roll";

// GUI viewsprivate TextView textViewYourScore, textViewMyScore, textViewTurnTotal;private ImageView imageView;// GUI buttonsprivate Button buttonRoll, buttonHold;

// mapping from image strings to Drawable resourcesprivate HashMap<String, Drawable> drawableMap = new HashMap<String, Drawable>(); // random - random number generator for rolling diceprivate Random random;

/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

textViewYourScore = (TextView) findViewById(R.id.textViewYourScore);textViewMyScore = (TextView) findViewById(R.id.textViewMyScore);textViewTurnTotal = (TextView) findViewById(R.id.textViewTurnTotal);buttonRoll = (Button) findViewById(R.id.buttonRoll);buttonHold = (Button) findViewById(R.id.buttonHold);imageView = (ImageView) findViewById(R.id.imageView);drawableMap.put("roll", getResources().getDrawable(R.drawable.roll));drawableMap.put("hold", getResources().getDrawable(R.drawable.hold));drawableMap.put("die1", getResources().getDrawable(R.drawable.die1));drawableMap.put("die2", getResources().getDrawable(R.drawable.die2));drawableMap.put("die3", getResources().getDrawable(R.drawable.die3));drawableMap.put("die4", getResources().getDrawable(R.drawable.die4));drawableMap.put("die5", getResources().getDrawable(R.drawable.die5));drawableMap.put("die6", getResources().getDrawable(R.drawable.die6));random = new Random();buttonRoll.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {roll();

}});buttonHold.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {hold();

}});

}

private void setUserScore(final int newScore) {

userScore = newScore;textViewYourScore.setText(String.valueOf(newScore));

}

private void setComputerScore(final int newScore) {computerScore = newScore;textViewMyScore.setText(String.valueOf(newScore));

}

private void setTurnTotal(final int newTotal) {turnTotal = newTotal;textViewTurnTotal.setText(String.valueOf(newTotal));

}

private void setImage(final String newImageName) {imageName = newImageName;imageView.setImageDrawable(drawableMap.get(imageName));

}

private void roll() {

int roll = random.nextInt(6) + 1;setImage("die" + roll);if (roll == 1) {

setTurnTotal(0);changeTurn();

}else {

setTurnTotal(turnTotal + roll);}

}

private void hold() {setImage("hold");if (isUserTurn)

setUserScore(userScore + turnTotal);else

setComputerScore(computerScore + turnTotal);setTurnTotal(0);if (userScore >= GOAL_SCORE || computerScore >= GOAL_SCORE)

endGame();else

changeTurn();}

private void changeTurn() {isUserTurn = !isUserTurn;setButtonsState();if (!isUserTurn)

computerTurn();}

private void computerTurn() {new Thread(new Runnable() {

public void run() {Thread.yield();try { Thread.sleep(COMPUTER_DELAY); } catch (InterruptedException e) { e.printStackTrace(); }while (!isUserTurn) {

int holdValue = 21 + (int) Math.round((userScore - computerScore)/8.0);if (!(computerScore + turnTotal >= GOAL_SCORE) &&

(userScore >= 71 || computerScore >= 71 || turnTotal < holdValue))runOnUiThread(new Runnable() {public void run() {roll();}});

else {runOnUiThread(new Runnable() {public void run() {hold();}});break;

}Thread.yield();

try { Thread.sleep(COMPUTER_DELAY); } catch (InterruptedException e) { e.printStackTrace(); }

}}

}).start();}

private void setButtonsState() {buttonHold.setEnabled(isUserTurn);buttonRoll.setEnabled(isUserTurn);

}

private void endGame() {String message = (!isUserTurn)

? String.format("I win %d to %d.", computerScore, userScore): String.format("You win %d to %d.", userScore, computerScore);

message += " Would you like to play again?";AlertDialog.Builder builder = new AlertDialog.Builder(this);builder.setMessage(message) .setCancelable(false) .setPositiveButton("New Game", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { setUserScore(0); setComputerScore(0); setTurnTotal(0); userStartGame = !userStartGame; isUserTurn = userStartGame; setButtonsState(); if (isUserTurn) setImage("roll"); else computerTurn(); dialog.cancel(); } }) .setNegativeButton("Quit", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { MainActivity.this.finish(); } });AlertDialog alert = builder.create();alert.show();

}

protected void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);outState.putInt("userScore", userScore);outState.putInt("computerScore", computerScore);outState.putInt("turnTotal", turnTotal);outState.putBoolean("userStartGame", userStartGame);outState.putBoolean("isUserTurn", isUserTurn);outState.putString("imageName", imageName);

}

protected void onRestoreInstanceState(Bundle savedInstanceState) {super.onRestoreInstanceState(savedInstanceState);setUserScore(savedInstanceState.getInt("userScore", 0));setComputerScore(savedInstanceState.getInt("computerScore", 0));setTurnTotal(savedInstanceState.getInt("turnTotal", 0));setImage(savedInstanceState.getString("imageName"));userStartGame = savedInstanceState.getBoolean("userStartGame", true);isUserTurn = savedInstanceState.getBoolean("isUserTurn", true);setButtonsState();if (userScore >= GOAL_SCORE || computerScore >= GOAL_SCORE)

endGame();else if (!isUserTurn)

computerTurn();}

}

Again, there are many possible improvements. This is just a beginning. Here are some ways you can improve upon and personalize this app:

Experiment with the layout. Larger font sizes, greater button separation, and good use of the entire screen would be some considerations.

Add sound and/or animation. At this stage, our silent app can be confusing when adjacent roll results are the same. “Hmm. The image didn’t change. Did my button press register?” This is especially noticeable when the computer player immediately rolls a 1 after the user. Sounds and animations can help a user better sense when an action has taken place.

Allow the user to change the computer delay, thus changing the pace of the game. Collect and display win/loss statistics. Allow selection of various computer players. Implement optimal 2-player play, possibly using it to critique and train the user to play Pig

excellently. Expand the game to multiple players, possibly incorporating networked play.

As one can see, this app provides a good beginning point from which to launch into further learning. Enjoy!

Next steps:

The Android SDK includes many example apps illustrating commonly used features. Other Android tutorials/courses are available at

http://code.google.com/edu/android/index.html