Week 5: Lab Overview
TABLE OF CONTENTS

Lab 5: Menu Systems With Multiple Activities (50 points)
Lab Overview
Scenario/Summary
In this lab, you will be adding functionality to your menu system. You will add a game that can be accessed from the main menu using a table layout.
Your project will include the following.
• Open-source .java files
• Zipped project file
Deliverables
The deliverable for this lab will be a zip file of your entire project workspace directory files.
Required Software
This lab will use the following Lab Resources.
• Android Studio
Use a personal copy of the software or to access the Lab Resources, go to the Lab Resources section of the Course Resources page.
Lab Steps
Step 1: User Interface and Styles
In this lab, we will be adding more to our application. Open up the Android application from last week. We added functionality to two of the buttons last week and we will add additional functionality this week.
Create a new basic activity by right-clicking on the App module and choosing New-> Activity-> BasicActivity, and name it TicTacToeActivity.
We will be creating a basic tic-tac-toe game with this activity. To create the user interface, we will use the table layout. Similar to the grid layout, the table layout uses rows and columns to organize widgets. The grid layout is actually the newer of the two types of tabular layouts. You can drag and drop table rows from the graphical editor to create your interface and view the XML. For convenience, we will just copy and paste the code into your content_tic_tac_toe.xml.
Downloadable XML File (Links to an external site.) as shown below

Add the following strings to your strings.xml.
Player X\’s turn
New Game

View the design using the graphical layout and you should see a grid of buttons.

Edit the TicTacToeActivity.java file.
This class will implement the OnClickListener. First we must add it to the imports. Add the following.
import android.view.View.OnClickListener;

Next, use the current class as the listener (add implements OnClickListener) to the class definition. Then implement the interface for the listener by coding the onClick method.
@Override
public void onClick(View v) {
}
We will add code to this later.
First, we will add several member variables to the class. One of these will create a two-dimensional array to handle the user buttons. Add these member variables right below the class definition.
private Button gameGrid[][] = new Button[3][3]; //2D array of buttons
private Button newGameButton;
private TextView messageTextView;

private int turn;
private String message;
private boolean gameOver;
private String gameString;
Next we will add style to our code before adding more functionality. Please watch the video below for details.
Adding Style

Transcript
Android apps use themes and styles built into the operating system or ones that are available from a support library. Styles are a collection of properties that apply to a widget and a theme is a collection of styles. The AndroidManifest.xml file specified the theme for the app. If your app extends the AppCompatActivity class, then you can only use the AppCompat themes available from the support libraries. To define styles, edit the styles.xml file in the res/values directory of the project.
It is best practice to create a separate colors.xml file to store colors. Edit the colors.xml file (if there is not one in your Android Studio, you can create a colors.xml in the res/values directory). Add the following new color. Within the body of a color element, use a hexadecimal value to specify an RGB value for the color. Feel free to use the RGB code below or choose your own color.
#0099FF Edit the styles.xml file and add the following code to create a style named TextView.

Finally, set this new style to the title on the main menu. Edit the content_main_menu.xml and add the style to the title widget.

When you run your program, you will notice the changes to your main screen.
Click image to enlarge

Next we will add functionality to our tic-tac-toe game.
Step 2: Adding Functionality
In the OnCreate function, add the following code that will populate the two-dimensional array and set the starting values for the game.
// get references to widgets
gameGrid[0][0] = (Button) findViewById(R.id.square1);
gameGrid[0][1] = (Button) findViewById(R.id.square2);
gameGrid[0][2] = (Button) findViewById(R.id.square3);
gameGrid[1][0] = (Button) findViewById(R.id.square4);
gameGrid[1][1] = (Button) findViewById(R.id.square5);
gameGrid[1][2] = (Button) findViewById(R.id.square6);
gameGrid[2][0] = (Button) findViewById(R.id.square7);
gameGrid[2][1] = (Button) findViewById(R.id.square8);
gameGrid[2][2] = (Button) findViewById(R.id.square9);
newGameButton = (Button) findViewById(R.id.newGameButton);
messageTextView = (TextView) findViewById(R.id.messageTextView);

// set event handlers
for (int x = 0; x < gameGrid.length; x++) {
for (int y = 0; y < gameGrid[x].length; y++) {
gameGrid[x][y].setOnClickListener(this);
}
}

newGameButton.setOnClickListener(this);
//clear grid with following for loop
for (int x = 0; x < gameGrid.length; x++) {
for (int y = 0; y < gameGrid[x].length; y++) {
gameGrid[x][y].setText(” “); // use a space for each square
}
}
//Set starting values
turn = 1;
gameOver = false;
message = “Player X’s turn”;
messageTextView.setText(message);
gameString = ” “; // 9 spaces (one for each square)
Go back to the OnClick method and add the following code to handle the buttons.
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.newGameButton:
//clear grid with following for loop
for (int x = 0; x < gameGrid.length; x++) {
for (int y = 0; y < gameGrid[x].length; y++) {
gameGrid[x][y].setText(” “); // use a space for each square
}
}
//set starting values
turn = 1;
gameOver = false;
message = “Player X’s turn”;
messageTextView.setText(message);
gameString = ” “; // 9 spaces (one for each square)
break;
default:
if (!gameOver) {
Button b = (Button) v;

if (b.getText().equals(” “))
{
if (turn % 2 != 0) {
b.setText(“X”);
message = “Player O’s turn”;
}
else {
b.setText(“O”);
message = “Player X’s turn”;
}

turn++;
checkForGameOver();
}
else {
message = “That square is taken. Try again.”;
}
}
messageTextView.setText(message);
}
}
Finally, we need to check if the game has finished. This code is complex and is testing every condition. Add the following helper function to the code.
private void checkForGameOver()
{
// Check for a match
// Rows
for (int x = 0; x < 3; x++) {
if (!gameGrid[x][0].getText().equals(” “) &&
gameGrid[x][0].getText().equals(gameGrid[x][1].getText()) &&
gameGrid[x][1].getText().equals(gameGrid[x][2].getText())
) {
message = gameGrid[x][0].getText() + ” wins!”;
gameOver = true;
return;
}
}

// Columns
for(int y = 0; y < 3; y++) {
if (!gameGrid[0][y].getText().equals(” “) &&
gameGrid[0][y].getText().equals(gameGrid[1][y].getText()) &&
gameGrid[1][y].getText().equals(gameGrid[2][y].getText())
) {
message = gameGrid[0][y].getText() + ” wins!”;
gameOver = true;
return;
}
}

// Diagonal 1
if(!gameGrid[0][0].getText().equals(” “) &&
gameGrid[0][0].getText().equals(gameGrid[1][1].getText()) &&
gameGrid[1][1].getText().equals(gameGrid[2][2])
) {
message = gameGrid[0][0].getText() + ” wins!”;
gameOver = true;
return;
}

// Diagonal 2
if(!gameGrid[2][0].getText().equals(” “) &&
gameGrid[2][0].getText().equals(gameGrid[1][1].getText()) &&
gameGrid[0][2].getText().equals(gameGrid[1][1].getText())
) {
message = gameGrid[2][0].getText() + ” wins!”;
gameOver = true;
return;
}

if (turn > 9) {
message = “It’s a tie!”;
gameOver = true;
return;
}

gameOver = false;
}
This is all the functionality for the tic-tac-toe game. Next, we need to set the main menu button so that when the user presses the Tic-Tac-Toe button, this game will show up. Using the skills you learned last week, edit the MainMenuActivity.java and create the goTicTacToe() helper function with the explicit intent. Then add the button listener to the onCreate method so that when the user presses btnTicTacToe, the game will open.
Test your game.
Click image to enlarge

Step 3: Submission
Save and zip your entire project workspace directory files (which must include all of your open-source files and your .apk file) with the name “LastName_FirstName_Lab5” and submit them.
Don’t forget to submit your lab.