How to create a Tic Tac Toe Game in Android Studio?

In this article, you will learn how you can create your own application. You will get in touch with many concepts like Intent, View, and Toast. You'll learn how to use all these concepts in one application.  

PREREQUISITE:

• Installation of Android Studio. 
• Must be aware of Java language. 
• Basic concepts of android.

What is Tic Tac Toe Game?

Tic Tac Toe is a game in which two players play in the alternative turns and try to create the line of O's and X's. The player who is able to complete the first wins the game and another loses the game. The students are very interested in playing these kinds of games. To make the game more interesting, developers launch as an app. 

With the help of the article, you are able to create your own Tic Tac Toe game within a few minutes.

PRINCIPAL ELEMENTS USED IN MAKING OF A Tic Tac Toe Game:

• LinearLayout: It is used as a Layout. It helps in aligning the elements properly. You can give the orientation either horizontally or vertically with the help of

  android:orientation="vertical/horizontal" 

• Button: The Button is used in performing the action to block the box with 0's and X's. 
• Intent: It is used to perform the actions given by the user. Mainly used to start the activity or broadcast receivers. Here also it is used to start the activity
• View: It is used to create the input and output fields.

The source code of the activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="100dp"
    android:weightSum="3"
    tools:context="MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:weightSum="3">

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakaleTextPresentCheck,SpeakableTextPresentCheck" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:weightSum="3">

        <Button
            android:id="@+id/btn4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:weightSum="3">

        <Button
            android:id="@+id/btn7"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn8"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />

        <Button
            android:id="@+id/btn9"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="50sp"
            tools:ignore="ButtonStyle,SpeakableTextPresentCheck" />
    </LinearLayout>

    <Button
        android:id="@+id/playAgainButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="playAgain"
        android:text="@string/play_again"
        android:visibility="invisible"
        tools:ignore="OnClick" />

</LinearLayout>

The source code of the MainActivity.java

package com.example.tictactoe;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    Button button1, button2, button3, button4, button5, button6, button7, button8, button9 ;
    int turn;
    int draw;
    Button playAgain;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button) findViewById(R.id.btn1);
        button2 = (Button) findViewById(R.id.btn2);
        button3 = (Button) findViewById(R.id.btn3);
        button4 = (Button) findViewById(R.id.btn4);
        button5 = (Button) findViewById(R.id.btn5);
        button6 = (Button) findViewById(R.id.btn6);
        button7 = (Button) findViewById(R.id.btn7);
        button8 = (Button) findViewById(R.id.btn8);
        button9 = (Button) findViewById(R.id.btn9);
        playAgain = (Button) findViewById(R.id.playAgainButton);
        turn = 1;
        draw = 1;

        playAgain.setOnClickListener(view -> {
            Intent intent = new Intent(getApplicationContext(), MainActivity.class);
            startActivity(intent);
            finish();
        });




        button1.setOnClickListener(view -> {

            if(b1.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b1.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b1.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button2.setOnClickListener(view -> {

            if(b2.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b2.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b2.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button3.setOnClickListener(view -> {

            if(b3.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b3.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b3.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button4.setOnClickListener(view -> {

            if(b4.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b4.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b4.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button5.setOnClickListener(view -> {

            if(b5.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b5.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b5.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button6.setOnClickListener(view -> {

            if(b6.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b6.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b6.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button7.setOnClickListener(view -> {

            if(b7.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b7.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b7.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button8.setOnClickListener(view -> {

            if(b8.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b8.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b8.setText("O");
                }

            }
            endGame();
            draw++;
        });
        button9.setOnClickListener(view -> {

            if(b9.getText().toString().equals("")) {
                if (turn == 1) {
                    turn = 2;
                    b9.setText("X");
                } else if (turn == 2) {
                    turn = 1;
                    b9.setText("O");
                }

            }
            endGame();
            draw++;
        });


    }

    public void endGame () {
        String a,b,c,d,e,f,g,h,i;
        boolean end = false;

        a = button1.getText().toString();
        b = button2.getText().toString();
        c = button3.getText().toString();

        d = button4.getText().toString();
        e = button5.getText().toString();
        f = button6.getText().toString();

        g = button7.getText().toString();
        h = button8.getText().toString();
        i = button9.getText().toString();

        if(a.equals("X") && b.equals("X") && c.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;

        }
        if(a.equals("X") && e.equals("X") && i.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(a.equals("X") && d.equals("X") && g.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(b.equals("X") && e.equals("X") && h.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(c.equals("X") && f.equals("X") && i.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(d.equals("X") && e.equals("X") && f.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(g.equals("X") && h.equals("X") && i.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(g.equals("X") && e.equals("X") && c.equals("X")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }


        if(a.equals("O") && b.equals("O") && c.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(a.equals("O") && e.equals("O") && i.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(a.equals("O") && d.equals("O") && g.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(b.equals("O") && e.equals("O") && h.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(c.equals("O") && f.equals("O") && i.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(d.equals("O") && e.equals("O") && f.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(g.equals("O") && h.equals("O") && i.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player O!", Toast.LENGTH_LONG).show();
            end = true;
        }
        if(g.equals("O") && e.equals("O") && c.equals("O")) {
            Toast.makeText(MainActivity.this, "Winner Player X!", Toast.LENGTH_LONG).show();
            end = true;
        }

        if(end) {
            button1.setEnabled(false);
            button2.setEnabled(false);
            button3.setEnabled(false);
            button4.setEnabled(false);
            button5.setEnabled(false);
            button6.setEnabled(false);
            button7.setEnabled(false);
            button8.setEnabled(false);
            button9.setEnabled(false);
            playAgain.setVisibility(View.VISIBLE);
        }
        if (draw == 9 && !end ) {
            Toast.makeText(MainActivity.this, "Draw Game!", Toast.LENGTH_LONG).show();
            playAgain.setVisibility(View.VISIBLE);
        }
    }
}

Output: