Android Kotlin Beginner Tutorial Tic Tac Toe | Part 1 – Project Intro

Hey! What is going on guys? So in this Android Kotlin Beginner tutorial series, we will be making an Android Tic Tac Toe app in Kotlin. This is pretty much going to be a beginner Android tutorial series, so if you are a beginner wanting to explore the world of Android Native App development, you’ve come to the right place. If you are an experienced developer and have some constructive criticism, please do share it in the comment section.

Final Tic Tac Toe Android App

Alright, so this is what we will be making:

We will keep track of the scores of each player and we’ll have a reset button that will clear up the board and reset the scores. Whenever we have a winner, we’ll display a toast saying “Hey Player x Won!” or “Draw!” when there is no winner.

Youtube Video

If you would rather watch a video then read all the way, you can check out this. Although, the video is a quick walkthrough. For detailed tutorial, please consider reading this article. If you choose to watch the video and find it useful, please give it a thumbsup and subscribe to the channel. Thank you. Lets continue.

Create Project

Ok fire up your Android Studio and click on Start a new Android Studio project:

On Select a Project Template dialog, choose Empty Activity and hit Next:

Write App Name as Tic Tac Toe and leave the package name as it is.

Choose Language as Kotlin and Minimum SDK (Minimum version of Android OS your app will run on) to be API 22. If you would like to choose a different Minimum SDK, you can click on the Help me choose option here to help you decide. This will tell you an approximate percentage of devices that support that API level. Once you are done, hit Finish.

Android Studio: Beginner need-to-know stuff

Alright, once you hit Finish, Android Studio will present you with a starter Hello World project which looks like this.

Now, about these 4 highlighted thingies above

1. By default, the Android studio displays files in Android view. And as developer.android.com puts it:

This view does not reflect the actual file hierarchy on disk, but is organized by modules and file types to simplify navigation between key source files of your project, hiding certain files or directories that are not commonly used. 

developer.android.com

• Manifests contain the AndroidManifest.xml file which contains essential information about the app like the app’s package name, permissions, hardware and software features your app is going to require etc etc. you get the idea.
• Java folder contains the Kotlin/Java source code.
• Res folder contains all non-code resources, such as XML layouts, UI strings, and bitmap images, divided into corresponding sub-directories.

2. Shows all available devices you can run this app on i.e. connected devices and Emulator devices.

3. Run button to run the app in the selected device.

4. This tab shows up when dealing with an XML file. In the image above, what we see is the Code view of the xml file. In the Design view (image below), we can create the layout interactively by selecting a component from the Palette (A) and dragging and dropping it in the Component Tree (B), set its attributes in the Attributes panel (C) and furthur adjust it in our Design/Blueprint (D). The Split view shows both Code and Design side by side. We’ll mostly use this so that we can write the code and see the design as we go.

Alright. I feel like this much Android Studio familiarity is enough to get started. So, lets hit that Run button to see if our setup is fine and what this default app looks like.

Ok everything seems fine. Let’s move on to the real deal.
Click here for part 2 of this beginner android kotlin tutorial series where will be creating the layout of our App.