Below are some of the TicTacToe media I created for Android app on phones. There is the main menu, single player options and how the game play looks.
After that, we have these screenshots show some different winners and more of the game board. The winner notification is an injected XML file with certain logic based on who wins. Similarly, the cat can also win but is not pictured here.
Additionally, these pictures are a close up of the X and O icons as well as the app picture that would be on your phone. Powersjo made these icons.
Lastly, this bit of media are the GIFs that are used when a round is over and someone wins. The GIFs had frames modified to make sure they are around the same time in their loops. These gifs appear in 6 spots randomly once the round is over.
I hope you liked the insight on the TicTacToe media for the app. You can download the game from the Google Play store here or from the Amazon app store here.
For making the small images and icons I used Pixlr E here.
This is my first game app for Android and it’s a tic-tac-toe game. I’ve made TicTacToe before on other platforms but not with Kotlin and published on Android. I thought we could go through some of the similarities, differences and what I learned. First, what was similar was the game logic.
Tic Tac Toe logic is an easy game to make in code. I chose to go the route of an Array of arrays and keep track of the board with a 0, 1 and 2. A designation for a blank spot, X and O.
private val top: IntArray = intArrayOf(0, 0, 0)
private val middle: IntArray = intArrayOf(0, 0, 0)
private val bottom: IntArray = intArrayOf(0, 0, 0)
private val board: Array<IntArray> = arrayOf(top, middle, bottom)
Then just have a visual representation of the board with HTML using a top level FrameLayout, a couple LinearLayouts and ImageViews to click on. The nesting and sizing got a bit tricky to make sure the app would scale up and down and still work on many devices.
The main learning curve I ran into was working with the UI. First I learned how to stack layouts on top of each other to achieve the layers on top of each other and the top to bottom look of the game. It took a mix of LinearLayouts (both horizontal and vertical), FrameLayout and RelativeLayout.
Second I learned about injecting a view into the current main view in the case of a popup window. I needed a way to notify the player that the round was over and who won. I did this with an inflater and used a pre-made HTML XML layout to inject the layout into the current activity.
val inflater: LayoutInflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = inflater.inflate(R.layout.popup_view,null)
// Lots more code here.
background_main, // Location to display popup window
Gravity.CENTER, // Exact position of layout to display popup
0, // X offset
0 // Y offset
The third piece of knowledge was just working on the AI for the game. In single player mode, I created the AI and had to scale back the knowledge of the AI. In Tic Tac Toe there are not many moves. If you make the AI too good then the game will either always be cats game or won by the AI. So building a bit of randomness with the choices was needed to keep the AI a bit dumb.
With those three notches under my belt I can move forward onto bigger and better apps on Android. I’m happy with my results even though I had a list of improvements and features, about 10, that I could add to the app. At a certain point it is best to just release it and if it generates interest then I can work on the additions.
You can download the game from the Google Play store here or from the Amazon app store here.