Building TIC TAC TOE GAME in Android Studio 2023: A Step-by-Step Guide to Creating a Powerful & Thrilling Gaming App

BUILD A TIC TAC TOE GAME

Tic Tac Toe is a classic paper-and-pencil game for two players who take turns marking X’s and O’s in a 3×3 grid. The objective of the game is to be the first player to get three of their marks in a row, either horizontally, vertically, or diagonally according to the Tic Tac Toe Rules.

In an Android version of Tic Tac Toe, the game is played on the screen of a mobile device. The player can touch the cells on the screen to place their mark (either X or O) on the board. The game logic checks for winning conditions after each turn and determines if the game has been won, lost, or tied.

Creating a tic tac toe game in Android is a fun and engaging way to learn about Android programming. Tic tac toe, also known as noughts and crosses or Xs and Os, is a simple game that can be played with pencil and paper. In this tutorial, we will explore how to create a tic tac toe game in Android using Java and the Android Studio development environment.

Before we dive into the code, let’s first understand the rules of the game. Tic tac toe is played on a 3×3 grid, and the objective of the game is to place three of your symbols (either X or O) in a row, column, or diagonal. The game can be played by two players, or a single player can play against the computer.

CREATE A NEW ANDROID PROJECT

To create a new Android project, open Android Studio and click on “Start a new Android Studio project” on the welcome screen. In the “Create New Project” dialog, give your project a name, select the minimum SDK version, and choose an activity template. For this tutorial, we will choose the “Empty Activity” template. Click “Finish” to create the project.

XML LAYOUT USER INTERFACE

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/result_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tic Tac Toe Game"
        android:textSize="24sp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"/>
    <GridLayout
        android:id="@+id/grid_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/result_text_view"
        android:layout_marginTop="32dp"
        android:columnCount="3"
        android:rowCount="3"
        android:alignmentMode="alignMargins"
        android:columnOrderPreserved="false">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:tag="0,0"
            android:onClick="onButtonClick"/>
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:tag="0,1"
            android:onClick="onButtonClick"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:tag="0,2"
            android:onClick="onButtonClick"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="1,0"
        android:onClick="onButtonClick"/>
    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="1,1"
        android:onClick="onButtonClick"/>
    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="1,2"
        android:onClick="onButtonClick"/>
    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="2,0"
        android:onClick="onButtonClick"/>

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="2,1"
        android:onClick="onButtonClick"/>

    <Button
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:tag="2,2"
        android:onClick="onButtonClick"/>

</GridLayout>

    <Button
        android:id="@+id/reset_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"
        android:layout_below="@id/grid_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:onClick="onResetButtonClick"/>

</RelativeLayout>

CREATE THE MAIN ACTIVITY CLASS

package com.panrum.tictactoe;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private int[][] board = new int[3][3];
    private int currentPlayer = 1;
    private boolean gameEnded = false;
    private TextView resultTextView;
    private Button[][] buttons = new Button[3][3];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setContentView(R.layout.activity_main);
        resultTextView = findViewById(R.id.result_text_view);
        resetBoard();
    }
public void onButtonClick(View view) {
        if (gameEnded) {
            return;
        }

        Button button = (Button) view;
        String tag = (String) button.getTag();
        int row = Integer.parseInt(tag.substring(0, 1));
        int col = Integer.parseInt(tag.substring(2, 3));

        if (board[row][col] != 0) {
            return;
        }
        board[row][col] = currentPlayer;
        button.setText(currentPlayer == 1 ? "X" : "O");
        button.setBackgroundResource(currentPlayer == 1 ? R.drawable.x_button : R.drawable.o_button);

        if (checkForWinner()) {
            resultTextView.setText(currentPlayer == 1 ? "X wins!" : "O wins!");
            gameEnded = true;
            return;
        }

        if (checkForDraw()) {
            resultTextView.setText("Draw!");
            gameEnded = true;
            return;
        }

        currentPlayer = currentPlayer == 1 ? 2 : 1;
        resultTextView.setText(currentPlayer == 1 ? "Player X's turn" : "Player O's turn");
    }

    public void onResetButtonClick(View view) {
        resetBoard();
    }

    private boolean checkForDraw() {
        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                if (board[i][j] == 0) {
                    // there is an empty cell, game is not yet draw
                    return false;
                }
            }
        }

        // all cells are occupied, game is draw
        return true;
    }

    private void resetBoard() {
        gameEnded = false;
currentPlayer = 1;
        resultTextView.setText("Player X's turn");

        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                board[i][j] = 0;
                buttons[i][j] = findViewById(getResources().getIdentifier("button" + i + j, "id", getPackageName()));
                buttons[i][j].setText("");
                buttons[i][j].setBackgroundResource(android.R.drawable.btn_default);
            }
        }
    }

    private boolean checkForWinner() {
        for (int i = 0; i < 3; i++) {
            if (board[i][0] != 0 && board[i][0] == board[i][1] && board[i][0] == board[i][2]) {
                return true;
            }
        }


        for (int i = 0; i < 3; i++) {
            if (board[0][i] != 0 && board[0][i] == board[1][i] && board[0][i] == board[2][i]) {
                return true;
            }
        }

        if (board[0][0] != 0 && board[0][0] == board[1][1] && board[0][0] == board[2][2]) {
            return true;
        }

        if (board[0][2] != 0 && board[0][2] == board[1][1] && board[0][2] == board[2][0]) {
            return true;
        }
        return false;
    }
}

Related Links

Conclusion:

Embarking on the journey of crafting a TIC TAC TOE GAME within the confines of Android Studio has been a captivating exploration into the world of game development. Through this comprehensive guide, we’ve traversed the intricate terrain of creating a timeless game that combines strategy, competition, and entertainment.

Creating a TIC TAC TOE GAME is not just about coding; it’s about encapsulating the essence of childhood nostalgia and strategic thinking into a digital experience. This tutorial has equipped you with the knowledge and tools to translate the fundamental concept of the game into a functional and engaging application. The interplay of user interface design, logical implementation, and interactive elements showcases the multifaceted nature of game development.

By mastering the techniques presented in this guide, you’ve unlocked the ability to bring to life a game that not only entertains but also stimulates critical reasoning and tactical planning. The TIC TAC TOE GAME challenges players to anticipate their opponent’s moves, plan their strategies, and execute their tactics to achieve victory. This not only enhances cognitive abilities but also provides an avenue for friendly competition and immersive leisure.

Furthermore, the completion of a TIC TAC TOE GAME underscores your proficiency in creating interactive experiences that resonate with users. The fusion of algorithmic logic, user-friendly design, and engaging gameplay mechanics contributes to a seamless and delightful gaming experience. As players immerse themselves in your creation, they indulge in a realm of strategic decisions and playful rivalry.

Reflecting on the journey of constructing the TIC TAC TOE GAME in Android Studio, you’ve not only honed your skills but also delved into the dynamic universe of game development. This accomplishment serves as a stepping stone to further exploration, whether in crafting more intricate games or venturing into other facets of software creation.

In summation, the creation of a TIC TAC TOE GAME in Android Studio underscores your capacity to transform concepts into tangible digital realities. You will be able to develop Online Tic Tac Toe game while getting a little experience. Also Publishing Your Tic Tac Toe Game to Google apps store will make you earn mony The amalgamation of creativity, technical proficiency, and user-centric design results in a game that stands as a testament to your capabilities. So, as you embark on future coding ventures, remember the lessons learned and the gratification derived from crafting the TIC TAC TOE GAME.

More Links