Tic Tac Toe Android App Tutorial with MiniMax Algorithm

Welcome to Tic Tac Toe Android App Tutorial. In this post we will build a super cool Tic Tac Toe app for android that is impossible to beat. This game would be impossible to beat because we are going to use the Artificial Intelligence here.

If you want to see the final app that we will build in this series then you can see this video.

Tic Tac Toe in Android using MiniMax Algorithm

I wanted my phone to think the best move of Tic Tac Toe.
And with MiniMax algorithm I did it.

https://www.youtube.com/SimplifiedCoding
Subscribe now to learn how to do the same:

But now I can not beat my phone. :/

LIKE, TAG & SHARE

Posted by Simplified Coding on Wednesday, May 1, 2019

 

The key point of this app is the MiniMax Algorithm that makes this Tic Tac Toe algorithm. So if you want to learn how you can build this game then keep reading.

Tic Tac Toe Android App Tutorial – Video

You can also go through this video series, if you want more clear and step by step guide of every step that is required to build this game.

But if you are OK with a written tutorial then lets move ahead.

Building Tic Tac Toe Android App

Creating an Android Studio Project

As always we will start by creating a new Android Studio project.

  • Create a new project named Tic Tac Toe using an Empty Activity.
tic tac toe android app tutorial project
Tic Tac Toe Android App
  • When you are in the above screen, make sure you select the Language as Kotlin and you mark the option use androidx.* artifacts.

Adding new Material Design

  • Now first we will add the new material design dependency. So go inside app level build.gradle file and add this line.

  • Once we have added this dependency and synced our project, we will change our applications theme inside styles.xml.

Creating Game UI

  • First you need some drawable resources to make the UI as you see below. You can get the drawables from this link.
  • After downloading the drawables paste them inside the drawable folder of your project.
  • Now define the following colors in your colors.xml file.

  • Come inside activity_main.xml and write the following xml code.

  • The above code will generate the following layout.
Tic Tac Toe Android App Tutorial UI
Application UI
  • Below the “Computer Won” text we have the GridLayout that is not visible because we have nothing inside. Inside this GridLayout we will generate our Tic Tac Toe board.

Generating Tic Tac Toe Board

  • Now come inside MainActivity.kt and here we will create a function to display the tic tac toe board. Here we are generating the board using a 3 by 3 ImageView array.

  • After writing the above code you can try running your application and you will see the following result.
Tic Tac Toe Board
Tic Tac Toe Board
  • Bingo! we have generated our Tic Tac Toe board. Now we need to make the Player Movement. And for this we already pasted the drawable resources (Make sure you have the drawable resource for circle and cross in your drawable folder).

Adding Click Listener to Cells

When player wants to make a move, the player will tap on a cell. So first we will attach an OnClickListener on each cell (or each ImageView that is in our board or array).

  • Inside your class MainActivity define an inner class that will implement the OnClickListener.

  • Now we will attach it to each ImageView in our array, So inside loadBoard() function, just above the line where you are adding the cell to GridLayout add this line.

  • If you are confused then here is the code of MainActivity after adding the above codes.

  • Inside our click listener class (that is the inner class CellClickListener) we have two parameters i and j. This is because we want to know the index of the cell that is clicked. 

Creating Board

  • Now we need one more board. And this board is our actual board in which we will work internally. And the board that we generated above is just for the user visualization. When we will make any changes on the internal board we will also update the visual board which is the array of ImageView.
  • For this internal board we will create a separate class and this class will contain a number of functions and properties. But before creating this class we need one more class to save the Cell of our Board.
  • Create a data class named Cell and write the following code.

  • The above class will only store the indices of a particular cell.
  • Now we will create one more class. So create a new file named Board.kt and write the following kotlin code.

  • The class above is also having our minimax algorithm that will calculate the best move for the computer.

Making Moves

  • Now come inside MainActivity.kt and modify it as below.

  • Now run your application and try beating the Tic Tac Toe.
  • No way man it is impossible to beat this Tic Tac Toe. 

Tic Tac Toe Android App Tutorial – Source Code

  • In case you are having problem following the instructions, you can get your hands into my source code as well. But to get this you need to SHARE this post.

Tic Tac Toe Android App Tutorial Source Code

So that’s all for this Tic Tac Toe tutorial friends. If you have any questions then let me know in the comment section below.