How to build a Tic-Tac-Toe game for Android [Code Included]

Category: Games

Building a Tic-Tac-Toe game for Android involves several steps, including setting up the development environment, designing the user interface, implementing the game logic, and testing the app. Below is a step-by-step guide to help you create a simple Tic-Tac-Toe game using Android Studio and Kotlin (or Java).

Step 1: Set Up Your Development Environment

Install Android Studio: Download and install Android Studio if you haven’t already.
Create a New Project:
- Open Android Studio and select New Project.
- Choose Empty Activity and click Next.
- Name your project (e.g., “TicTacToe”).
- Set the language to Kotlin (or Java if you prefer).
- Set the minimum API level to 21 (Android 5.0) or higher.
- Click Finish.

Step 2: Design the User Interface

Open the activity_main.xml file in the res/layout folder.
Use a GridLayout or TableLayout to create a 3×3 grid for the Tic-Tac-Toe board.
Add Button elements for each cell in the grid.

Example XML layout:

&lt;GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rowCount="3"
    android:columnCount="3"
    android:layout_centerInParent="true">

    &lt;Button
        android:id="@+id/button1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textSize="30sp"
        android:layout_row="0"
        android:layout_column="0"/>

    &lt;Button
        android:id="@+id/button2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textSize="30sp"
        android:layout_row="0"
        android:layout_column="1"/>

    &lt;!-- Repeat for all 9 buttons (button3 to button9) -->

&lt;/GridLayout>

Step 3: Implement the Game Logic

Open the MainActivity.kt file.
Initialize the game board and handle button clicks.

Example Kotlin code:

class MainActivity : AppCompatActivity() {

    private lateinit var buttons: Array&lt;Array&lt;Button>>
    private var player1Turn = true // Player 1 starts first
    private var roundCount = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Initialize the buttons array
        buttons = Array(3) { row ->
            Array(3) { col ->
                findViewById&lt;Button>(resources.getIdentifier("button${row * 3 + col + 1}", "id", packageName)).apply {
                    setOnClickListener { onButtonClick(row, col) }
                }
            }
        }

        // Reset button (optional)
        findViewById&lt;Button>(R.id.resetButton).setOnClickListener { resetGame() }
    }

    private fun onButtonClick(row: Int, col: Int) {
        val button = buttons[row][col]

        if (button.text.isNotEmpty()) return // Cell already occupied

        if (player1Turn) {
            button.text = "X"
        } else {
            button.text = "O"
        }

        roundCount++
        if (checkForWin()) {
            if (player1Turn) {
                showWinner("Player 1 wins!")
            } else {
                showWinner("Player 2 wins!")
            }
        } else if (roundCount == 9) {
            showWinner("It's a draw!")
        } else {
            player1Turn = !player1Turn
        }
    }

    private fun checkForWin(): Boolean {
        val board = Array(3) { row ->
            Array(3) { col ->
                buttons[row][col].text.toString()
            }
        }

        // Check rows
        for (row in 0..2) {
            if (board[row][0].isNotEmpty() &amp;&amp; board[row][0] == board[row][1] &amp;&amp; board[row][1] == board[row][2]) {
                return true
            }
        }

        // Check columns
        for (col in 0..2) {
            if (board[0][col].isNotEmpty() &amp;&amp; board[0][col] == board[1][col] &amp;&amp; board[1][col] == board[2][col]) {
                return true
            }
        }

        // Check diagonals
        if (board[0][0].isNotEmpty() &amp;&amp; board[0][0] == board[1][1] &amp;&amp; board[1][1] == board[2][2]) {
            return true
        }
        if (board[0][2].isNotEmpty() &amp;&amp; board[0][2] == board[1][1] &amp;&amp; board[1][1] == board[2][0]) {
            return true
        }

        return false
    }

    private fun showWinner(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_LONG).show()
        resetGame()
    }

    private fun resetGame() {
        for (row in 0..2) {
            for (col in 0..2) {
                buttons[row][col].text = ""
            }
        }
        player1Turn = true
        roundCount = 0
    }
}

Step 4: Test the Game

Run the app on an Android emulator or a physical device.
Play the game to ensure it works as expected:
- Players take turns clicking buttons to place “X” or “O”.
- The game detects a win or a draw and resets the board.

Step 5: Add Enhancements (Optional)

Add a Reset Button: Include a button to reset the game at any time.
Improve UI: Use custom graphics or animations for the “X” and “O” symbols.
Add AI: Implement a simple AI for single-player mode using the Minimax algorithm.
Save State: Save the game state when the app is paused or closed.

Step 6: Publish Your App (Optional)

If you want to publish your game on the Google Play Store:

Create a developer account on the Google Play Console.
Build a signed APK or App Bundle.
Upload your app and follow the submission guidelines.

That’s it! You’ve built a simple Tic-Tac-Toe game for Android. You can expand on this by adding more features or improving the design. Happy coding! 🚀

Join @i1apk on Telegram for Updates