Installing Android Studio & Setup | Android Tutorials in Hindi #1

Creating Our First Android App (with APK) | Android Tutorials in Hindi #2

Linear Layout & Relative Layout In Android | Android Tutorials in Hindi #3

Android activity & Activity Lifecycle | Android Tutorials in Hindi #4

Project 1: Tic Tac Toe Game Android Game Development | Android Tutorials in Hindi #5

Creating Photo Frame Application In Android: Exercise 1 | Android Tutorials in Hindi #6

Creating a Multi Screen Android  Application | Android Tutorials in Hindi #7

Creating a Navigation Drawer App with Hamburger Icon In Android | Android Tutorials in Hindi #8

Embedding Video with media controls in Android | Android Tutorials in Hindi #9

MediaPlayer & Handling Audio in Android | Android Tutorials in Hindi #10

Android SeekBar & its Methods | Android Tutorials in Hindi #11

Dynamic Photo Frame Application In Android Exercise 1: Solution | Android Tutorials in Hindi #12

Android ListViews & Array Adapters | Android Tutorials in Hindi #13

Multiplication Tables Application Project In Android | Android Tutorials in Hindi #14

CountDownTimer, Runnable & Handler in Android | Android Tutorials in Hindi #15

Performing Tasks in Background in Android | Android Tutorials in Hindi #16

What is an API & how to use API in Android | Android Tutorials in Hindi #17

Adding Volley Library dependency & Fake JSON API | Android Tutorials in Hindi #18

Retrieve & Parse JSON Data from Web URL in Android | Android Tutorials in Hindi #19

Multiplication Tables App on Seekbar Change: Exercise 2: Solution | Android Tutorials in Hindi #20

Android Exercise 3: Creating a User Display App | Android Tutorials in Hindi #21

Parsing Nested JSON Arrays & Objects | Android Tutorials in Hindi #22

Shared Preferences: Saving data to Android device | Android Tutorials in Hindi #23

Using a Database in Android | Android Tutorials in Hindi #24

SQLITE Android CRUD Database in Android | Android Tutorials in Hindi #25

SQLite Android CRUD: Adding Contacts to the Database | Android Tutorials in Hindi #26

SQLite Android CRUD: Fetching all Contacts | Android Tutorials in Hindi #27

SQLite Android CRUD: Updating Records | Android Tutorials in Hindi #28

SQLite Android CRUD: Deleting Records | Android Tutorials in Hindi #29

SQLite Android CRUD: Deleting Records | Android Tutorials in Hindi #30

SQLite Android CRUD: Adding ListView | Android Tutorials in Hindi #31

RecyclerView in Android | Android Tutorials in Hindi #32

Creating a RecyclerViewAdaper Class | Android Tutorials in Hindi #33

Adding OnClick Listener to RecyclerView | Android Tutorials in Hindi #34

Create a new project in your Android Studio and name it as TicTacToe .
Go to your browser and download the images for the tic tac toe game. Mainly you have to download three images for it, &nbsp;O , X and the image for the grid.
Now go to the activity_main.xml file in your project and click on the TextView and change the text inside that text view from &ldquo;Hello world&rdquo; to &ldquo;Welcome to Tic Tac Toe&ldquo;
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64.webp" />
Now set the margin of 23dp from the top or as per your requirment.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_L4AyNyR.webp" />
Now change the text size to 36 sp and text style to bold. You can visit all these properties by clicking on the widget and you can search for the required property in the search bar.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_sL3y1DE.webp" />
&lt;|AD|&gt;
Now there will be a warning next to the TextView in the component tree which says &ldquo;Hardcoded string &lsquo;welcome to tic tac toe&rsquo;&nbsp; should use @string resource&rdquo;. It is just a warning, it will not &nbsp;affect the app but if you want to remove that warning than you have to add the string in the strings.xml file inside app &gt; res &gt; value &gt; strings.xml and than click on Open Editor and click on &lsquo;+ &rsquo; sign and than add the id and string .
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_KldaWAD.webp" />
And after add adding the resource go to the text attribute of the TextView and click the oval shape symbol next to the column of the text attribute and you can pick the resource from there and your warning will be gone.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_E63P6S2.webp" />
Now copy the downloaded images of X , O and &nbsp;grid to the drawable folder and drawable v 24 folder of your project . It is mandatory to copy the images in both the folder. If you copy the images only in the drawable folder than there are high chances that your app may crash.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_GV3NgUp.webp" />
Now drag and drop a&nbsp; ImageView to your screen and do the constraints and than insert grid image in that ImageView.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_oc3IktY.webp" />
&lt;|AD|&gt;
Now take a Linear Layout with horizontal orientation and inside that parent Linear Layout insert 3 child Linear Layouts with horizontal orientation and insert 3 image views each on the child Linear Layouts.
Now insert the images on the various image views and set the positions accordingly. Use attributes like padding and layout_margin to set the images properly within the grid .
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_pXPTZLh.webp" />
Now we have to implement a strategy that will decide&nbsp; that which player will win the game .
We will go to activity_main.xml file and give the tags (0,1,2&hellip;..8) to all the images in the grid image so that we can differentiate between various grids when user click on a particular grid.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_jX5etB9.webp" />
Now define a method &ldquo;playerTap&rdquo;which will be executed when the user taps on the particular column of the grid. First, mention method &ldquo;playerTop&rdquo; in the activity_main.xml file in onClick attribute of all the ImageViews. After that write the method body in the MainActivity.java file .&nbsp;&nbsp;
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_BSmSkzr.webp" />
&nbsp;Define an integer variable &ldquo;activePlayer&rdquo; and initialise &nbsp;it to &lsquo;0&rsquo;. This variable tells that which Player&rsquo;s chance is there. If active player value is 0 than its X image will be displayed within that grid and if its value is 1 than O image will be displayed.
<pre class="language-java"><code>int activePlayer = 0;</code></pre>
We define an&nbsp; integer array named gamestate which has 9 values (as there are 9 grids). All the nine elements of the array will be intialised to &lsquo;2&rsquo;.
<pre class="language-java"><code>int[] gameState = {2, 2 , 2, 2, 2, 2, 2, 2, 2};</code></pre>
We have total 8 winning positions in the game . and these positions are stored in an array named &ldquo;winPosition&rdquo; {0,1,2}(horizontal) ,{3,4,5}(horizontal ), {6,7,8,}(horizontal ) , {{0,3,6,}(vertical ) {1,4,7}(vertical ) {2,5,8,}(vertical) {0,4,8}(diagonal) {2,4,6}(diagonal))
<pre class="language-java"><code>int[][] winPositions = {{0,1,2}, {3,4,5}, {6,7,8},

 {0,3,6}, {1,4,7}, {2,5,8},

 {0,4,8}, {2,4,6}};</code></pre>
Active player = 0 &gt;&gt; x turn
Active player = 1 &gt;&gt; o turn
2 &gt;&gt; Null&nbsp;
The playerTap method will check the tag of the grid tapped by the player and convert that tag into integer.and if the the grid contains (2 i.e null) than it will store the value of the activePlayer in the gamestate and will change the values of the activePlayer from 0 to 1 and vice versa . On every turn it will set the image of X when the value of activePlayer is 0, and will set the image of O when the value of activePlayer is 1.
Drag and drop a TextView that will show the turn of the player .and we will set the text into that TextView that if the value of the activePlayer is 0 than it will display X&rsquo;s turn and when the value of the active player will be 1 than it will show O&rsquo;s turn. It will also display the winner of the game.
&lt;|AD|&gt;
We can set the text inside the TextViewby using the code:
<pre class="language-java"><code>TextView status = findViewById(R.id.status);
status.setText("X's Turn - Tap to play");</code></pre>
status is the id of the TextView.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/android-tutorials-in-hindi-5/base64_hwtAqxg.webp" />
We will make another method which will reset the game (will clear the grid ). Basically it will assign the value 2(value 2 indicates null value) to all the elements in the gameState array using a for loop. And will remove all the images in the grid by using the code which is as follows:
<pre class="language-java"><code>((ImageView )findViewById(R.id.imageView0)).setImageResource(0);

.

.

((ImageView )findViewById(R.id.imageView8)).setImageResource(0);</code></pre>
We have also assign a boolean data type named gameActive whose value will be true and when any player won we will set this data type to false. And when the gameActive will be false our reset method will be invoked and the grid will be reset.
<pre class="language-java"><code>boolean gameActive = true;</code></pre>
Now you can Build the apk file of the project and install it in your smartphone.
<a href="https://api.codewithharry.com/media/videoSeriesFiles/courseFiles/android-tutorials-in-hindi-5/tic_tac_toe.zip" target="_blank" rel="noopener">Click here to download media +project files</a>
<h4>Code as described/written in the video</h4>
<pre class="language-xml"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity"&gt;

 &lt;TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="23dp"
 android:text="@string/heading"
 android:textSize="36sp"
 android:textStyle="bold"
 app:fontFamily="cursive"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent" /&gt;

 &lt;ImageView
 android:id="@+id/imageView"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:contentDescription="@string/grid"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/textView"
 app:srcCompat="@drawable/grid" /&gt;

 &lt;LinearLayout
 android:id="@+id/linearLayout"
 android:layout_width="0dp"
 android:layout_height="420dp"
 android:orientation="vertical"
 app:layout_constraintBottom_toBottomOf="@+id/imageView"
 app:layout_constraintEnd_toEndOf="@+id/imageView"
 app:layout_constraintStart_toStartOf="@+id/imageView"
 app:layout_constraintTop_toTopOf="@+id/imageView"&gt;

 &lt;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:orientation="horizontal"&gt;

 &lt;ImageView
 android:id="@+id/imageView0"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="0" /&gt;

 &lt;ImageView
 android:id="@+id/imageView1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="1" /&gt;

 &lt;ImageView
 android:id="@+id/imageView2"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="2" /&gt;
 &lt;/LinearLayout&gt;

 &lt;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:orientation="horizontal"&gt;

 &lt;ImageView
 android:id="@+id/imageView3"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="3" /&gt;

 &lt;ImageView
 android:id="@+id/imageView4"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="4" /&gt;

 &lt;ImageView
 android:id="@+id/imageView5"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="5" /&gt;
 &lt;/LinearLayout&gt;

 &lt;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:orientation="horizontal"&gt;

 &lt;ImageView
 android:id="@+id/imageView6"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="6" /&gt;

 &lt;ImageView
 android:id="@+id/imageView7"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="7" /&gt;

 &lt;ImageView
 android:id="@+id/imageView8"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:onClick="playerTap"
 android:padding="20sp"
 android:tag="8" /&gt;
 &lt;/LinearLayout&gt;

 &lt;/LinearLayout&gt;

 &lt;TextView
 android:id="@+id/status"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="15sp"
 android:text="@string/status"
 android:textSize="18sp"
 android:textStyle="italic"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/linearLayout" /&gt;

&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
</code></pre>
&lt;|AD|&gt;
<h4>Code as described/written in the video</h4>
<pre class="language-java"><code>package com.codewithharry.tictactoe;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
 boolean gameActive = true;
 // Player representation
 // 0 - X
 // 1 - O
 int activePlayer = 0;
 int[] gameState = {2, 2 , 2, 2, 2, 2, 2, 2, 2};
 // State meanings:
 // 0 - X
 // 1 - O
 // 2 - Null
 int[][] winPositions = {{0,1,2}, {3,4,5}, {6,7,8},
 {0,3,6}, {1,4,7}, {2,5,8},
 {0,4,8}, {2,4,6}};
 public void playerTap(View view){
 ImageView img = (ImageView) view;
 int tappedImage = Integer.parseInt(img.getTag().toString());
 if(!gameActive){
 gameReset(view);
 }
 if(gameState[tappedImage] == 2) {
 gameState[tappedImage] = activePlayer;
 img.setTranslationY(-1000f);
 if (activePlayer == 0) {
 img.setImageResource(R.drawable.x);
 activePlayer = 1;
 TextView status = findViewById(R.id.status);
 status.setText("O's Turn - Tap to play");
 } else {
 img.setImageResource(R.drawable.o);
 activePlayer = 0;
 TextView status = findViewById(R.id.status);
 status.setText("X's Turn - Tap to play");
 }
 img.animate().translationYBy(1000f).setDuration(300);
 }
 // Check if any player has won
 for(int[] winPosition: winPositions){
 if(gameState[winPosition[0]] == gameState[winPosition[1]] &amp;&amp;
 gameState[winPosition[1]] == gameState[winPosition[2]] &amp;&amp;
 gameState[winPosition[0]]!=2){
 // Somebody has won! - Find out who!
 String winnerStr;
 gameActive = false;
 if(gameState[winPosition[0]] == 0){
 winnerStr = "X has won";
 }
 else{
 winnerStr = "O has won";
 }
 // Update the status bar for winner announcement
 TextView status = findViewById(R.id.status);
 status.setText(winnerStr);

 }



 }

 }

 public void gameReset(View view) {
 gameActive = true;
 activePlayer = 0;
 for(int i=0; i&lt;gameState.length; i++){
 gameState[i] = 2;
 }
 ((ImageView)findViewById(R.id.imageView0)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView1)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView2)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView3)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView4)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView5)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView6)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView7)).setImageResource(0);
 ((ImageView)findViewById(R.id.imageView8)).setImageResource(0);

 TextView status = findViewById(R.id.status);
 status.setText("X's Turn - Tap to play");

 }

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 }
}

</code></pre>