EXPERIMENT – 1
CALCULATOR APPLICATION USING ANDROID STUDIO
AIM:
To design and develop a mobile-based Calculator application using Android Studio
that performs basic arithmetic operations such as addition, subtraction,
multiplication, and division based on user input.
SOFTWARE / TOOLS REQUIRED:
Android Studio
Java Development Kit (JDK 17)
Android SDK
Android Emulator / Physical Android Device
Operating System: Windows / Ubuntu
ALGORITHM:
Step 1: Launch Android Studio and create a new Android project using Empty
Activity.
Step 2: Design the user interface of the calculator using XML layout.
Step 3: Add numeric buttons (0–9), arithmetic operators (+, −, ×, ÷), clear, and equals
button.
Step 4: Create an input display to show the entered numbers and results.
Step 5: Capture user input using button click events.
Step 6: Store the first operand and selected operator.
Step 7: Perform the arithmetic operation when the equals button is pressed.
Step 8: Display the calculated result on the screen.
Step 9: Execute the application using an Android emulator and verify the output.
PROCEDURE:
Step 1: Create New Android Project
Open Android Studio
Select New Project → Empty Views Activity
Project Name: CalculatorApp
Language: Java
Minimum SDK: API 21
Step 2: Design UI Layout
Open activity_main.xml
Use LinearLayout to arrange buttons
Add EditText for display and Buttons for digits and operations
Step 3: Implement Java Logic
Open [Link]
Define variables to store operands and operator
Implement button click methods for digits, operators, clear, and equals
Perform calculations dynamically based on user input
PROGRAM:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
android:background="#000000">
<!-- Display -->
<EditText
android:id="@+id/display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="32sp"
android:gravity="end"
android:enabled="false"
android:background="@android:color/transparent"
android:padding="16dp" />
<!-- Row 1 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="7" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="8" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="9" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="/" android:onClick="onOperator"
style="@style/CalcBtnOp"/>
</LinearLayout>
<!-- Row 2 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="4" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="5" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="6" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="*" android:onClick="onOperator"
style="@style/CalcBtnOp"/>
</LinearLayout>
<!-- Row 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="1" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="2" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="3" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="-" android:onClick="onOperator"
style="@style/CalcBtnOp"/>
</LinearLayout>
<!-- Row 4 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="0" android:onClick="onDigit" style="@style/CalcBtn"/>
<Button android:text="C" android:onClick="onClear"
style="@style/CalcBtnOp"/>
<Button android:text="=" android:onClick="onEqual"
style="@style/CalcBtnOp"/>
<Button android:text="+" android:onClick="onOperator"
style="@style/CalcBtnOp"/>
</LinearLayout>
</LinearLayout>
[Link]
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
EditText display;
double first = 0;
String operator = "";
boolean isNew = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
display = findViewById([Link]);
}
public void onDigit(View v) {
Button b = (Button) v;
if (isNew) {
[Link]([Link]().toString());
isNew = false;
} else {
[Link]([Link]().toString());
}
}
public void onOperator(View v) {
Button b = (Button) v;
first = [Link]([Link]().toString());
operator = [Link]().toString();
isNew = true;
}
public void onEqual(View v) {
double second = [Link]([Link]().toString());
double result = 0;
switch (operator) {
case "+": result = first + second; break;
case "-": result = first - second; break;
case "*": result = first * second; break;
case "/": result = second != 0 ? first / second : 0; break;
}
[Link]([Link](result));
isNew = true;
}
public void onClear(View v) {
[Link]("0");
first = 0;
operator = "";
isNew = true;
}
}
[Link]:
<resources>
<style name="CalcBtn">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">22sp</item>
</style>
<style name="CalcBtnOp">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">22sp</item>
<item name="android:backgroundTint">#FF9800</item>
</style>
</resources>
OUTPUT:
RESULT:
Thus, a Calculator application was successfully designed and developed using
Android Studio, and basic arithmetic operations were performed based on user input.
EXPERIMENT – 2
TO-DO LIST (KOTLIN) USING ANDROID STUDIO
AIM:
To design and develop a To-Do List mobile application using Kotlin in Android Studio
that enables users to create, store, and manage their daily tasks efficiently.
ALGORITHM:
1. Start the app.
2. Enter task in input field.
3. Click Add button.
4. Store task in ArrayList.
5. Display tasks in ListView.
6. Stop the app.
PROGRAM:
activity_main.xml
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/taskInput"
android:hint="Enter Task"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:text="Add Task"
android:onClick="addTask"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
[Link]
package [Link]
import [Link]
import [Link]
import [Link].*
import [Link]
class MainActivity : AppCompatActivity() {
lateinit var listView: ListView
lateinit var input: EditText
lateinit var tasks: ArrayList<String>
lateinit var adapter: ArrayAdapter<String>
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_main)
listView = findViewById([Link])
input = findViewById([Link])
tasks = ArrayList()
adapter = ArrayAdapter(this,
[Link].simple_list_item_1, tasks)
[Link] = adapter
}
fun addTask(view: View){
[Link]([Link]())
[Link]()
[Link]()
}
}
RESULT:
EXPERIMENT – 3
Recipe Finder App in Android Studio
AIM:
To develop a Recipe Finder Android Application using Android Studio that allows
users to browse and view recipe details based on their selection.
ALGORITHM:
1. Start the app.
2. Display recipe list.
3. User selects recipe.
4. Show ingredients & steps.
5. Stop the app.
PROGRAM:
activity_main.xml
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/details"
android:textSize="18sp"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
[Link]
package [Link];
import [Link];
import [Link].*;
import [Link];
public class MainActivity extends AppCompatActivity {
Spinner spinner;
TextView details;
String[] recipes = {"Dosa","Pongal","Biryani"};
@Override
protected void onCreate(Bundle b){
[Link](b);
setContentView([Link].activity_main);
spinner = findViewById([Link]);
details = findViewById([Link]);
ArrayAdapter<String> ad =
new ArrayAdapter<>(this,
[Link].simple_spinner_item, recipes);
[Link](ad);
[Link](
new [Link]() {
@Override
public void onItemSelected(
AdapterView<?> p, [Link] v,
int i, long l) {
if(i==0)
[Link]("Dosa:\nRice + Dal");
else if(i==1)
[Link]("Pongal:\nRice + Pepper");
else
[Link]("Biryani:\nRice + Chicken");
}
public void onNothingSelected(
AdapterView<?> p){}
});
}
}
RESULT:
EXPERIMENT : 4
QUIZ APP USING ANDROID STUDIO
AIM:
To design and implement a Quiz Application using Android Studio that
presents multiple-choice questions to users and evaluates their responses.
ALGORITHM:
1. Start the app.
2. Display question & options.
3. User selects answer.
4. Check correctness.
5. Display score.
6. Stop the app.
PROGRAM:
activity_main.xml
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Capital of India?"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RadioGroup android:id="@+id/group">
<RadioButton android:id="@+id/op1"
android:text="Delhi"/>
<RadioButton android:id="@+id/op2"
android:text="Chennai"/>
<RadioButton android:id="@+id/op3"
android:text="Mumbai"/>
<RadioButton android:id="@+id/op4"
android:text="Kolkata"/>
</RadioGroup>
<Button
android:text="Submit"
android:onClick="checkAnswer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/result"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
[Link]
package [Link];
import [Link];
import [Link];
import [Link].*;
import [Link];
public class MainActivity extends AppCompatActivity {
RadioGroup group;
TextView result;
@Override
protected void onCreate(Bundle b){
[Link](b);
setContentView([Link].activity_main);
group = findViewById([Link]);
result = findViewById([Link]);
}
public void checkAnswer(View v){
int id = [Link]();
if(id == [Link].op1)
[Link]("Correct Answer");
else
[Link]("Wrong Answer");
}
}
RESULT:
[Link] Tracker Application using React
AIM
To design and develop a Fitness Tracker Web Application using [Link] that
allows users to track their daily fitness activities such as workouts, calories
burned, and exercise duration through an interactive user interface.
SOFTWARE REQUIREMENTS
Operating System: Windows / Linux / macOS
Frontend: [Link]
Language: JavaScript (ES6)
Runtime: [Link]
Package Manager: npm
Code Editor: Visual Studio Code
Browser: Google Chrome / Edge
ALGORITHM
1. Start the application
2. Create a React project using Create React App
3. Design UI components such as:
o Activity Input Form
o Activity List
o Summary Section
4. Accept user input for:
o Exercise name
o Duration
o Calories burned
5. Store activity data using React useState
6. Display entered activities dynamically
7. Calculate total calories burned
8. Render updated results on the UI
9. Stop the application
INSTALLATION PROCESS
1. Install [Link] from the official website
2. Verify installation using command:
3. node -v
4. npm -v
5. Create a new React application:
6. npx create-react-app fitness-tracker
7. Navigate to project folder:
8. cd fitness-tracker
9. Start the React development server:
10. npm start
11. Open browser and access:
12. [Link]
PROGRAM
[Link]
import { useState } from "react";
function App() {
const [activity, setActivity] = useState("");
const [calories, setCalories] = useState("");
const [list, setList] = useState([]);
const addActivity = () => {
if (activity && calories) {
setList([...list, { activity, calories: Number(calories) }]);
setActivity("");
setCalories("");
}
};
const totalCalories = [Link]((sum, item) => sum + [Link], 0);
return (
<div style={{ padding: "20px" }}>
<h2>Fitness Tracker</h2>
<input
type="text"
placeholder="Activity Name"
value={activity}
onChange={(e) => setActivity([Link])}
/>
<input
type="number"
placeholder="Calories Burned"
value={calories}
onChange={(e) => setCalories([Link])}
/>
<button onClick={addActivity}>Add</button>
<ul>
{[Link]((item, index) => (
<li key={index}>
{[Link]} - {[Link]} calories
</li>
))}
</ul>
<h3>Total Calories Burned: {totalCalories}</h3>
</div>
);
}
export default App;
OUTPUT
User can enter fitness activities
Entered activities are displayed in a list
Total calories burned is calculated and displayed dynamically
RESULT
Thus, a Fitness Tracker Application was successfully developed using
[Link], enabling users to track activities and monitor total calories burned
efficiently.
[Link] Planning Application using
React
AIM
To design and develop an Event Planning Web Application using [Link] that
allows users to create, view, and manage events with details such as event name,
date, and location.
SOFTWARE REQUIREMENTS
Operating System: Windows / Linux / macOS
Frontend: [Link]
Language: JavaScript (ES6)
Runtime Environment: [Link]
Package Manager: npm
Code Editor: Visual Studio Code
Browser: Google Chrome / Edge
ALGORITHM
1. Start the application
2. Create a React project using Create React App
3. Design UI components for:
o Event Input Form
o Event List Display
4. Accept user inputs:
o Event name
o Event date
o Event location
5. Store event data using React useState
6. Display added events dynamically
7. Allow multiple event entries
8. Render updated event list on the screen
9. Stop the application
INSTALLATION PROCESS
1. Install [Link] on the system
2. Verify Node and npm installation:
3. node -v
4. npm -v
5. Create a new React project:
6. npx create-react-app event-planner
7. Navigate to project directory:
8. cd event-planner
9. Start the application:
10. npm start
11. Open the browser and go to:
12. [Link]
PROGRAM
[Link]
import { useState } from "react";
function App() {
const [name, setName] = useState("");
const [date, setDate] = useState("");
const [location, setLocation] = useState("");
const [events, setEvents] = useState([]);
const addEvent = () => {
if (name && date && location) {
setEvents([...events, { name, date, location }]);
setName("");
setDate("");
setLocation("");
}
};
return (
<div style={{ padding: "20px" }}>
<h2>Event Planning App</h2>
<input
type="text"
placeholder="Event Name"
value={name}
onChange={(e) => setName([Link])}
/>
<input
type="date"
value={date}
onChange={(e) => setDate([Link])}
/>
<input
type="text"
placeholder="Location"
value={location}
onChange={(e) => setLocation([Link])}
/>
<button onClick={addEvent}>Add Event</button>
<ul>
{[Link]((event, index) => (
<li key={index}>
{[Link]} | {[Link]} | {[Link]}
</li>
))}
</ul>
</div>
);
}
export default App;
OUTPUT
User can enter event details
Multiple events can be added
Events are displayed dynamically with name, date, and location
RESULT
Thus, an Event Planning Application was successfully developed using [Link],
allowing users to organize and manage events efficiently.
EXPERIMENT NO: 7
Movie Discovery Application using React
AIM
To design and develop a Movie Discovery Web Application using [Link] that
allows users to search and view movie titles dynamically based on user input.
SOFTWARE REQUIREMENTS
Operating System: Windows / Linux / macOS
Frontend Framework: [Link]
Programming Language: JavaScript (ES6)
Runtime Environment: [Link]
Package Manager: npm
Code Editor: Visual Studio Code
Web Browser: Google Chrome / Edge
ALGORITHM
1. Start the application
2. Create a React project using Create React App
3. Design the user interface for movie search
4. Accept movie name input from the user
5. Store movie list data using React useState
6. Filter movie list based on search input
7. Display matching movie names dynamically
8. Update results as user types
9. Stop the application
INSTALLATION PROCESS
1. Install [Link] on the system
2. Verify installation using:
3. node -v
4. npm -v
5. Create a new React project:
6. npx create-react-app movie-discovery
7. Navigate to the project directory:
8. cd movie-discovery
9. Start the React application:
10. npm start
11. Open the browser and access:
12. [Link]
PROGRAM
[Link]
import { useState } from "react";
function App() {
const [search, setSearch] = useState("");
const movies = [
"Inception",
"Interstellar",
"Avengers",
"Titanic",
"Avatar",
"Jurassic Park",
"The Dark Knight"
];
const filteredMovies = [Link](movie =>
[Link]().includes([Link]())
);
return (
<div style={{ padding: "20px" }}>
<h2>Movie Discovery App</h2>
<input
type="text"
placeholder="Search Movie"
value={search}
onChange={(e) => setSearch([Link])}
/>
<ul>
{[Link]((movie, index) => (
<li key={index}>{movie}</li>
))}
</ul>
</div>
);
}
export default App;
OUTPUT
User can search movies by typing keywords
Movie list updates dynamically
Matching movie titles are displayed instantly
RESULT
Thus, a Movie Discovery Application was successfully developed using
[Link], enabling users to search and discover movies efficiently.
EXPERIMENT NO: 8
Social Media Application using React
AIM
To design and develop a Social Media Web Application using [Link] that allows
users to create posts and view them dynamically in a feed.
SOFTWARE REQUIREMENTS
Operating System: Windows / Linux / macOS
Frontend Framework: [Link]
Programming Language: JavaScript (ES6)
Runtime Environment: [Link]
Package Manager: npm
Code Editor: Visual Studio Code
Web Browser: Google Chrome / Edge
ALGORITHM
1. Start the application
2. Create a React project using Create React App
3. Design components for:
o Post Input Section
o Post Feed Section
4. Accept post content from the user
5. Store posts using React useState
6. Add new posts to the feed
7. Display all posts dynamically
8. Update the feed whenever a new post is added
9. Stop the application
INSTALLATION PROCESS
1. Install [Link] on the system
2. Verify installation:
3. node -v
4. npm -v
5. Create a new React application:
6. npx create-react-app social-media-app
7. Navigate to project folder:
8. cd social-media-app
9. Start the application:
10. npm start
11. Open browser and visit:
12. [Link]
PROGRAM
[Link]
import { useState } from "react";
function App() {
const [post, setPost] = useState("");
const [posts, setPosts] = useState([]);
const addPost = () => {
if (post) {
setPosts([post, ...posts]);
setPost("");
}
};
return (
<div style={{ padding: "20px" }}>
<h2>Social Media App</h2>
<textarea
placeholder="What's on your mind?"
value={post}
onChange={(e) => setPost([Link])}
/>
<br />
<button onClick={addPost}>Post</button>
<hr />
<h3>Feed</h3>
<ul>
{[Link]((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
OUTPUT
User can create text posts
Posts are displayed instantly in the feed
New posts appear at the top of the feed
RESULT
Thus, a Social Media Application was successfully developed using [Link],
enabling users to create and view posts dynamically.