Loading your workspace…

Intermediate 40 min Java Full project

Tic Tac Toe Game in Android Studio (Java)

Build a two-player Tic Tac Toe game with a score board. A fun project that teaches game logic: taking turns, checking for a winner and resetting the board.

Download project ZIP View on GitHub Watch on YouTube

24.7Kviews341likes

What you'll learn

Lay out a 3×3 game board
Take turns between two players
Check rows, columns and diagonals for a win
Keep score and reset the game

Before you start

Android Studio (any recent version)
Basic Java: variables, methods and if/else
An emulator or an Android phone

How it fits together

1Tap a cell
2Game.play()
3Check 8 winning lines
4render() updates the board
5Win, draw or next turn

Build it step by step

1. Create the project

In Android Studio choose New Project → Empty Views Activity, with Language Java and Minimum SDK API 24. Nothing extra to add to Gradle.

2. Design the board

In activity_main.xml, put two score boxes at the top, a status line ("X's turn"), then a GridLayout with columnCount="3" holding nine Buttons. Give all nine the same Cell style from themes.xml, so you write the size, corners and text size once instead of nine times.

3. Keep the rules in their own class

Game knows nothing about Android. It holds the board as an array of 9 numbers: 0 empty, 1 X, 2 O. Keeping the rules separate makes them easy to read and test.

4. Whose turn is it?

X always starts, so if both players have the same number of marks it's X's turn, otherwise O's. Working it out from the board means there's no extra variable to get out of step.

5. Find the winner

There are only 8 ways to win: 3 rows, 3 columns and 2 diagonals. winningLine() checks each one: if all three cells hold the same mark, that player won. If no one won and no cell is empty, it's a draw.

6. Connect the cells

In MainActivity, loop over the grid's children: board.getChildAt(i) is cell i. Each tap calls game.play(i), which refuses taken cells and finished games.

7. Draw the screen from the game

render() sets every cell's text and colour from the game, highlights the winning three, and updates the status and scores. Every change goes through this one method, so the screen always matches the game.

8. Survive rotation

Rotating the phone recreates the activity. Save the board and scores in onSaveInstanceState and restore them in onCreate.

9. Run it

Play a few rounds, rotate the phone mid-game, then tap Reset scores.

Make it yours

Let O start every other round.
Add a computer player: pick a random empty cell, or block X when it has two in a row.

What's improved over the video

The rules live in their own small class, the winning line lights up, draws are detected, and the game survives rotation.

Files affected

Check what to add and what to replace before copying code.

app/src/main/java/com/example/tictactoe/MainActivity.javaReplace file
app/src/main/res/layout/activity_main.xmlReplace file
app/src/main/res/values/colors.xmlAdd these lines
app/src/main/java/com/example/tictactoe/Game.javaAdd these lines
app/src/main/res/drawable/score_o.xmlAdd these lines
app/src/main/res/drawable/score_x.xmlAdd these lines
app/src/main/java/com/example/tictactoe/Screens.javaAdd these lines
app/src/main/res/values/strings.xmlReplace file
app/src/main/res/values/themes.xmlReplace file

Application code

Select a file to see its code and where it belongs.

This code uses package com.example.tictactoe. Change that first line to your own package, the one at the top of your MainActivity.

Replace fileapp/src/main/java/com/example/tictactoe/MainActivity.java

Connects the nine cells to the game, shows whose turn it is, and keeps the score.

MainActivity.java

package com.example.tictactoe;

import android.content.res.ColorStateList;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.widget.GridLayout;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

/**
 * The game screen: draws the board from Game, passes taps to it, and keeps the score.
 * The board, score and turn survive rotating the phone.
 */
public class MainActivity extends AppCompatActivity {
    private Game game;
    private int scoreX, scoreO;

    private final Button[] cells = new Button[9];
    private TextView status, textScoreX, textScoreO;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Screens.setUp(this, R.layout.activity_main);
        status = findViewById(R.id.textStatus);
        textScoreX = findViewById(R.id.textScoreX);
        textScoreO = findViewById(R.id.textScoreO);

        // The nine cells are the children of the GridLayout, in order 0 to 8.
        GridLayout board = findViewById(R.id.board);
        for (int i = 0; i < cells.length; i++) {
            int index = i;
            cells[i] = (Button) board.getChildAt(i);
            cells[i].setOnClickListener(v -> play(index));
        }

        findViewById(R.id.btnPlayAgain).setOnClickListener(v -> newRound());
        findViewById(R.id.btnReset).setOnClickListener(v -> {
            scoreX = 0;
            scoreO = 0;
            newRound();
        });

        if (savedInstanceState == null) {
            game = new Game();
        } else {
            game = new Game(savedInstanceState.getIntArray("cells"));
            scoreX = savedInstanceState.getInt("scoreX");
            scoreO = savedInstanceState.getInt("scoreO");
        }
        render();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putIntArray("cells", game.cells());
        outState.putInt("scoreX", scoreX);
        outState.putInt("scoreO", scoreO);
    }

    private void play(int index) {
        if (!game.play(index)) return;
        if (game.winner() == Game.X) scoreX++;
        else if (game.winner() == Game.O) scoreO++;
        render();
    }

    private void newRound() {
        game = new Game();
        render();
    }

    /** Makes the screen match the game: marks, colours, highlighted winning line, status and score. */
    private void render() {
        int[] line = game.winningLine();
        for (int i = 0; i < cells.length; i++) {
            int mark = game.cell(i);
            cells[i].setText(mark == Game.X ? "X" : mark == Game.O ? "O" : "");
            cells[i].setTextColor(colour(mark));
            boolean winning = line != null && (i == line[0] || i == line[1] || i == line[2]);
            cells[i].setBackgroundTintList(ColorStateList.valueOf(
                    winning ? ContextCompat.getColor(this, R.color.winning_cell) : Color.TRANSPARENT));
        }

        String player = game.turn() == Game.X ? "X" : "O";
        if (game.winner() != Game.EMPTY) {
            status.setText(getString(R.string.status_win, game.winner() == Game.X ? "X" : "O"));
        } else if (game.isDraw()) {
            status.setText(R.string.status_draw);
        } else {
            status.setText(getString(R.string.status_turn, player));
        }
        textScoreX.setText(getString(R.string.score, "X", scoreX));
        textScoreO.setText(getString(R.string.score, "O", scoreO));
    }

    private int colour(int mark) {
        return ContextCompat.getColor(this, mark == Game.O ? R.color.player_o : R.color.player_x);
    }
}

Full source code

Download project ZIP View on GitHub