Yes, I know not the best UI but it was my first completed android app, so am going to be flaunting myself a bit. I would run you through my app code, less I forget I had help from codinginflow you can check him out here coding in flow, he has great tutorials I tell you.
Back to my tic tac toe app i am going to be explaining the code of my app from top to bottom, let's begin, shall we?
From the design view above nine buttons were created, the layout weight was used to distribute the buttons across the screen as shown in the code below.
That's it with the UI, now to the logic of the application the following variables were created to enable the application work properly as shown in the code snippet below there are as follows;
roundCount: This is an integer variable to count the number of play in order to declare a win or indicate a draw
buttons: This represents the nine buttons created earlier
player1Points: Integer variable to calculate the first player's points
player2Points: Integer variable to calculate the second player's points
textViewPlayer1: Text view to display the first player's points
textViewPlayer2: Text view to display the second player's points
playerOneTurn: This is a boolean variable and is set to true in order to allow the game to start
private Button[][] buttons = new Button[3][3];
private boolean playerOneTurn = true;
private int roundCount;
private int player1Points;
private int player2Points;
private TextView textViewPlayer1;
private TextView textViewPlayer2;
From the game UI shown at the start of the article, you notice a reset button, here an on-click listener was set to the button and given a method called resetGame(from the name it would reset the game, i would explain the logic later)
Button buttonReset = findViewById(R.id.button_reset);
buttonReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
resetGame();
}
});
Also, an on-click listener was set for the nine buttons created earlier with this code snippet, making use of the id given to the buttons in the XML file of the activity.
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
String buttonID = "button_" + i + j;
int resID = getResources().getIdentifier(buttonID, "id", getPackageName());
buttons[i][j] = findViewById(resID);
buttons[i][j].setOnClickListener(this);
}
}
In the code below, notice the naming convention of the button id's it follows a two-dimensional array pattern, using the naming convention on-click listeners were attached to the buttons with the code snippet above.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="@+id/button_00"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_01"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_02"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="@+id/button_10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_11"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_12"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="@+id/button_20"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_21"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
<Button
android:id="@+id/button_22"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp"
android:freezesText="true"/>
</LinearLayout>
The code snippet below was used to setText "X" or "O" to the buttons depending on the player.
@Override
public void onClick(View v) {
if (!"".equals(((Button) v).getText().toString())) {
return;
}
if (playerOneTurn) {
((Button) v).setText("x");
} else {
((Button) v).setText("o");
}
roundCount++;
And this method below is used to check for all possible wins in a tic tac toe game, might be a little confusing but I would advise you to go through it carefully it's quite simple, it follows the basic two-dimensional array principle where i = rows and j = columns.
private boolean checkForWin() {
String[][] field = new String[3][3];
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
field[i][j] = buttons[i][j].getText().toString();
}
}
for (int i = 0; i < 3; i++) {
if (field[i][0].equals(field[i][1]) && field[i][0].
equals(field[i][2]) && !field[i][0].equals("")) {
return true;
}
}
for (int i = 0; i < 3; i++) {
if (field[0][i].equals(field[1][i]) && field[0][i].
equals(field[2][i]) && !field[0][i].equals("")) {
return true;
}
}
if (field[0][0].equals(field[1][1]) && field[0][0].
equals(field[2][2]) && !field[0][0].equals("")) {
return true;
}
return field[0][2].equals(field[1][1]) && field[0][2].
equals(field[2][0]) && !field[0][2].equals("");
}
I would love to stop here, for now, I don't want my article to be too lengthy. However, watch out for the concluding part of this article where I would be explaining the remaining parts of my tic tac toe game.
Thank you for reading, I hope you learnt something?...