How to create a Tic Tac Toe Android game.
In this article, we’ll see how we can develop a simple Tic Tac Toe android app. So, we’ll see a brief about this game and then we’ll move immediately towards the implementation.
Step (1) :-
Create New Project In Android Studio.
In this video series, we will create an offline 2 player Tic Tac Toe game. We will code the whole game logic, count player points, add a reset functionality, and handle orientation changes, so we don’t lose our game state when we rotate the device.
In part 1 we will create the layout by creating 9 buttons within nested LinearLayouts and we will even them out over the screen by adding the layout_weight attribute. Our player points and reset button will be in a RelativeLayout.
Step(2) :- Set layout code in activity_main.xml..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.codinginflow.tictactoe.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view_p1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Player 1: 0"
android:textSize="30sp" />
<TextView
android:id="@+id/text_view_p2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view_p1"
android:text="Player 2: 0"
android:textSize="30sp" />
<Button
android:id="@+id/button_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="33dp"
android:text="reset" />
</RelativeLayout>
<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" />
<Button
android:id="@+id/button_01"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
<Button
android:id="@+id/button_02"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
</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" />
<Button
android:id="@+id/button_11"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
<Button
android:id="@+id/button_12"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
</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" />
<Button
android:id="@+id/button_21"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
<Button
android:id="@+id/button_22"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="60sp" />
</LinearLayout>
</LinearLayout>
Stap (3):- In the Android Studio Tic Tac Toe tutorial, we will create a 2-dimensional array of buttons, we will dynamically assign them with findViewById, and set OnClickListeners on them by using a nested for-loop.
We will handle the clicks on our playing field, switch between players and implement a method that checks for a winner at the end of each turn, by going through all rows, columns, and diagonals of our playing field and checking if one of them has 3 matching fields. An integer variable will count each round, so we know, that if we don’t have a winner after 9 rounds, we have a draw.
package com.thecodehubs.classictictactoe;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button[][] buttons = new Button[3][3];
private boolean player1Turn = true;
private int roundCount;
private int player1Points;
private int player2Points;
private TextView textViewPlayer1;
private TextView textViewPlayer2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textViewPlayer1 = findViewById(R.id.text_view_p1);
textViewPlayer2 = findViewById(R.id.text_view_p2);
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);
}
}
Button buttonReset = findViewById(R.id.button_reset);
buttonReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
}
@Override
public void onClick(View v) {
if (!((Button) v).getText().toString().equals("")) {
return;
}
if (player1Turn) {
((Button) v).setText("X");
} else {
((Button) v).setText("O");
}
roundCount++;
if (checkForWin()) {
if (player1Turn) {
player1Wins();
} else {
player2Wins();
}
} else if (roundCount == 9) {
draw();
} else {
player1Turn = !player1Turn;
}
}
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;
}
if (field[0][2].equals(field[1][1])
&& field[0][2].equals(field[2][0])
&& !field[0][2].equals("")) {
return true;
}
return false;
}
private void player1Wins() {
}
private void player2Wins() {
}
private void draw() {
}
}
Step (4):- the Android Studio Tic Tac Toe tutorial, we will finally get our game to work. We will finish the winning logic by updating the player points and resetting the board and variables and we will also take care of draw situations.
package com.thecodehubs.classictictactoe;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button[][] buttons = new Button[3][3];
private boolean player1Turn = true;
private int roundCount;
private int player1Points;
private int player2Points;
private TextView textViewPlayer1;
private TextView textViewPlayer2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textViewPlayer1 = findViewById(R.id.text_view_p1);
textViewPlayer2 = findViewById(R.id.text_view_p2);
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);
}
}
Button buttonReset = findViewById(R.id.button_reset);
buttonReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
}
@Override
public void onClick(View v) {
if (!((Button) v).getText().toString().equals("")) {
return;
}
if (player1Turn) {
((Button) v).setText("X");
} else {
((Button) v).setText("O");
}
roundCount++;
if (checkForWin()) {
if (player1Turn) {
player1Wins();
} else {
player2Wins();
}
} else if (roundCount == 9) {
draw();
} else {
player1Turn = !player1Turn;
}
}
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;
}
if (field[0][2].equals(field[1][1])
&& field[0][2].equals(field[2][0])
&& !field[0][2].equals("")) {
return true;
}
return false;
}
private void player1Wins() {
player1Points++;
Toast.makeText(this, "Player 1 wins!", Toast.LENGTH_SHORT).show();
updatePointsText();
resetBoard();
}
private void player2Wins() {
player2Points++;
Toast.makeText(this, "Player 2 wins!", Toast.LENGTH_SHORT).show();
updatePointsText();
resetBoard();
}
private void draw() {
Toast.makeText(this, "Draw!", Toast.LENGTH_SHORT).show();
resetBoard();
}
private void updatePointsText() {
textViewPlayer1.setText("Player 1: " + player1Points);
textViewPlayer2.setText("Player 2: " + player2Points);
}
private void resetBoard() {
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
buttons[i][j].setText("");
}
}
roundCount = 0;
player1Turn = true;
}
}
Step (5):- the Android Studio Tic Tac Toe tutorial, we will take care of configuration changes (like an orientation change), by giving our TextViews and Buttons the “freeze text” attribute and saving our member variables in onSaveInstanceState. We will restore these values in onRestoreInstanceState so we don’t lose our game progress.
Also, we will implement a restart functionality, which resets our board, points, and round count.
package com.thecodehubs.classictictactoe;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button[][] buttons = new Button[3][3];
private boolean player1Turn = true;
private int roundCount;
private int player1Points;
private int player2Points;
private TextView textViewPlayer1;
private TextView textViewPlayer2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textViewPlayer1 = findViewById(R.id.text_view_p1);
textViewPlayer2 = findViewById(R.id.text_view_p2);
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);
}
}
Button buttonReset = findViewById(R.id.button_reset);
buttonReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
resetGame();
}
});
}
@Override
public void onClick(View v) {
if (!((Button) v).getText().toString().equals("")) {
return;
}
if (player1Turn) {
((Button) v).setText("X");
} else {
((Button) v).setText("O");
}
roundCount++;
if (checkForWin()) {
if (player1Turn) {
player1Wins();
} else {
player2Wins();
}
} else if (roundCount == 9) {
draw();
} else {
player1Turn = !player1Turn;
}
}
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;
}
if (field[0][2].equals(field[1][1])
&& field[0][2].equals(field[2][0])
&& !field[0][2].equals("")) {
return true;
}
return false;
}
private void player1Wins() {
player1Points++;
Toast.makeText(this, "Player 1 wins!", Toast.LENGTH_SHORT).show();
updatePointsText();
resetBoard();
}
private void player2Wins() {
player2Points++;
Toast.makeText(this, "Player 2 wins!", Toast.LENGTH_SHORT).show();
updatePointsText();
resetBoard();
}
private void draw() {
Toast.makeText(this, "Draw!", Toast.LENGTH_SHORT).show();
resetBoard();
}
private void updatePointsText() {
textViewPlayer1.setText("Player 1: " + player1Points);
textViewPlayer2.setText("Player 2: " + player2Points);
}
private void resetBoard() {
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
buttons[i][j].setText("");
}
}
roundCount = 0;
player1Turn = true;
}
private void resetGame() {
player1Points = 0;
player2Points = 0;
updatePointsText();
resetBoard();
}
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt("roundCount", roundCount);
outState.putInt("player1Points", player1Points);
outState.putInt("player2Points", player2Points);
outState.putBoolean("player1Turn", player1Turn);
}
@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
roundCount = savedInstanceState.getInt("roundCount");
player1Points = savedInstanceState.getInt("player1Points");
player2Points = savedInstanceState.getInt("player2Points");
player1Turn = savedInstanceState.getBoolean("player1Turn");
}
}
Output In My Application
Application Download In play store:- https://play.google.com/store/apps/details?id=com.idealdevapps.classicttt
Congratulations!!! you have developed your first Tic Tac Toe Game App in Android Studio and now just keep following the rest of the tutorial step by step to become a great Android Developer. All the very best.
Thank You For Visiting Us.
