SHREEYASH PRATISHTHAN’S

SHREEYASH COLLEGE OF ENGINEERING AND

TECHNOLOGY (POLYTECHNIC), CHH. SAMBHAJINAGAR

MICRO-PROJECT REPORT

NAME OF DEPARTMENT:-DIPLOMA IN COMPUTER ENGINEERING

ACADEMIC YEAR:- 2023-24
SEMESTER:- 6TH
COURSE NAME:- MOBILE APPLICATION DEVELOPMENT
COURSE CODE:- 22617
MICRO-PROJECT TITLE:- TIC TAC TOE

PREPARED BY:-

1. SHAILESH KOSHE EN. NO:-2110920069

UNDER THE GUIDANCE OF:- Prof.T.A.Gavhal

=
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI
CERTIFICATE

This is to certify that Mr./ Ms. SHAILESH KOSHE of 6th Semester of Diploma in
COMPUTER ENGINEERING of Institute Shreeyash College of engineering and
technology [Polytechnic] has successfully completed Micro-Project Work in Course of
MOBILE APPLICATION DEVELOPMENT for the academic year 2023-24 as prescribed
in the I- Scheme Curriculum.

Date:- Enrollment No:-2110920069

Place:-Chh.Sambhajinagar Exam Seat No.:-

Signature Signature Signature

Guide HOD Principal

Seal of Institute
 ACKNOWLEDGEMENT

We wish to express our profound gratitude to our guide

Prof.T.A.Gavhal who guided us endlessly in framing and completion of Micro-
Project. He / She guided us on all the main points in that Micro-Project. We are
indebted to his / her constant encouragement, cooperation and help. It was his /
her enthusiastic support that helped us in overcoming of various obstacles in the
Micro-Project.
We are also thankful to our Principal, HOD, Faculty
Members and classmates for extending their support and motivation in the
completion of this Micro-Project.

 SHAILESH KOSHE EN. NO:-2110920069

 Annexure-1
Micro-Project Proposal
(Format or Micro-Project Proposal about1-2pages)

Title of Micro-Project: “TIC TAC TOE”.

1.0 Aims/Benefits of the Micro-Project (minimum30-50words)

Aim: -
a) For Server-Side Scripting
b) For Entrepreneurship
c) For Cross-Platform Compatibility
d) For Open-Source Community
e) For Efficiency and Effectiveness

Benefits:-
a. It has Higher demand
b. For Integration Capabilities
f) Rapid Development
g) For Portfolio Enhancement
h) Continuous Learning and Innovation

2.0 Course Outcomes Addressed

a. Interpret features of Android operating system

b. Configure Android environment and development tool
c. Develop rich user interfaces by using layouts and controls
d. Use user interface components for Android application development
e. Create android application using database

3.0 Proposed Methodology:

a. Research and Exploration

b. Classification and Types
c. Theory and Operation
d. Applications and Use Cases
e. Hands-on Experience
f. Comparison and Evaluation
g. Case Studies and Examples
h. Continuous Learning and Updates
 Annexure-1

i. Action Plan (Sequence and time required for major activity. The following is for Reference,
The Activities can be Added / reduced / Modified )

Name of
Sr. Planned Planned Responsible
Details of activity
No. Week Start Finish Team Members
date date
1 1 &2 Discussion & Finalization of SHAILESH
Topic KOSHE
2 3 Preparation of the Abstract SHAILESH
KOSHE
3 4 Literature Review SHAILESH
KOSHE
4 5 Submission of Microproject SHAILESH
Proposal ( Annexure-I) KOSHE
5 6 Collection of information about SHAILESH
Topic KOSHE
6 7 Collection of relevant content / SHAILESH
materials for the execution of KOSHE
Microproject.
7 8 Discussion and submission of SHAILESH
outline of the Microproject. KOSHE
8 9 Analysis / execution of
Collected data / information and
preparation of Prototypes / SHAILESH
drawings / photos / charts / KOSHE
graphs / tables / circuits / Models
/ programs etc.
9 10 Completion of Contents of SHAILESH
Project Report KOSHE
10 11 Completion of Weekly progress SHAILESH
Report KOSHE
11 12 Completion of Project Report ( SHAILESH
Annexure-II) KOSHE
12 13 Viva voce / Delivery of SHAILESH
Presentation KOSHE

j. Resources Required (major resources such as raw material, some machining facility,
software etc.)

Sr. Name of Resources / Materials Specification Qty Remarks

No.
1 Computer System Processor (i5 3.0 GHz or better 1
minimum i3 2.4 GHz), Ram (4
GB )HDD (5 GB minimum)
2 Technical Papers and Journals Windows 7 or higher 1
3 Mobile application compiler Latest or recent versions 1

Names of Team Members with En. Nos.

1 Shailesh koshe EN. NO:2110920069
(To be approved by the concerned teacher)
 Annexure-II

Micro-Project Report
Format for Micro-Project Report (Minimum 4 pages)

Title of Micro-Project:- TIC TAC TOE.

1.0 Rationale (Importance of the project, in about 30 to 50words.This is a modified version of

the earlier one written after the work)
The Tic Tac Toe mobile application project aims to provide users with a
simple yet engaging gaming experience. With universal appeal and educational value, it offers
a practical learning opportunity for developers while serving as a valuable addition to
portfolios. Its simplicity and timeless gameplay make it accessible and enjoyable for all.

2.0 Aims/Benefits of the Micro-Project:- (In about 50 to 150 words)

Aim: -
a) For Server-Side Scripting
b) For Entrepreneurship
c) For Cross-Platform Compatibility
d) For Open-Source Community
e) For Efficiency and Effectiveness

Benefits:-
a) It has Higher demand
b) For Integration Capabilities
b) Rapid Development
c) For Portfolio Enhancement
d) Continuous Learning and Innovation
3.0 Course Outcomes Achieved (Add to the earlier list if more Cos are addressed)
a. Interpret features of Android operating system
b. Configure Android environment and development tool
c. Develop rich user interfaces by using layouts and controls
d. Use user interface components for Android application development
e. Create android application using database
f. Publish Android application

4.0 Literature Review:- ( you can include all the resources which you have used to gather the information
for the Micro-project)
• https://www.geeksforgeeks-tictactoe-project-in MOBILE APPLICATION
• https://www.techjockey.com/blog/free-open-source-Tictactoe- Mobile Application
Development -software
 5.0 Actual Methodology Followed
The development methodology for a Tic Tac Toe mobile application typically involves
several key phases. Initially, the team gathers and analyzes requirements, defining features and
constraints. Then, design takes center stage, with wireframes and game logic conceptualized.
Development follows suit, with the chosen technology stack bringing the game to life. Testing
ensures functionality across various scenarios and devices, with bug fixes and optimizations applied
as needed. Deployment to app stores is executed with attention to guidelines and requirements,
leading to public release. Post-launch, maintenance and support ensure the app’s continued success,
with updates and patches addressing user feedback and evolving needs. Throughout the process,
adherence to best practices and effective collaboration are paramount.

Project Overview

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android
Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first you have to do some pre-task

Add Images: All the images are listed below. Save them in your drawable folder in resources. Go to the
app > res > drawable and paste the following files:

 Grid
 O
 X
Change the style to NoActionBar in themes.xml file:

<style name=”AppTheme” parent=”Theme.AppCompat.NoActionBar>

Step 3: Working with the activity_main.xml file

The XML codes are used to build the structure of the activity as well as its styling part. It contains a
TextView at the very top of the activity to display the title. Then it contains an ImageView of the grid
and in each box, there is an ImageView. At the bottom of the activity, there is a TextView to display the
status of the game. Below is the code for the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>

<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"
android:background="@color/green"
tools:context=".MainActivity">
<!--title text-->
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="GFG Tic Tac Toe"
android:textSize="45sp"
android:textStyle="bold"
app:fontFamily="cursive"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<!--image of the grid-->

<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="Start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:srcCompat="@drawable/grid" />

<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">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">

<!--images of the grid boxes-->

<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" />

<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" />

<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" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">

<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" />

<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" />

<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" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
 android:orientation="horizontal">

<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" />

<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" />

<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" />
</LinearLayout>

</LinearLayout>

<!--game status text display-->

<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:text="Status"
android:textSize="28sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity.java file

We will create a two-dimensional array that will store all the winning positions. We will create a
function that will run when a box inside the grid is clicked. Inside this function, we will first check if the
box selected is empty or not. After that, we will set the image of X if the last move was of O or we will
set the image of O if the last move was of X. Then we will check if the move has reached the move
position and then reset the game. Below is the code for the MainActivity.java file. Comments are added
inside the code to understand the code in more detail.

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

import androidx.appcompat.app.AppCompatActivity;

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
// put all win positions in a 2D array
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 static int counter = 0;

// this function will be called every time a

// players tap in an empty box of the grid
public void playerTap(View view) {
ImageView img = (ImageView) view;
int tappedImage = Integer.parseInt(img.getTag().toString());

// game reset function will be called

// if someone wins or the boxes are full
if (!gameActive) {
gameReset(view);
//Reset the counter
counter = 0;
}

// if the tapped image is empty

if (gameState[tappedImage] == 2) {
// increase the counter
// after every tap
counter++;

// check if its the last box

if (counter == 9) {
// reset the game
 gameActive = false;
}

// mark this position

gameState[tappedImage] = activePlayer;

// this will give a motion

// effect to the image
img.setTranslationY(-1000f);

// change the active player

// from 0 to 1 or 1 to 0
if (activePlayer == 0) {
// set the image of x
img.setImageResource(R.drawable.x);
activePlayer = 1;
TextView status = findViewById(R.id.status);

// change the status

status.setText("O's Turn - Tap to play");
} else {
// set the image of o
img.setImageResource(R.drawable.o);
activePlayer = 0;
TextView status = findViewById(R.id.status);

// change the status

status.setText("X's Turn - Tap to play");
}
img.animate().translationYBy(1000f).setDuration(300);
}
int flag = 0;
// Check if any player has won if counter is > 4 as min 5 taps are
// required to declare a winner
if (counter > 4) {
for (int[] winPosition : winPositions) {
if (gameState[winPosition[0]] == gameState[winPosition[1]] &&
gameState[winPosition[1]] == gameState[winPosition[2]] &&
gameState[winPosition[0]] != 2) {
flag = 1;

// Somebody has won! - Find out who!

String winnerStr;

// game reset function be called

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);
 }
}
// set the status if the match draw
if (counter == 9 && flag == 0) {
TextView status = findViewById(R.id.status);
status.setText("Match Draw");
}
}
}

// reset the game

public void gameReset(View view) {
gameActive = true;
activePlayer = 0;
//set all position to Null
Arrays.fill(gameState, 2);
// remove all the images from the boxes inside the grid
((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);
}
}
Output
:
6.0 Actual Resources Used (Mention the actual resources used).

sr.
Name of Resource/material Specifications Qty Remarks
No.

1 Computer System Processor (i5 3.0 1

GHz or better
minimum i3 2.4
GHz), Ram (4
GB or 8 GB),
HDD (5
GB minimum)
Operating System Windows 7 or 1
2
higher
Internet/Websites www.bplans.com 3
3
www.webfx.com
www.digitalagencyn
etwork.com

7.0 Outputs of the Micro-Projects

Thus, we have successfully implemented the source code of a TIC TAC
TOE and learnt about the concepts of Mobile application and also we experienced how to
Create and perform the project in Mobile application.

8.0 Skill Developed/Learning outcome of this Micro-Project

a. Understanding Mobile Platforms

b. Programming Languages and Frameworks
c. UI/UX Design
d. Mobile App Development Lifecycle

9.0 Applications of this Micro-Project:- (In about 30 to 50 words)

a. User Interface: Design intuitive and visually appealing UI.
b. Win Detection: Check for winning combinations after each move.
c. Enable Game Restart: Implement functionality to reset the game board for a new round.
d. Display Turn Indicator: Show which player's turn it is (X or O) to guide user actions..
e. Distribution channel.
 Annexure-IV
MICRO-PROJECT EVOLUTION SHEET

Name of Student:- SHAILESH KOSHE En. No:- 2110920069

Name of Program:- DIPLOMA IN COMPUTER ENGINEERING Semester:- 6th
Course Name:- MOBILE APPLICATION DEVELOPMENT Course Code:- 22617
Title of The Micro-Project:- TIC TAC TOE

Course Outcomes Achieved:-

a. Interpret features of Android operating system
b. Configure Android environment and development tool
c. Develop rich user interfaces by using layouts and controls
d. Use user interface components for Android application development
e. Create android application using database

Sr. Poor Average Good Excellent Sub

Characteristic to be Total
No. assessed (Marks1-3) (Marks4-5) (Marks 6-8) (Marks9-10)
(A)Process and Product Assessment (Convert Below total marks out of 6 Marks)
1 Relevance to the course
2 Literature
Review/information
collection
3 Completion of the Target
as Per project proposal
4 Analysis of Data and
representation
5
Quality of
Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva(Convert Below total marks out of 4 Marks)
7 Presentation
8
Viva

(A) (B)
Process and Product Individual Presentation/ Total Marks
Assessment (6 marks) Viva (4 marks) 10

Comments/Suggestions about team work/leadership/inter-personal communication (if any)

Name of Course Teacher:- Prof.T.A.Gavhal

Dated Signature:-