Tic-Tac-Toe Game with Android Studio(JAVA)

Prometheum


HI EVERYONE

Today we make a basic tic tac toe game. It's easy for us 💪


     If you follow these steps, it is easy for you. Firstly, open Android Studio. Next, create a project. Then,  edit the main layout. After that, write codes. Finally, run the emulator. Let's do it.


 You create three gradients and a gradient list. Next, create a font directory. Then, add a font.


You write gradients codes.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

   <item>
        <shape>

            <gradient
                android:startColor="#00FFEB"
                android:endColor="#073ABB"
                android:angle="135"
                />

        </shape>
    </item>

</selector>

for example


You create a gradient list.


<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/background_1"
        android:duration="5000"></item>

    <item android:drawable="@drawable/background_2"
        android:duration="5000"></item>

    <item android:drawable="@drawable/background_3"
        android:duration="5000"></item>

</animation-list>
These look in android studio.


Now you can edit the main layout, Then write codes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/mainLayout"
    android:background="@drawable/gradient_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/playerOneTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginTop="25dp"
        android:text="PLAYER ONE"
        android:textColor="#fff"
        android:textSize="24sp"
        app:fontFamily="@font/wrongdelivery"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/playerOneScoreTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="0"
        android:textColor="#fff"
        android:textSize="24sp"
        app:fontFamily="@font/wrongdelivery"
        app:layout_constraintEnd_toEndOf="@+id/playerOneTextView"
        app:layout_constraintStart_toStartOf="@+id/playerOneTextView"
        app:layout_constraintTop_toBottomOf="@+id/playerOneTextView" />

    <TextView
        android:id="@+id/playerTwoTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="25dp"
        android:text="PLAYER TWO"
        android:textColor="#fff"
        android:textSize="24sp"
        app:fontFamily="@font/wrongdelivery"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/playerTwoScoreTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="0"
        android:textColor="#fff"
        android:textSize="24sp"
        app:fontFamily="@font/wrongdelivery"
        app:layout_constraintEnd_toEndOf="@+id/playerTwoTextView"
        app:layout_constraintStart_toStartOf="@+id/playerTwoTextView"
        app:layout_constraintTop_toBottomOf="@+id/playerTwoTextView" />

    <TextView
        android:id="@+id/playerStatusTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:text=""
        android:textColor="#fff"
        android:textSize="24sp"
        app:fontFamily="@font/wrongdelivery"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/playerOneScoreTextView" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/buttonsLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="25dp"
        android:layout_marginBottom="25dp"
        app:layout_constraintBottom_toTopOf="@+id/resetButton"
        app:layout_constraintTop_toBottomOf="@+id/playerStatusTextView">


        <Button
            app:fontFamily="@font/wrongdelivery"
            android:id="@+id/tictactoeButton0"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".05"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".05"
            app:layout_constraintWidth_percent=".30" />

        <Button
            app:fontFamily="@font/wrongdelivery"
            android:id="@+id/tictactoeButton1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".05"
            app:layout_constraintWidth_percent=".30" />

        <Button
            app:fontFamily="@font/wrongdelivery"
            android:id="@+id/tictactoeButton2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".95"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".05"
            app:layout_constraintWidth_percent=".30" />

        <Button
            app:fontFamily="@font/wrongdelivery"
            android:id="@+id/tictactoeButton3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".05"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".4"
            app:layout_constraintWidth_percent=".30" />

        <Button
            android:id="@+id/tictactoeButton4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:fontFamily="@font/wrongdelivery"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".4"
            app:layout_constraintWidth_percent=".30" />

        <Button
            android:id="@+id/tictactoeButton5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:fontFamily="@font/wrongdelivery"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".95"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".4"
            app:layout_constraintWidth_percent=".30" />

        <Button
            android:id="@+id/tictactoeButton6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:fontFamily="@font/wrongdelivery"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".05"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".75"
            app:layout_constraintWidth_percent=".30" />

        <Button
            android:id="@+id/tictactoeButton7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:fontFamily="@font/wrongdelivery"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".75"
            app:layout_constraintWidth_percent=".30" />

        <Button
            android:id="@+id/tictactoeButton8"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text=""
            android:textSize="64sp"
            app:fontFamily="@font/wrongdelivery"
            app:backgroundTint="#252020"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".25"
            app:layout_constraintHorizontal_bias=".95"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias=".75"
            app:layout_constraintWidth_percent=".30" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/resetButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="75dp"
        android:layout_marginEnd="75dp"
        android:layout_marginBottom="25dp"
        android:text="Reset Game"
        app:fontFamily="@font/wrongdelivery"
        app:backgroundTint="#252020"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
It looks pretty.

Now code time let's do it.


package com.prometrx.tictactoe;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.core.content.res.ResourcesCompat;

import android.graphics.Color;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{ // implements for buttons onclick methods.

    private TextView playerOneScoreTextView, playerTwoScoreTextView, playerStatus;
    private Button [] buttons = new Button[9];
    private Button resetGameButton;

    private int playerOneScoreCount, playerTwoScoreCount, rountCount;
    private boolean activePlayer;

    //p1 => 0
    //p2 => 1
    //empty => 2

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

    private int[][] winningPosition = {
            {0, 1, 2}, {3, 4, 5}, {6, 7, 8}, //rows
            {0, 3, 6}, {1, 4, 7}, {2, 5, 8}, //columns
            {0, 4, 8}, {2, 4, 6} //cross
    };

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

        ConstraintLayout constraintLayout = findViewById(R.id.mainLayout);                          //
        AnimationDrawable animationDrawable = (AnimationDrawable) constraintLayout.getBackground(); //
        animationDrawable.setEnterFadeDuration(2500);                                               // These lines are for live background.
        animationDrawable.setExitFadeDuration(2500);                                                //
        animationDrawable.start();                                                                  //

    }

    private void init() {

        playerOneScoreTextView = findViewById(R.id.playerOneScoreTextView);
        playerTwoScoreTextView = findViewById(R.id.playerTwoScoreTextView);
        playerStatus = findViewById(R.id.playerStatusTextView);
        resetGameButton = findViewById(R.id.resetButton);

        for (int i = 0; i<buttons.length; i++) {
            int resourceId = getResources().getIdentifier("tictactoeButton"+i, "id", getPackageName()); //This line get button id.
            buttons[i] = findViewById(resourceId); // initialize
            buttons[i].setOnClickListener(this);
        }

        rountCount = 0;
        playerOneScoreCount = 0;
        playerTwoScoreCount = 0;
        activePlayer = true;

    }

    @Override
    public void onClick(View view) {

        Button button = ((Button) view);//Casting
        if(!button.getText().toString().equals("")) {
            return;
        }

        String buttonId= button.getResources().getResourceEntryName(button.getId());
        int gameStatePointer = Integer.parseInt(buttonId.substring(buttonId.length()-1, buttonId.length()));

        if(activePlayer) {
            button.setText("X");
            button.setTextColor(Color.parseColor("#D81B60"));
            gameState[gameStatePointer] = 0;
        }
        else{
            button.setText("O");
            button.setTextColor(Color.parseColor("#43A047"));
            gameState[gameStatePointer] = 1;
        }

        rountCount++;

        if(winning()) {

            if(activePlayer) {

                playerOneScoreCount++;
                updateScoreCount();
                Toast.makeText(MainActivity.this, "Player One Won", Toast.LENGTH_LONG).show();
                playAgain();

            }
            else{

                playerTwoScoreCount++;
                updateScoreCount();
                Toast.makeText(MainActivity.this, "Player Two Won", Toast.LENGTH_LONG).show();
                playAgain();

            }
        }
        else if(rountCount == 9) {

            Toast.makeText(MainActivity.this, "No Winner", Toast.LENGTH_LONG).show();
            playAgain();

        }
        else{
            activePlayer = !activePlayer;
        }

        if(playerOneScoreCount > playerTwoScoreCount) {
            playerStatus.setText("PLAYER ONE IS WINNING");
        }
        else if(playerOneScoreCount < playerTwoScoreCount) {
            playerStatus.setText("PLAYER TWO IS WINNING");
        }else{
            playerStatus.setText("EQUALTY");
        }

        resetGameButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                playAgain();
                playerOneScoreCount = 0;
                playerTwoScoreCount = 0;
                playerStatus.setText("");
                updateScoreCount();
            }
        });

    }

    private boolean winning() {

        for(int [] winArray : winningPosition) {
            if (gameState[winArray[0]] == gameState[winArray[1]] && gameState[winArray[1]] == gameState[winArray[2]] && gameState[winArray[0]] != 2) return true;
        }

        return false;
    }

    private void updateScoreCount() {
        playerOneScoreTextView.setText(playerOneScoreCount + "");
        playerTwoScoreTextView.setText(playerTwoScoreCount + "");
    }
    private void playAgain() {
        rountCount = 0;
        activePlayer = true;

        for(int i = 0; i<gameState.length; i++) {
            gameState[i] = 2;
            buttons[i].setText("");
        }

    }

}

As you can see, it's easy for us. Let's watch gameplay. :)




GOODBYE EVERYONE 

If you want to use project files, click this.

Resources:
https://www.dafont.com/wrong-delivery.font
https://www.youtube.com/watch?v=CCQTD7ptYqY

0 Comments