How to make Tic Tac Toe in Android Studio

 In this tutorial, we will build Tic Tac Toe in Android Studio. 

But first, add a picture of your choice into the "drawable" folder in Android Studio for a nice background for your game and name it "bg.png"

The code snippet for Acitivity_main.xml is as below:

Acitvity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    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"

    tools:context=".MainActivity"

    android:layout_margin="10dp"

    android:background="@drawable/bg"    >

    <TextView

        android:id="@+id/texttitle"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Tic Tac Toe"

        android:layout_centerHorizontal="true"

        android:textSize="36sp"

        android:textStyle="bold"

        android:textColor="#cc1234"

        android:fontFamily="cursive"

        />

    <RelativeLayout

        android:id="@+id/relative_layout"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/texttitle"

        android:layout_marginBottom="20dp">

        <TextView

            android:id="@+id/text_player1"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:fontFamily="@font/akaya_telivigala"

            android:text="Player-1 Score"

            android:textAlignment="center"

            android:textColor="@color/black"

            android:textSize="26dp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/text_player2"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:text="Player-2 Score"

            android:textSize="26dp"

            android:textStyle="bold"

            android:textColor="@color/black"

            android:textAlignment="center"

            android:fontFamily="@font/akaya_telivigala"

            android:layout_toRightOf="@id/text_player1"

            />

        <TextView

            android:id="@+id/score_Player1"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:fontFamily="@font/akaya_telivigala"

            android:text="0"

            android:textAlignment="center"

            android:textColor="@color/black"

            android:textSize="26dp"

            android:textStyle="bold"

            android:layout_below="@id/text_player1"/>

        <TextView

            android:id="@+id/score_Player2"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:fontFamily="@font/akaya_telivigala"

            android:text="0"

            android:textAlignment="center"

            android:textColor="@color/black"

            android:textSize="26dp"

            android:textStyle="bold"

            android:layout_below="@id/text_player2"

            android:layout_toRightOf="@id/score_Player1"/>

    </RelativeLayout>

    <LinearLayout

        android:id="@+id/layout_linear"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:layout_centerHorizontal="true"

        android:layout_below="@id/relative_layout"

        >

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            >

           <Button

                android:id="@+id/btn0"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn1"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn2"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            >

            <Button

                android:id="@+id/btn3"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn4"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn5"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            >

            <Button

                android:id="@+id/btn6"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn7"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

            <Button

                android:id="@+id/btn8"

                android:layout_width="75dp"

                android:layout_height="75dp"

                android:textSize="26dp"

                android:layout_marginHorizontal="5dp"

                android:layout_marginBottom="1.25dp"/>

        </LinearLayout>

    </LinearLayout>

    <TextView

        android:id="@+id/textStatus"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/layout_linear"

        android:layout_marginTop="20dp"

        android:layout_centerHorizontal="true"

        android:textSize="26dp"

        android:fontFamily="@font/akaya_telivigala"

        android:text="Status"

        android:textColor="@color/black"/>

    <Button

        android:id="@+id/btn_play_again"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/textStatus"

        android:layout_centerHorizontal="true"

        android:text="Play Again"

        android:textSize="26dp"

        android:fontFamily="@font/akaya_telivigala"

        android:backgroundTint="#ffbb00"/>

    <Button

        android:id="@+id/btn_reset"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/btn_play_again"

        android:layout_centerHorizontal="true"

        android:text="Reset Game"

        android:textSize="26dp"

        android:fontFamily="@font/akaya_telivigala"

        android:backgroundTint="#cc1234"/>

</RelativeLayout>

The UI will look something like this......

The code snippet for MainActivity is as below:

MainActivity.java

package com.allcodingtutorial.tictactoeactivity;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

   boolean playerOneActive;

   private TextView playerOneScore, playerTwoScore, playerStatus;

   private Button[] buttons = new Button[9];

   private Button reset, playagain;

   int[] gameState = {2,2,2,2,2,2,2,2,2};

   int[][] winningPositions = {{0,1,2}, {3,4,5}, {6,7,8}, {0,3,6},

           {1,4,7}, {2,5,8}, {0,4,8}, {2,4,6}};

   int rounds;

   private int playerOneScoreCount, playerTwoScoreCount;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        playerOneScore = findViewById(R.id.score_Player1);

        playerTwoScore = findViewById(R.id.score_Player2);

        playerStatus = findViewById(R.id.textStatus);

        reset = findViewById(R.id.btn_reset);

        playagain = findViewById(R.id.btn_play_again);

        buttons[0] = findViewById(R.id.btn0);

        buttons[1] = findViewById(R.id.btn1);

        buttons[2] = findViewById(R.id.btn2);

        buttons[3] = findViewById(R.id.btn3);

        buttons[4] = findViewById(R.id.btn4);

        buttons[5] = findViewById(R.id.btn5);

        buttons[6] = findViewById(R.id.btn6);

        buttons[7] = findViewById(R.id.btn7);

        buttons[8] = findViewById(R.id.btn8);

        for(int i=0; i<buttons.length; i++)

        {

            buttons[i].setOnClickListener(this);

        }

        playerOneScoreCount = 0;

        playerTwoScoreCount = 0;

        playerOneActive = true;

        rounds = 0;

    }

    @Override

    public void onClick(View view)

    {

        if(!((Button)view).getText().toString().equals(""))

        {

            return;

        }

        else if(checkWinner())

        {

            return;

        }

        String buttonID  = view.getResources().getResourceEntryName(view.getId());

        int gameStatePointer = Integer.parseInt(buttonID.substring(buttonID.length()-1,buttonID.length()));

        if(playerOneActive)

        {

            ((Button)view).setText("X");

            ((Button)view).setTextColor(Color.parseColor("#ffc34a"));

            gameState[gameStatePointer] = 0;

        }

        else

        {

            ((Button)view).setText("O");

            ((Button)view).setTextColor(Color.parseColor("#70fc3a"));

            gameState[gameStatePointer] = 1;

        }

        rounds++;

        if(checkWinner())

        {

            if(playerOneActive)

            {

                playerOneScoreCount++;

                updatePlayerScore();

                playerStatus.setText("Player-1 has won");

            }else

            {

                playerTwoScoreCount++;

                updatePlayerScore();

                playerStatus.setText("Player-2 has won");

            }

        }

        else if(rounds==9)

        {

            playerStatus.setText("No Winner");

        }

        else

        {

           playerOneActive = !playerOneActive;

        }

        reset.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                playAgain();

                playerOneScoreCount= 0;

                playerTwoScoreCount= 0;

                updatePlayerScore();

            }

        });

        playagain.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                playAgain();

            }

        });

    }

    private boolean checkWinner()

    {

      boolean winnerResults  = false;

      for (int[] winningPositions: winningPositions)

      {

          if(gameState[winningPositions[0]]==gameState[winningPositions[1]]&&

                gameState[winningPositions[1]]==gameState[winningPositions[2]] &&

                    gameState[winningPositions[0]]!=2)

          {

              winnerResults = true;

          }

      }

      return winnerResults;

    }

    private void playAgain()

    {

        rounds = 0;

        playerOneActive = true;

        for (int i=0; i<buttons.length; i++)

        {

            gameState[i] = 2;

            buttons[i].setText("");

        }

        playerStatus.setText("Status");

    }

    private void updatePlayerScore()

    {

        playerOneScore.setText(Integer.toString(playerOneScoreCount));

        playerTwoScore.setText(Integer.toString(playerTwoScoreCount));

    }

}

The YouTube video lecture is below:

Thanks...............