III YEAR IT-IT3681 MOBILE APPLICATION DEVELOPMENT LAB

(2021 REGULATION)

Mobile Application Development Laboratory detailed syllabus for Information Technology

(IT) for 2021 regulation curriculum has been taken from the Anna University official
website and presented for the IT students. For course code, course name, number of credits
for a course and other scheme related information, do visit full semester subjects post given
below.

For Information Technology 6th Sem scheme and its subjects, do visit IT 6th Sem 2021
regulation scheme. The detailed syllabus of mobile application development laboratory is as
follows.

Course Objectives:

The objective of this course is to enable the students to

 Use Flutter/Kotlin multi-platform environment for building cross-platform mobile

applications.
 Demonstrate the knowledge of different programming techniques and patterns for
mobile application development.
 Identify the components and structure of mobile application development
frameworks.
 Understand the capabilities and limitations of different platforms.
 Design and develop real-time mobile applications.

List of Experiments:

 Study and installation of Flutter/Kotlin multi-platform environment

 Develop an application that uses Widgets, GUI components, Fonts, and Colors.
 Develop a native calculator application.
 Develop a gaming application that uses 2-D animations and gestures.
 Develop a movie rating application (similar to IMDB)
 Develop an application to connect to a web service and to retrieve data with HTTP.
 Develop a simple shopping application.
 Design a web server supporting push notifications.
 Develop an application by integrating Google maps
 Mini Projects involving Flutter/Kotlin multi-platform

Text Books:

1. Simone Alessandria, Flutter Projects: A practical project-based guide to building

real-world cross-platform mobile applications and games, Packt publishing.
2. Carmine Zaccagnino, Programming Flutter: Native, Cross-Platform Apps the Easy
Way (The Pragmatic Programmers), Packt publishing.

Reference Books:

1. Gergely Orosz, Building Mobile Applications at Scale:39 Engineering Challenges

2. Souvik Biswas & Codemagic, Flutter Libraries we love
3. ED Freitas, Daniel Jebaraj, Flutter Succinctly
4. Antonio Leiva, Kotlin for Android Developers Learn Kotlin the easy way while
developing an Android Applications
Course Outcomes:

On successful completion of this course, the student should be able to

1. Design and build simple mobile applications supporting multiple platforms.

2. Apply various programming techniques and patterns to build mobile applications.
3. Build real-time mobile applications for society/environment
4. Build gaming and multimedia based mobile applications
5. Build AI based mobile applications for society/environment following ethical
practices
 EX.NO.1 Study and installation of Flutter/Kotlin multi-platform
environment

Windows install

System requirements

 Operating Systems: Windows 10 or later (64-bit), x86–64 based.

 Disk Space: 2.5 GB (does not include disk space for IDE/tools).

 Tools: Flutter depends on these tools being available in your environment.

 Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)

 Git for Windows 2.x, with the Use Git from the Windows Command

Prompt option.

If Git for Windows is already installed, make sure you can run git commands from the

command prompt or PowerShell.

Get the Flutter SDK

Step 1: Download the Flutter SDK

1. Go to the Flutter download page: https://www.youtube.com/watch?v=GQkaCtlisFA

2. Under the “Get the Flutter SDK” section, click the “Download for Windows”

button.

3. Save the downloaded file to a convenient location on your computer.

Step 2: Extract the Flutter SDK

1. Right-click on the downloaded file and select “Extract All”.

2. In the “Extract Files” window, choose a location where you want to extract the

Flutter SDK. For example, you can extract it to C:\Users\<your_username>\

flutter.

3. Click the “Extract” button.

Step 3: Update your path

1. Open the Start menu and search for “Edit environment variables for your account”.

2. Click on “Edit environment variables for your account”.

In the “Environment Variables” window, select the “User variables” tab.

Under “User variables”, scroll down to find the “Path” variable and click on “Edit”.

Click on “New” and add the path to the Flutter SDK’s bin directory. For example, if you

extracted the Flutter SDK to C:\Users\<your_username>\flutter, you would add the

following path:

C:\Users\<your_username>\flutter\bin

Click “OK” to save your changes.

Step 4: Verify the installation

1. Open a command prompt window.

2. Type the following command and press Enter:

flutter doctor

The flutter doctor command will check your system for any missing dependencies or

issues with your Flutter installation. If everything is installed correctly, you will see a

message similar to the following:

Doctor summary (to show all warnings and errors, use -v or --

verbose) [✓] Flutter (Channel stable, v3.16,

https://github.com/flutter/flutter) [✓] Dart SDK (Version:

2.18.0-197.1) [✓] Android tools [✓] Git [✓] Visual Studio Code

(version 1.71.2) ...

Additional Setup for Android Development

If you want to develop Flutter apps for Android, you will need to perform some

additional setup steps.

Install Android Studio:

Android Studio is Google’s integrated development environment (IDE) for developing

Android apps. You can download Android Studio for free from the Android Developer

website: https://developer.android.com/studio/.

Set up the Android SDK:

The Android SDK is a collection of tools and libraries that are used to develop Android

apps. You can set up the Android SDK by following the instructions in the Android

Studio documentation.

Agree to Android Licenses:

If you haven’t already, you will need to agree to the Android SDK licenses. You can do

this by opening Android Studio and going to File > Settings > Appearance & Behavior

> System Settings > Android SDK. Then, select the Android SDK and click the Accept

butt

Emulators and VMWare & XCode Setup for Flutter App Development

Emulators and VMWare & XCode are essential tools for Flutter app development.

Emulators allow you to test your apps on simulated devices without the need for

physical devices. VMWare & XCode are required for iOS development.
Emulators

Emulators provide a simulated environment that mimics the behavior of various

devices. This allows you to identify and address potential issues before deploying your

app to real devices.

Android Emulator

Flutter provides a built-in emulator for Android devices. To launch the emulator, open a

terminal window and execute the command flutter emulators.

.
Creating a New project:
 Open Android Stdio and then click on File -> New -> New
project.
 Then type the Application name as “ex.no.1″ and click Next.

 Then select the Minimum SDK as shown below and click Next.
 Then select the Empty Activity and click Next.

 Finally click Finish.

 It will take some time to build and load the project.
 After completion it will look as given below.

Designing layout for the Android Application:

 Click on app -> res -> layout -> activity_main.xml.

 Now click on Text as shown below.

EX.NO.2 Develop an application that uses Widgets, GUI components, Fonts, and Colors.

Code for Activity_main.xml:

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:gravity="center"
android:text="Hello World!"
android:textSize="25sp"
android:textStyle="bold" />

<Button
 android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:text="Change font size"
android:textSize="25sp" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:text="Change color"
android:textSize="25sp" />
</LinearLayout>

 Now click on Design and your application will look as given below.

 So now the designing part is completed.

Java Coding for the Android Application:

 Click on app -> java -> com.example.exno1 ->
MainActivity.

 Then delete the code which is there and type the code as given below.
Code for MainActivity.java:

package com.example.exno1;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity

{
int ch=1;
float font=30;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView t= (TextView) findViewById(R.id.textView);
Button b1= (Button) findViewById(R.id.button1);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
t.setTextSize(font);
font = font + 5;
if (font == 50)
font = 30;
}
});
Button b2= (Button) findViewById(R.id.button2);
b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (ch) {
case 1:
t.setTextColor(Color.RED);
break;
case 2:
t.setTextColor(Color.GREEN);
break;
case 3:
t.setTextColor(Color.BLUE);
break;
case 4:
t.setTextColor(Color.CYAN);
break;
case 5:
t.setTextColor(Color.YELLOW);
break;
case 6:
t.setTextColor(Color.MAGENTA);
break;
}
ch++;
if (ch == 7)
ch = 1;
}
});
}
}
 So now the Coding part is also completed.
 Now run the application to see the output.
Output:
Result:
Thus a Simple Android Application that uses GUI components,
Font and Colors is developed and executed successfully.
Ex.No:3. Develop a native calculator

Aim:

To develop a Simple Android Application for Native Calculator.

Procedure:

Creating a New project:

 Open Android Stdio and then click on File -> New -> New project.

 Then type the Application name as “ex.no.3″ and click Next.

 Then select the Minimum SDK as shown below and click Next.

 Then select the Empty Activity and click Next.

 Finally click Finish.

 It will take some time to build and load the project.

 After completion it will look as given below.

Designing layout for the Android Application:

 Click on app -> res -> layout -> activity_main.xml.

 Now click on Text as shown below.

 Then delete the code which is there and type the code as given below.
Code for Activity_main.xml:

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="numberDecimal"
android:textSize="20sp" />

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="numberDecimal"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<Button
android:id="@+id/Add"
 android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+"
android:textSize="30sp"/>
<Button
android:id="@+id/Sub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="-"
android:textSize="30sp"/>
<Button
android:id="@+id/Mul"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="*"
android:textSize="30sp"/>
<Button
android:id="@+id/Div"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="/"
android:textSize="30sp"/>
</LinearLayout>
<TextView
android:id="@+id/textView"
android:layout_width="match_parent
"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="Answer is"
android:textSize="30sp"
android:gravity="center"/>

</LinearLayout>

 Now click on Design and your application will look as given below.

 So now the designing part is completed.

Java Coding for the Android Application:

 Click on app -> java -> com.example.exno3 -> MainActivity.

 Then delete the code which is there and type the code as given below.

Code for MainActivity.java:

package com.example.devang.exno3;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements OnClickListener

{
//Defining the Views
EditText Num1;
EditText Num2;
Button Add;
Button Sub;
Button Mul;
Button Div;
TextView Result;

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

//Referring the Views

 Num1 = (EditText) findViewById(R.id.editText1);
Num2 = (EditText) findViewById(R.id.editText2);
Add = (Button) findViewById(R.id.Add);
Sub = (Button) findViewById(R.id.Sub);
Mul = (Button) findViewById(R.id.Mul);
Div = (Button) findViewById(R.id.Div);
Result = (TextView) findViewById(R.id.textView);

// set a listener
Add.setOnClickListener(this);
Sub.setOnClickListener(this);
Mul.setOnClickListener(this);
Div.setOnClickListener(this);
}

@Override
public void onClick (View v)
{

float num1 = 0;
float num2 = 0;
float result = 0;
String oper =
"";

// check if the fields are empty

if (TextUtils.isEmpty(Num1.getText().toString()) ||
TextUtils.isEmpty(Num2.getText().toString()))
return;

// read EditText and fill variables with numbers

num1 =
Float.parseFloat(Num1.getText().toString()); num2
= Float.parseFloat(Num2.getText().toString());

// defines the button that has been clicked and performs the corresponding operation
// write operation into oper, we will use it later for output
switch (v.getId())
{
 case R.id.Add:
oper = "+";
result = num1 + num2;
break;
case R.id.Sub:
oper = "-";
result = num1 - num2;
break;
case R.id.Mul:
oper = "*";
result = num1 * num2;
break;
case R.id.Div:
oper = "/";
result = num1 / num2;
break;
default:
break;
}
// form the output line
Result.setText(num1 + " " + oper + " " + num2 + " = " + result);
}
}

 So now the Coding part is also completed.

 Now run the application to see the output.

Output:

Result:

Thus a Simple Android Application for Native Calculator is developed and

executed successfully.