Scribd
Upload
4 views

All android assigment

The document is a lab report on Mobile Application Development submitted by Vishwas Jain to Dr. Swagat Kumar Samantaray at VIT Bhopal University. It includes a table of contents listing various experiments related to HTML5, CSS3, and Android app development, along with detailed procedures, code examples, observations, and conclusions for each experiment. The report showcases practical applications of web technologies and programming concepts in creating interactive web pages and applications.

Uploaded by

Arpit Gaur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

All android assigment

The document is a lab report on Mobile Application Development submitted by Vishwas Jain to Dr. Swagat Kumar Samantaray at VIT Bhopal University. It includes a table of contents listing various experiments related to HTML5, CSS3, and Android app development, along with detailed procedures, code examples, observations, and conclusions for each experiment. The report showcases practical applications of web technologies and programming concepts in creating interactive web pages and applications.

Uploaded by

Arpit Gaur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

Mobile Application Development

Lab Report
Submitted by

NAME – Vishwas Jain


REGNO –23MCA10024

Submited to

Dr.Swagat Kumar Samantaray

VIT Bhopal University


Bhopal, Madhyapradhesh

January, 2024
Table of Contents

SL.NO Name of the experiment DATE:


1. Creating a web page with the Audio & Video 5-01-2024
elements of HTML5
2. Create a web page with the CANVAS 5-01-2024
element of HTML5 Draw the Line, Draw
Circle, and Draw Text on the canvas
3. Design a web page to demonstrate all the related 24-01-2024
elements of CSS3-2Dtransforms, 3Dtransforms,
and SVG element
4. Design a web page to demonstrate all the related 24-01-2024
elements of SVG
5. Design a web page showing the several 31-01-2024
transition css property and keyframes
6. Design a web page showing the several 31-01-2024
transition css property( animation-direction
property, animation-iteration-count property )
7. CSS Styling Images 31-01-2024

8. Develop an Android app to demonstrate the 09-02-2024


Activity using Intent
9. Demonstrate the activity life cycle 28-02-2024
10. Intent Activity for sending Email and Opening 28-02-2024
URL
11. Working with layout and Fragments 6-03-2024
12. To develop a Simple Android Application that 17-03-24
draws basic Graphical Primitives on the screen
13. Develop a Simple Android Application that Using a 17-03-24
transformation in a canvas
Exp. No: 01 Create a web page with the Audio & Video elements of HTML5

AIM: Create a web page with the Audio & Video elements of HTML5

PROCEDURE: Create a new HTML file: Start by creating a new HTML file using a text
editor .
1. Set up the basic HTML structure: Declare the document type, create the <html>,
<head>, and <body> tags.
2. Insert an Audio Element:
● Use the <audio> element to embed an audio file.
● Specify the source (src) of the audio file.
● Include the controls attribute to enable playback controls.
3. Insert a Video Element:
● Use the <video> element to embed a video file.
● Specify the source (src) of the video file.
● Include the controls attribute to enable playback controls.
4. Save the HTML file: Save HTML file with an appropriate name and a .html
extension.
5. Test in a Web Browser: Open the HTML file in a web browser to ensure the audio
and video elements are displayed with playback controls.
6. Optional: Customize with CSS: If desired, you can use CSS to style and customize
the appearance of the audio and video elements.
7. Adjust as Needed: Make any necessary adjustments to the file paths, styling, or
additional features based on your requirements.
8. Save and Deploy: Save changes, and ready, deploy HTML file on a web server to
share it with others.

CODE:
. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>media page</title>
<style>
.container{
display: flex;
background-color: azure;
text-align: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="me">
<h1>Vishwas Jain</h1>
<h2>23MCA10024</h2><hr>

</div>
<div class="media">
<audio controls>
<source src="Aa_Jao.mp3" type="audio/ogg">

</audio>
<audio controls>
<source src="Kho_Ghay.mp3" type="audio/mpeg">
</audio>

<video controls width="300px"


height="450px" src="Heeriye.mp4"></video>
</div>
</div>

</body>
</html>
RESULT:

OBSERVATION: The HTML project successfully incorporates audio and video elements,
providing a functional web page with playback controls for both media types.

CONCLUSION : In conclusion, the HTML project effectively demonstrates the integration


of audio and video elements, creating a functional web page with user-friendly playback
controls. The straightforward implementation allows for easy customization and adaptation
based on specific needs..
Exp. No: 1.1 Create a web page with the CANVAS element of HTML5 Draw the
Line, Draw Circle , Draw Text on the canvas

AIM: Create a web page with the CANVAS element of HTML5 Draw the Line, Draw
Circle , Draw Text on the canvas

PROCEDURE: Create a new HTML file: Begin by creating a new HTML file
using a text editor.
1. Set up the basic HTML structure: Declare the document type, and create the
<html>, <head>, and <body> tags.
2. Add a Canvas element: Insert a CANVAS element within the <body> tag to
serve as the drawing area. Specify the width and height attributes.
3. Draw a Line on the Canvas: Utilize JavaScript to draw a line on the canvas.
Define starting and ending points for the line.
4. Draw a Circle on the Canvas: Extend the JavaScript to draw a circle on the
canvas. Specify the center coordinates, radius, and other parameters.
5. Draw Text on the Canvas: Further enhance the JavaScript code to draw text on
the canvas. Set the font size, style, and position for the text.
6. Save and Test: Save the HTML file and open it in a web browser to view the
canvas with the drawn line, circle, and text.
7. Optional: Customize and Style: Modify the code to customize colors, line styles,
fonts, and other properties based on preferences.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
</head>
<style>
.squre{
border: 1px solid black;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: black;
}

.container{
display: inline-flex;
border: 1px solid yellow;
align-items: center;
text-align: center;
position: relative;
top: 200px;
left: 600px;
background-color: yellow;
}
</style>
<body>
<div class="container" id="myCanvas">
<canvas class="squre">

</canvas>

</div>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Draw a line
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(350, 50);
ctx.stroke();
</script>
</body>
</html>

RESULT:

OBSERVATION: The HTML project with the `CANVAS` element successfully incorporates
drawing functionalities. The canvas displays a line, circle, and text, demonstrating the effective
use of JavaScript to manipulate the drawing context. The interactive and dynamic nature of the
canvas provides a versatile platform for creating graphical content within a web page.

CONCLUSION : In conclusion, the HTML project featuring the `CANVAS` element


showcases the versatility of web development by providing a platform for dynamic and
interactive graphical content. The ability to draw lines, circles, and text on the canvas using
JavaScript enhances the user experience and opens up possibilities for creative and engaging web
applications. The project demonstrates the seamless integration of HTML and JavaScript to create
a visually compelling and interactive web page.
𝐄𝐱𝐩. 𝐍𝐨: 𝟎𝟐
𝐃𝐞𝐬𝐢𝐠𝐧 𝐚 𝐖𝐞𝐛𝐩𝐚𝐠𝐞 𝐭𝐨 𝐝𝐞𝐦𝐨𝐧𝐬𝐭𝐫𝐚𝐭𝐞 𝐚𝐥𝐥 𝐭𝐡𝐞 𝐫𝐞𝐥𝐚𝐭𝐞𝐝 𝐞𝐥𝐞𝐦𝐧𝐭𝐬 𝐨𝐟
𝐂𝐒𝐒𝟑 − 𝟐𝐃𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬, 𝟑𝐃𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬 𝐚𝐧𝐝 𝐒𝐕𝐆 𝐞𝐥𝐞𝐦𝐞𝐧𝐭

1. 𝐏𝐑𝐎𝐂𝐄𝐃𝐔𝐑𝐄: 𝐒𝐞𝐭 𝐔𝐩 𝐭𝐡𝐞 𝐇𝐓𝐌𝐋 𝐅𝐢𝐥𝐞:


• 𝐂𝐫𝐞𝐚𝐭𝐞 𝐚 𝐧𝐞𝐰 𝐇𝐓𝐌𝐋 𝐟𝐢𝐥𝐞.
• 𝐀𝐝𝐝 𝐭𝐡𝐞 𝐧𝐞𝐜𝐞𝐬𝐬𝐚𝐫𝐲 𝐇𝐓𝐌𝐋𝟓 𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 < ! 𝐃𝐎𝐂𝐓𝐘𝐏𝐄 𝐡𝐭𝐦𝐥 >, < 𝐡𝐭𝐦𝐥 >
, 𝐡𝐞𝐚𝐝 >, 𝐚𝐧𝐝 < 𝐛𝐨𝐝𝐲 > 𝐭𝐚𝐠𝐬.
2. 𝐃𝐞𝐟𝐢𝐧𝐞 𝐭𝐡𝐞 𝐂𝐒𝐒 𝐒𝐭𝐲𝐥𝐞𝐬:
• 𝐈𝐧𝐬𝐢𝐝𝐞 𝐭𝐡𝐞 < 𝐡𝐞𝐚𝐝 > 𝐭𝐚𝐠, 𝐚𝐝𝐝 𝐚 < 𝐬𝐭𝐲𝐥𝐞 > 𝐛𝐥𝐨𝐜𝐤 𝐭𝐨 𝐝𝐞𝐟𝐢𝐧𝐞 𝐭𝐡𝐞 𝐂𝐒𝐒 𝐬𝐭𝐲𝐥𝐞𝐬.
• 𝐃𝐞𝐟𝐢𝐧𝐞 𝐠𝐥𝐨𝐛𝐚𝐥 𝐬𝐭𝐲𝐥𝐞𝐬 𝐟𝐨𝐫 𝐭𝐡𝐞 𝐛𝐨𝐝𝐲, 𝐡𝐞𝐚𝐝𝐢𝐧𝐠𝐬, 𝐨𝐫 𝐚𝐧𝐲 𝐨𝐭𝐡𝐞𝐫 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 𝐲𝐨𝐮 𝐰𝐚𝐧𝐭 𝐭𝐨 𝐬𝐭𝐲𝐥𝐞 𝐜𝐨𝐧𝐬𝐢𝐬𝐭𝐞𝐧𝐭𝐥𝐲.
3. 𝐂𝐫𝐞𝐚𝐭𝐞 𝐒𝐞𝐜𝐭𝐢𝐨𝐧𝐬 𝐟𝐨𝐫 𝟐𝐃 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬, 𝟑𝐃 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬, 𝐚𝐧𝐝 𝐒𝐕𝐆:
• 𝐖𝐢𝐭𝐡𝐢𝐧 𝐭𝐡𝐞 < 𝐛𝐨𝐝𝐲 > 𝐭𝐚𝐠, 𝐜𝐫𝐞𝐚𝐭𝐞 𝐚 𝐡𝐞𝐚𝐝𝐢𝐧𝐠 (𝐡𝟏 >)𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐭𝐢𝐭𝐥𝐞 𝐨𝐟 𝐲𝐨𝐮𝐫 𝐰𝐞𝐛𝐩𝐚𝐠𝐞.
• 𝐂𝐫𝐞𝐚𝐭𝐞 𝐬𝐞𝐩𝐚𝐫𝐚𝐭𝐞 < 𝐝𝐢𝐯 > 𝐬𝐞𝐜𝐭𝐢𝐨𝐧𝐬 𝐟𝐨𝐫 𝟐𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬, 𝟑𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬, 𝐚𝐧𝐝 𝐒𝐕𝐆.
4. 𝐒𝐭𝐲𝐥𝐞 𝐭𝐡𝐞 𝟐𝐃 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐒𝐞𝐜𝐭𝐢𝐨𝐧:
• 𝐀𝐝𝐝 𝐬𝐭𝐲𝐥𝐞𝐬 𝐟𝐨𝐫 𝐭𝐡𝐞 𝟐𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐬𝐞𝐜𝐭𝐢𝐨𝐧 (𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 − 𝐬𝐞𝐜𝐭𝐢𝐨𝐧).
• 𝐂𝐫𝐞𝐚𝐭𝐞 𝐚𝐧𝐝 𝐬𝐭𝐲𝐥𝐞 𝐢𝐧𝐝𝐢𝐯𝐢𝐝𝐮𝐚𝐥 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 (𝐛𝐨𝐱𝐞𝐬 𝐨𝐫 𝐜𝐨𝐧𝐭𝐚𝐢𝐧𝐞𝐫𝐬)𝐭𝐡𝐚𝐭 𝐰𝐢𝐥𝐥 𝐬𝐡𝐨𝐰𝐜𝐚𝐬𝐞 𝟐𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬.
• 𝐀𝐩𝐩𝐥𝐲 𝐡𝐨𝐯𝐞𝐫 𝐞𝐟𝐟𝐞𝐜𝐭𝐬 𝐨𝐫 𝐚𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 𝐭𝐨 𝐝𝐞𝐦𝐨𝐧𝐬𝐭𝐫𝐚𝐭𝐞 𝐭𝐡𝐞 𝟐𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧𝐬.
5. 𝐒𝐭𝐲𝐥𝐞 𝐭𝐡𝐞 𝟑𝐃 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐒𝐞𝐜𝐭𝐢𝐨𝐧:
• 𝐀𝐝𝐝 𝐬𝐭𝐲𝐥𝐞𝐬 𝐟𝐨𝐫 𝐭𝐡𝐞 𝟑𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐬𝐞𝐜𝐭𝐢𝐨𝐧 (𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝟑𝐝 − 𝐬𝐞𝐜𝐭𝐢𝐨𝐧).
• 𝐂𝐫𝐞𝐚𝐭𝐞 𝐚𝐧𝐝 𝐬𝐭𝐲𝐥𝐞 𝐢𝐧𝐝𝐢𝐯𝐢𝐝𝐮𝐚𝐥 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 (𝐛𝐨𝐱𝐞𝐬 𝐨𝐫 𝐜𝐨𝐧𝐭𝐚𝐢𝐧𝐞𝐫𝐬)𝐭𝐡𝐚𝐭 𝐰𝐢𝐥𝐥 𝐬𝐡𝐨𝐰𝐜𝐚𝐬𝐞 𝟑𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬.
• 𝐀𝐩𝐩𝐥𝐲 𝐡𝐨𝐯𝐞𝐫 𝐞𝐟𝐟𝐞𝐜𝐭𝐬 𝐨𝐫 𝐚𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 𝐭𝐨 𝐝𝐞𝐦𝐨𝐧𝐬𝐭𝐫𝐚𝐭𝐞 𝐭𝐡𝐞 𝟑𝐃 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧𝐬.
6. 𝐒𝐭𝐲𝐥𝐞 𝐭𝐡𝐞 𝐒𝐕𝐆 𝐒𝐞𝐜𝐭𝐢𝐨𝐧:
• 𝐀𝐝𝐝 𝐬𝐭𝐲𝐥𝐞𝐬 𝐟𝐨𝐫 𝐭𝐡𝐞 𝐒𝐕𝐆 𝐬𝐞𝐜𝐭𝐢𝐨𝐧 (𝐬𝐯𝐠 − 𝐬𝐞𝐜𝐭𝐢𝐨𝐧).
• 𝐄𝐦𝐛𝐞𝐝 𝐨𝐫 𝐜𝐫𝐞𝐚𝐭𝐞 𝐚𝐧 𝐒𝐕𝐆 𝐞𝐥𝐞𝐦𝐞𝐧𝐭 𝐰𝐢𝐭𝐡𝐢𝐧 𝐭𝐡𝐢𝐬 𝐬𝐞𝐜𝐭𝐢𝐨𝐧.
• 𝐀𝐩𝐩𝐥𝐲 𝐬𝐭𝐲𝐥𝐞𝐬 𝐭𝐨 𝐭𝐡𝐞 𝐒𝐕𝐆 𝐞𝐥𝐞𝐦𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐝𝐞𝐟𝐢𝐧𝐞 𝐡𝐨𝐯𝐞𝐫 𝐞𝐟𝐟𝐞𝐜𝐭𝐬 𝐨𝐫 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧𝐬.
7. 𝐂𝐮𝐬𝐭𝐨𝐦𝐢𝐳𝐞 𝐂𝐨𝐧𝐭𝐞𝐧𝐭:
• 𝐑𝐞𝐩𝐥𝐚𝐜𝐞 𝐩𝐥𝐚𝐜𝐞𝐡𝐨𝐥𝐝𝐞𝐫 𝐜𝐨𝐧𝐭𝐞𝐧𝐭 𝐢𝐧 𝐞𝐚𝐜𝐡 𝐬𝐞𝐜𝐭𝐢𝐨𝐧 𝐰𝐢𝐭𝐡 𝐚𝐜𝐭𝐮𝐚𝐥 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 𝐭𝐡𝐚𝐭 𝐬𝐡𝐨𝐰𝐜𝐚𝐬𝐞
𝐲𝐨𝐮𝐫 𝐝𝐞𝐬𝐢𝐫𝐞𝐝 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐬 𝐨𝐫 𝐒𝐕𝐆 𝐠𝐫𝐚𝐩𝐡𝐢𝐜𝐬.
• 𝐀𝐝𝐣𝐮𝐬𝐭 𝐜𝐨𝐥𝐨𝐫𝐬, 𝐬𝐢𝐳𝐞𝐬, 𝐚𝐧𝐝 𝐨𝐭𝐡𝐞𝐫 𝐯𝐢𝐬𝐮𝐚𝐥 𝐚𝐬𝐩𝐞𝐜𝐭𝐬 𝐚𝐜𝐜𝐨𝐫𝐝𝐢𝐧𝐠 𝐭𝐨 𝐲𝐨𝐮𝐫 𝐝𝐞𝐬𝐢𝐠𝐧 𝐩𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞𝐬.
8. 𝐓𝐞𝐬𝐭 𝐚𝐧𝐝 𝐑𝐞𝐟𝐢𝐧𝐞:
• 𝐎𝐩𝐞𝐧 𝐭𝐡𝐞 𝐇𝐓𝐌𝐋 𝐟𝐢𝐥𝐞 𝐢𝐧 𝐚 𝐰𝐞𝐛 𝐛𝐫𝐨𝐰𝐬𝐞𝐫 𝐚𝐧𝐝 𝐭𝐞𝐬𝐭 𝐭𝐡𝐞 𝐢𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐨𝐧𝐬.
• 𝐓𝐰𝐞𝐚𝐤 𝐬𝐭𝐲𝐥𝐞𝐬, 𝐚𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬, 𝐨𝐫 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧𝐬 𝐚𝐬 𝐧𝐞𝐞𝐝𝐞𝐝 𝐭𝐨 𝐚𝐜𝐡𝐢𝐞𝐯𝐞 𝐭𝐡𝐞 𝐝𝐞𝐬𝐢𝐫𝐞𝐝 𝐯𝐢𝐬𝐮𝐚𝐥 𝐞𝐟𝐟𝐞𝐜𝐭𝐬.
• 𝐄𝐧𝐬𝐮𝐫𝐞 𝐭𝐡𝐚𝐭 𝐭𝐡𝐞 𝐰𝐞𝐛𝐩𝐚𝐠𝐞 𝐢𝐬 𝐫𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞 𝐚𝐧𝐝 𝐥𝐨𝐨𝐤𝐬 𝐠𝐨𝐨𝐝 𝐨𝐧 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐝𝐞𝐯𝐢𝐜𝐞𝐬.
9. 𝐃𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧:
• 𝐎𝐩𝐭𝐢𝐨𝐧𝐚𝐥𝐥𝐲, 𝐩𝐫𝐨𝐯𝐢𝐝𝐞 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬 𝐨𝐫 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 𝐰𝐢𝐭𝐡𝐢𝐧 𝐭𝐡𝐞 𝐇𝐓𝐌𝐋 𝐚𝐧𝐝 𝐂𝐒𝐒 𝐜𝐨𝐝𝐞 𝐭𝐨 𝐞𝐱𝐩𝐥𝐚𝐢𝐧
𝐬𝐩𝐞𝐜𝐢𝐟𝐢𝐜 𝐬𝐞𝐜𝐭𝐢𝐨𝐧𝐬 𝐨𝐫 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬.
10. 𝐅𝐢𝐧𝐚𝐥 𝐑𝐞𝐯𝐢𝐞𝐰: 𝐂𝐨𝐧𝐝𝐮𝐜𝐭 𝐚 𝐟𝐢𝐧𝐚𝐥 𝐫𝐞𝐯𝐢𝐞𝐰 𝐨𝐟 𝐭𝐡𝐞 𝐰𝐞𝐛𝐩𝐚𝐠𝐞 𝐭𝐨 𝐞𝐧𝐬𝐮𝐫𝐞 𝐭𝐡𝐚𝐭 𝐢𝐭 𝐦𝐞𝐞𝐭𝐬 𝐲𝐨𝐮𝐫 𝐝𝐞𝐬𝐢𝐠𝐧
𝐠𝐨𝐚𝐥𝐬 𝐚𝐧𝐝 𝐞𝐟𝐟𝐞𝐜𝐭𝐢𝐯𝐞𝐥𝐲 𝐝𝐞𝐦𝐨𝐧𝐬𝐭𝐫𝐚𝐭𝐞𝐬 𝟐𝐃 𝐭𝐫𝐚𝐧
Registration no: 23MCA10024

CODE: HTML
< ! DOCTYPE html >
< html lang = en >
< head >
< meta charset = UTF-8 >
< meta name = viewportcontent = width=device-width, initial-scale=1.0 >
< title > CSS3 Transforms and SVG Demo < >
title
< link rel = stylesheethref = css3.css >
< >
head
< body >
< h1 > CSS3 Transforms and SVG Demo < >
h1

< ! − − 2𝐷 𝑇𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚𝑠 𝑆𝑒𝑐𝑡𝑖𝑜𝑛 −→


< h3 > 2D transform < >
h3
< hr >
< div class = transform-section >
< div class = transform-box > 2D Transform < >
div
< ! − − 𝐴𝑑𝑑 𝑚𝑜𝑟𝑒 2𝐷 𝑡𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚 𝑏𝑜𝑥𝑒𝑠 𝑎𝑠 𝑛𝑒𝑒𝑑𝑒𝑑 −→
< >
div

< ! − − 3𝐷 𝑇𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚𝑠 𝑆𝑒𝑐𝑡𝑖𝑜𝑛 −→


< h3 > 3D transform < >
h3
< hr >
< div class = transform3d-section >
< div class = transform3d-box > 3D Transform < >
div
< ! − − 𝐴𝑑𝑑 𝑚𝑜𝑟𝑒 3𝐷 𝑡𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚 𝑏𝑜𝑥𝑒𝑠 𝑎𝑠 𝑛𝑒𝑒𝑑𝑒𝑑 −→
< >
div

< ! − − 𝑆𝑉𝐺 𝑆𝑒𝑐𝑡𝑖𝑜𝑛 −→


< h3 > svg < >
h3
< hr >
< div class = svg-section >
< ! − − 𝑅𝑒𝑝𝑙𝑎𝑐𝑒 𝑡ℎ𝑒 𝑐𝑜𝑛𝑡𝑒𝑛𝑡 𝑖𝑛𝑠𝑖𝑑𝑒 𝑡ℎ𝑒 < 𝑠𝑣𝑔 > 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 𝑤𝑖𝑡ℎ 𝑦𝑜𝑢𝑟 𝑆𝑉𝐺 𝑐𝑜𝑑𝑒 −→
< svg viewBox = 0 0 24 24xmlns = http://www.w3.org/2000/svg >
< path d
= M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H7v-2h4v-4h2v6zm4-1c0 1.1-.9 2-2 2s-2
≯
< >
svg
< >
div
Name/Signature: NAME – Vishwas Jain
DATE of Submission: 24-01-2024
Registration no: 23MCA10024

< >
body
< >
html

CSS3:-
body {
font − family: Arial, sans − serif;
margin: 0;
padding: 0;
display: flex;
flex − direction: column;
align − items: center;
justify − content: center;
height: 100vh;
background − color: gray;
}

h1 {
color: 333;
}

𝑆𝑒𝑐𝑡𝑖𝑜𝑛 𝑓𝑜𝑟 2𝐷 𝑇𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚𝑠 ∗


∗
. transform − section {
margin − top: 30px;
display: flex;
justify − content: space − around;
}

. transform − box {
width: 100px;
height: 100px;
background − color: 3498db;
margin: 10px;
display: flex;
align − items: center;
justify − content: center;
color: fff;
font − weight: bold;
cursor: pointer;
transition: transform 0.3s ease − in − out;
}

. transform − box: hover {


transform: rotate(45deg)scale(1.2);
}

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

𝑆𝑒𝑐𝑡𝑖𝑜𝑛 𝑓𝑜𝑟 3𝐷 𝑇𝑟𝑎𝑛𝑠𝑓𝑜𝑟𝑚𝑠 ∗


∗
. transform3d − section {
margin − top: 30px;
perspective: 800px;
display: flex;
justify − content: space − around;
}

. transform3d − box {
width: 100px;
height: 100px;
background − color: e74c3c;
margin: 10px;
display: flex;
align − items: center;
justify − content: center;
color: fff;
font − weight: bold;
cursor: pointer;
transform − style: preserve − 3d;
transition: transform 0.3s ease − in − out;
}

. transform3d − box: hover {


transform: rotateX(45deg)rotateY(45deg)scale(1.2);
}

𝑆𝑒𝑐𝑡𝑖𝑜𝑛 𝑓𝑜𝑟 𝑆𝑉𝐺 ∗


∗
. svg − section {
margin − top: 30px;
display: flex;
justify − content: center;
}

svg {
width: 200px;
height: 200px;
fill: 2ecc71;
transition: transform 0.3s ease − in − out;
}

svg: hover {
transform: rotate(180deg);
}

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

RESULT:

• OBSERVATION: Structure: Clearly organized with sections for 2D, 3D transforms,


and SVG.
• Styling: Consistent global styles, unique styles for each section.
• 2D Transforms: Smooth transformations (e.g., rotation, scaling) on hover.
• 3D Transforms: Perspective for a 3D effect, rotations in X and Y axes.
• SVG: SVG element with defined viewbox, transforms on hover.
• Responsiveness: Design ensures a consistent look across devices.
• Interactivity: Engaging hover effects and transformations.
• Customization: Easily customizable by changing content and styles.
• Testing: Ensured compatibility through cross-browser testing.
• Documentation: Clear comments for code sections.
• Review: Successful demonstration of CSS3 features, achieving design goals.

CONCLUSION : the webpage effectively showcases 2D transforms, 3D transforms, and SVG


elements with interactive and engaging features. It is visually appealing, responsive, and easily
customizable for different needs..

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

Exp. No: 2.1


Design a Webpage to demonstrate all the related elemnts of
SVG

AIM: Design a Webpage to demonstrate all the related elemnts of


SVG
1. PROCEDURE HTML File Setup:
2. Create a new HTML file with the necessary structure (<!DOCTYPE html>, <html>,
<head>, <body>).
3. Set the document title to something relevant (e.g., "SVG Elements Demo").
4. Head Section Styling:
5. Add a <style> block within the <head> section to set global styles.
6. Define styles for the body, such as font-family and text-align.
7. Style the SVG elements to have some margin for better presentation.
8. Main Heading:
9. Add an <h1> element to provide a main heading for your webpage (e.g., "SVG
Elements Demo").
10. SVG Elements:
11. For each SVG element you want to showcase, use the <svg> tag.
12. Inside each <svg> tag, include an SVG element (e.g., <circle>, <rect>, <ellipse>)
with relevant attributes and styles.
13. You can experiment with different shapes, lines, and paths.
14. Diverse SVG Elements:
15. Include a variety of SVG elements to demonstrate the versatility of SVG.
16. Examples include circles, rectangles, ellipses, lines, polygons, paths, text, polylines,
and images.
17. Customization:
18. Customize the attributes and styles of each SVG element to achieve different visual
effects.
19. Experiment with colors, strokes, fills, sizes, and positions.
20. Testing:
21. Open the HTML file in a web browser to test the appearance and behavior of the SVG
elements.
22. Ensure that the elements are displaying correctly and are visually appealing.
23. Adjustments and Refinement:
24. Make adjustments as needed based on the testing results.
25. Refine styles, sizes, and positions to achieve a balanced and visually pleasing layout.
26. Review:
27. Review the webpage to ensure it effectively demonstrates the capabilities of SVG
elements.
28. Confirm that each SVG element is properly showcased and contributes to the overall
design.

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Elements Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 30px;
background-color: gray;
}

svg {
margin: 20px;
}
</style>
</head>
<body>
<h1>SVG Elements</h1>

<svg width="100" height="100">


<!-- Circle -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"
/>
</svg>

<svg width="200" height="100">


<!-- Rectangle -->
<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="150" height="150">


<!-- Ellipse -->
<ellipse cx="75" cy="75" rx="70" ry="40"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

<svg width="200" height="100">


<!-- Line -->
<line x1="10" y1="50" x2="190" y2="50" style="stroke:rgb(255,0,0);stroke-
width:2" />
</svg>

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

<svg width="200" height="100">


<!-- Polygon -->
<polygon points="10,10 190,10 100,90"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg width="150" height="150">


<!-- Path (Quadratic Bezier Curve) -->
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black"
fill="transparent" />
</svg>

<svg width="150" height="150">


<!-- Text -->
<text x="10" y="40" font-family="Arial" font-size="20"
fill="blue">SVG</text>
</svg>

<svg width="150" height="150">


<!-- Polyline -->
<polyline points="10,80 50,10 90,80" style="fill:none;stroke:black;stroke-
width:3" />
</svg>

<svg width="150" height="150">


<!-- Image -->
<image xlink:href="https://placekitten.com/150/150" width="150"
height="150" />
</svg>

</body>
</html>

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
Registration no: 23MCA10024

RESULT:

OBSERVATION: Diverse Elements: Showcase various SVG elements like circles,


rectangles, lines, and more.
Visual Appeal: Ensure elements are visually appealing with different colors, sizes,
and styles.
Testing: Open in a browser to check appearance and behavior; adjust as needed.
Versatility: Demonstrate SVG's versatility with different shapes, paths, and text.
Balance: Refine styles for a balanced layout and pleasing design.
Compatibility: Test in multiple browsers for consistent presentation.
Documentation (Optional): Add comments for clarity on specific elements or
features.
Deployment: Once satisfied, deploy the webpage for sharing or hosting.

CONCLUSION : Webpage successfully showcases diverse SVG elements, visually appealing


and versatile. Tested for compatibility, refined for balance. Ready for deployment.

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 24-01-2024
EXP. NO: 3.1 : WEB PAGE SHOWING THE SEVERAL TRANSITION CSS
PROPERTY

AIM: Create a web page showing the several transition CSS property.

PROCEDURE:
• The HTML document starts with the usual doctype declaration and opening <html> tag.
• The document is in English (en language).
• The <head> section contains meta tags for character set and viewport settings, a title for
the webpage, and a <style> tag for defining CSS styles.
• There are two CSS classes, .container1 and .container2, defined within the <style> tag.
• Both classes have specific styling properties:
• width: Initial width set to 100px.
• height: Height set to 150px.
• background-color: Background color set to blue.
• text-align: Text alignment set to center.
• transition: Specifies the transition effect with a duration of 2 seconds.
• .container1 has an additional property transition-timing-function set to linear.
• .container2 has an additional property transition-delay set to 2 seconds.
• Inside the <body> tag, there is a <div> with the class name container.
• Within this container, there are two child <div> elements:
• The first <div> has the class container1 and contains a <p> element with the text "Vikas
Sharma."
• The second <div> has the class container2 and contains a <p> element with the text
"Vikas Sharma."
• Both .container1 and .container2 have a transition effect on the width property.
• When the mouse hovers over either container, the width property changes from the initial
100px to 200px over a duration of 2 seconds.
• The transition for .container1 has a linear timing function, while the transition
for .container2 has a delay of 2 seconds before starting.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

Name : Vishwas Jain


Reg. No. : 23MCA10024
.container1{
width: 100px;
height: 150px;
background-color: blue;
text-align: center;
transition: 2s;
transition-timing-function: linear ;
}
.container1:hover{
width: 200px;
}
.container2{
width: 100px;
height: 150px;
background-color: blue;
text-align: center;
transition: 2s;
transition-delay: 2s;
}
.container2:hover{
width: 200px;
}

</style>
</head>
<body>
<div class="container">
<div class="container1">
<p>
Vishwas Jain
</p>
</div>
<div class="container2">
<p>
Vishwas Jain
</p>
</div>
</div>

</body>
</html>

Name : Vishwas Jain


Reg. No. : 23MCA10024
Description : This HTML code defines a simple webpage with two containers, each displaying a
transition effect on the width property. The webpage includes a <head> section with meta tags
and a title, and a <style> section with CSS rules for styling. The styling includes two
classes, .container1 and .container2, with initial dimensions, background color, and text
alignment. The key feature is the transition effect applied to the width property, triggered by
hovering over the containers. The first container (container1) has a linear timing function, and
the second container (container2) has a delayed start for the transition. The HTML body contains
a parent container with two child div elements, each having a paragraph with different text
content. When the user hovers over the containers, the width smoothly transitions from an initial
value of 100px to 200px over a 2-second duration, providing a visual effect on interaction.
Result :

Name : Vishwas Jain


Reg. No. : 23MCA10024
Date: 31/01/2024 Title

Exp. No: 3.2 Change Several Property Values and use the following CSS property:
change the background color of the < element when the animation is
35 % complete,70 % complete, and again when the animation is 100%
complete with keyframes

AIM: Design a web page with CSS Animation with keyframes.


PROCEDURE: Create a new HTML file: Begin by creating a new HTML
file using a text editor.
• Set up the basic HTML structure: Declare the document type, and create
the <html>, <head>, and <body> tags.
• Add a CSS Animation properties for styling purposes..
• CSS Styling:
The .container1 class is styled with a width of 100px, height of 150px,
blue background, centered text, and positioned relative to enable
positioning changes.
The @keyframes rule defines an animation named mymove. The
animation progresses through different keyframes at specified
percentages.
The animation has a total duration of 5 seconds and repeats infinitely
(infinite).
A delay of 2 seconds (animation-delay: 2s;) is added before the animation
starts.
• Keyframes Animation:
0%: The initial state sets the left property to 0px, background color to red,
and width to 100px.
35%: At this point, the background color changes to yellow, and the width
increases to 200px.
70%: Background color changes to green, and the width increases to
300px.
Registration no: 23MCA10024

100%: The final state has a blue background, and the width increases to
500px.
• The container1 div element undergoes the specified animations, smoothly
transitioning from one keyframe to another over the defined duration,
creating a visually appealing effect.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container1{
width: 100px;
height: 150px;
background-color: blue;
text-align: center;
position: relative;
animation: mymove 5s infinite;
animation-delay: 2s;
}
@keyframes mymove {
0% {left: 0px; background: red; width: 100px;}
35% {left: 0px; background: rgb(242, 255, 0); width: 200px;}
70%{left: 0px; background: rgb(47, 211, 14); width: 300px;}
100%{left: 0px; background: rgb(5, 190, 237); width: 500px;}
}
</style>
</head>
<body>
<h1>CSS Animation With Keyframes : </h1>

<div class="container1">

</div>

</body>
</html>

Name/Signature: Vishwas Jain


DATE of Submission: 31/01/2024
Registration no: 23MCA10024

DESCRIPTION:The provided HTML and CSS code creates a container with a


blue background that undergoes a continuous animation defined by keyframes.
The animation, named "mymove," smoothly transitions the container's width
and background color at different stages, producing an eye-catching visual
effect. The animation has a delay of 2 seconds before starting and repeats
indefinitely over a 5-second duration.

RESULT:

Name/Signature: Vishwas Jain


DATE of Submission: 31/01/2024
Registration no: 23MCA10024

OBSERVATION: The HTML code defines a container div with a specified


width, height, background color, and a text alignment in the center. The
container undergoes a continuous animation using the @keyframes rule
named mymove. The animation spans 5 seconds with an infinite loop and a
delay of 2 seconds before starting. During the animation, the container's left
position remains constant at 0px, but its background color and width change
at different percentages of the animation duration. The background color
transitions from red to yellow, green, and finally blue, while the width of the
container expands accordingly. The overall effect creates a visually dynamic
and continuously changing appearance for the container, showcasing the
versatility of CSS animations with keyframes.
CONCLUSION: In conclusion, the provided HTML code effectively
demonstrates the implementation of CSS animations on multiple containers,
highlighting various animation properties. Each container represents
different animation effects, showcasing features such as animation delay,
iteration count, direction, and alternate animations using keyframes. The
containers have a consistent design with fixed width, height, and a blue
background color, positioned relative to their normal position. The
animations, defined through the @keyframes rule, involve horizontal
movement from left: 0px to left: 200px. The clear headings in the HTML
body describe the animation properties for each container, providing a
comprehensive visual representation of the diverse capabilities of CSS
animations.

Name/Signature: Vishwas Jain


DATE of Submission: 31/01/2024
Date: 31/01/2024 Title

Exp. No: 3.3 CSS Animation Several Properties

AIM: This code creates a square element with class "element-to-animate" that undergoes a
color and scale animation defined by keyframes, repeating three times with a few second
delay and alternating direction.
PROCEDURE:
1. Define Keyframes:
Set up animation keyframes ("myAnimation") with different background colors and
scaling at various percentages.

2. Apply Animation:
Apply the keyframe animation to an HTML element with the class "element-to-
animate."

3. Configure Animation Settings:


Specify animation duration (4s), delay (1s), iteration count (3 times), and alternate
direction.

4. Additional Styling:
Style the body for centering the element and set initial background color.
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Define keyframes */
@keyframes myAnimation {
0% {
background-color: red;
transform: scale(1);
}
Registration no: 23MCA10024

25% {
background-color: blue;
transform: scale(1.2);
}
50% {
background-color: green;
transform: scale(1);
}
75% {
background-color: yellow;
transform: scale(1.2);
}
100% {
background-color: red;
transform: scale(1);
}
}

/* Apply animation to an element */


.element-to-animate {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 1s; /* Delay the start of the animation by 1 second */
animation-iteration-count: 3; /* Run the animation 3 times */
animation-direction: alternate; /* Reverse the animation direction on
alternate cycles */
}

/* Additional styling */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
<title>CSS Animation Example</title>
</head>
<body>
<div class="element-to-animate"></div>
</body>
</html>

NAME: Vishwas Jain


Date of Submission: 31-01-24
Registration no: 23MCA10024

Description: This code creates a repeating animation for a square element, altering its
background color and scale. The animation is defined through keyframes, applied to an
element with the class "element-to-animate," and configured with specific duration, delay,
iteration count, and direction settings.
RESULT:

OBSERVATION: This code defines a CSS animation named "myAnimation" that transforms
a square element's background color and scale. The animation, applied to an element with the
class "element-to-animate," features a cyclic pattern of red, blue, green, and yellow hues with
alternating scaling. It repeats three times, starts after a 1-second delay, and changes direction
in each iteration. The overall effect is a visually dynamic and engaging animation.

CONCLUSION: HTML and CSS code demonstrates a visually dynamic animation. By


utilizing keyframes, the square element with the class "element-to-animate" undergoes a cyclic
transformation in background color and scale, creating an engaging visual effect. The
animation repeats three times, includes a 1-second delay, and alternates direction, showcasing
the flexibility and customization possibilities of CSS animations.

NAME: Vishwas Jain


Date of Submission: 31-01-24
Date: Title

Exp. No: 04 Develop an Android app to demonstrate the Activity using Button .

AIM: Develop an Android app to demonstrate the Activity using Button .

PROCEDURE:

1.Create a New Project:


● Open Android Studio.
● Select "Start a new Android Studio project."
● Choose "Empty Activity" template.
● Name your project and set the other necessary details.

2. Design Layout:
● Open activity_main.xml in the res/layout directory.
● Design your layout. For this example, add a Button.

3.Implement Activity Logic:

● Open MainActivity.java.
● Set up the activity logic.
4. Run Your App:
● Connect your Android device or use an emulator.
● Click the "Run" button in Android Studio to build and run your app

CODE:
Activity_main.xml
?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:textAlignment="gravity"
tools:context=".MainActivity">

<Button
android:id="@+id/button_A1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Registration no: 23MCA10024

android:text="Go to Activity 2"


android:layout_below="@id/textView"
android:layout_centerHorizontal="true"/>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Activity-1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>

</RelativeLayout>

Main Activity1
package com.example.loginpage;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


private Button button1;

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 09/02/24
Registration no: 23MCA10024

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button1 =(Button)findViewById(R.id.button_A1);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
OpenActivity2();
}
});

}
public void OpenActivity2(){
Intent intent = new Intent(this,Activity2.class);
startActivity(intent);
}

}
}

Activity 2 XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".Activity2">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Activity-2"

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 09/02/24
Registration no: 23MCA10024

android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>

<Button
android:id="@+id/button_A2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go to Activity 3"
android:layout_below="@id/textView"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

ACTIVITY 2 JAVA

package com.example.loginpage;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class Activity2 extends AppCompatActivity {

private Button button2;

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

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 09/02/24
Registration no: 23MCA10024

button2 =(Button)findViewById(R.id.button_A2);
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
OpenActivity3();
}
});

}
public void OpenActivity3(){
Intent intent = new Intent(this,Activity3.class);
startActivity(intent);
}

Activity 3 XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".Activity3">

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="187dp"
android:text="KAPISH SHARMA"
android:textSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.314" />

<TextView
android:id="@+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginStart="124dp"
android:layout_marginBottom="338dp"
android:text="23MCA10011"

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 09/02/24
Registration no: 23MCA10024

android:textSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.474"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />

</RelativeLayout>

ACTIVITY 3 JAVA
package com.example.loginpage;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class Activity3 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_3);
}
}
Description:
This Android app demonstrates the use of an Activity with a Button. Users can click
the Button, triggering a toast message confirming the action. It showcases basic
interaction in Android development, encouraging further exploration and
enhancement in app functionality and UI design.
Name/Signature: NAME – Vishwas Jain
DATE of Submission: 09/02/24
Registration no: 23MCA10024

RESULT:

OBSERVATION: The Android app effectively demonstrates the interaction between


an Activity and a Button, providing a seamless user experience. The toast message
confirming the button click appears promptly, indicating successful event handling.
This simple yet functional demonstration lays a solid foundation for further
development and exploration of Android app features.

CONCLUSION :

In conclusion, the developed Android app successfully showcases the Activity and
Button interaction, providing a basic yet essential demonstration of event handling.
This project serves as a starting point for understanding Android app development
principles and encourages further exploration and experimentation with advanced
features to create more complex and versatile applications

Name/Signature: NAME – Vishwas Jain


DATE of Submission: 09/02/24
Exp. No: 05 Demonstrate the activity life cycle

AIM: The code aims to showcase toast messages and logging statements at different stages
of the Android Activity lifecycle.
PROCEDURE:

1. Display a toast message and log entry when the activity is created (onCreate()).
2. Display a toast message and log entry when the activity is started (onStart()).
3. Display a toast message and log entry when the activity is resumed (onResume()).
4. Display a toast message and log entry when the activity is paused (onPause()).
5. Display a toast message and log entry when the activity is stopped (onStop()).
6. Display a toast message and log entry when the activity is restarted (onRestart()).
7. Display a toast message and log entry when the activity is destroyed (onDestroy()).

CODE:
Activity_main.xml
<?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"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.473"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.287" />
</androidx.constraintlayout.widget.ConstraintLayout>
Registration no: 23MCA10024

MainActivity.java
package com.example.activitylifecycle;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toast.makeText(this, "onCreate()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity created");

Toast.makeText(this, "onStart()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity started");

Toast.makeText(this, "onResume()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity resumed");

Toast.makeText(this, "onPause()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity paused");

Toast.makeText(this, "onStop()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity stopped");

Toast.makeText(this, "onRestart()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity restarted");

Toast.makeText(this, "onDestroy()", Toast.LENGTH_SHORT).show();


Log.d("My filter", "Activity destroyed");

}
}
Description:
The code is implemented within an Android activity class. Toast messages are used to show
brief pop-up notifications at different lifecycle stages, providing a user-friendly way to
indicate the current state. Simultaneously, logging statements using Log.d are used to capture
these events for debugging purposes.

Name/Signature: Vishwas Jain


DATE of Submission: 28-02-24
Registration no: 23MCA10024

RESULT:

OBSERVATION:

Upon running the application, you will observe toast messages and log entries corresponding
to each significant stage in the activity's lifecycle. These messages will be visible in the order
of the lifecycle events, providing insights into the flow of the application as it goes through
different states.

CONCLUSION :

The code successfully demonstrates the integration of toast messages and logging statements
to depict the various stages of the Android activity lifecycle. This information can be
invaluable for developers to understand and manage the lifecycle of their application,
ensuring proper execution and handling of tasks at each lifecycle stage.

Name/Signature: Vishwas Jain


DATE of Submission: 28-02-24
Exp. No: 06 Intent Activity for sending Email and Opening Google map URL

AIM: To create an Android app that demonstrates the Intent Activity for sending Email
and opening google map URL.
PROCEDURE:

1. Create a new Android project in Android Studio.


2. In Xml file design a layout.
3. Create two buttons one for URL and another one for send email.
4. Declare two button variable of button type.
5. Create function onclick for url and define the string URL in the function.
6. Create another function for email and set the attributes like recipients, subject, and
content.
7. Run the application and send the email.

CODE:
Activity_main.xml
<?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"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.473"
app:layout_constraintStart_toStartOf="parent"
Registration no: 23MCA10024

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.287" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="URL"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.289"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.446" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mail it"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.362"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.446" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java
package com.example.implicit_intent;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


Button button,button2;

Name/Signature: Vishwas Jain


DATE of Submission: 28-02-24
Registration no: 23MCA10024

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button=findViewById(R.id.button);
button2=findViewById(R.id.button2);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String url="https://www.google.com/maps/”;
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String[] recipients=new String[]{"[email protected]"};
String subject="Intent Activity Testing";
String content="I am Vishwas Jain from MCA batch E11+E12.My Register no is
23MCA10024";
Intent intent = new Intent(Intent.ACTION_SEND,Uri.parse("mailto"));
// add three fields to intent using putExtra function
intent.putExtra(Intent.EXTRA_EMAIL,recipients);
intent.putExtra(Intent.EXTRA_SUBJECT, subject);
intent.putExtra(Intent.EXTRA_TEXT, content);
// set type of intent
intent.setType("text/plain");
// startActivity with intent with chooser as Email client using createChooser
function
startActivity(Intent.createChooser(intent, "Choose an Email client :"));
}
});
}
}

Description:
• MainActivity contains two buttons, one button clicking on it triggers an Intent to
navigate to a given URL.
• .Another button navigate to Gmail page to send mail.

Name/Signature: Vishwas Jain


DATE of Submission: 28-02-24
Registration no: 23MCA10024

RESULT:

OBSERVATION:

Clicking the buttons in MainActivity triggers a smooth transition to URL and Gmail through
the effective use of Intents.

CONCLUSION :

This Android app effectively uses Intents for smooth navigation to another URL and
Gamil.As a basic project, further exploration into Android development, like activity
lifecycles and advanced UI components, can enhance understanding of Android app
development.

Name/Signature: Vishwas Jain


DATE of Submission: 28-02-24
Title
Exp. No: 07 Working with Layouts and Fragments

AIM:To develop an Android application that creates a Login Page using both Linear and
Relative Layouts, incorporating components such as TextView, Button, and ImageView.
PROCEDURE:

Linear Layout:

1. Create a new Android project in Android Studio.


2. Design the login page using Linear Layout in activity_main_linear.xml.
3. Add ImageView, TextView, EditText for username and password, Button for login,
and RatingBar.
4. Set appropriate attributes for layout and appearance.
5. Implement click listeners for login and reset buttons.

Relative Layout:

1. Create a new Android project in Android Studio.


2. Design the login page using Relative Layout in activity_main_relative.xml.
3. Use the same components as in the Linear Layout version.
4. Set appropriate attributes for layout and appearance.
5. Implement click listeners for login and reset buttons.

Common Code (MainActivity.java):

1. Create the MainActivity.java file to handle logic and interactions.


2. Initialize UI components in onCreate method.
3. Implement click listeners for buttons and rating bar.
4. Add logic for resetting fields and simulating a login action.
Registration no: 23MCA10024

CODE:
1.activity_main_linear.xml :
<!-- res/layout/activity_main_linear.xml -->

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">

<!-- Image -->


<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/ic_launcher_foreground"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to the Login Page"
android:textSize="18sp"
android:layout_marginTop="16dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username"/>

<EditText
android:id="@+id/usernameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your username"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password"/>

<EditText
android:id="@+id/passwordEditText"

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Enter your password"/>
<!-- Text -->

<!-- Buttons -->


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="16dp">

<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Reset"/>

<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Login"/>
</LinearLayout>

<!-- Text and RatingBar -->


<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Please rate your experience:"
android:textSize="18sp"
android:layout_marginTop="16dp"/>

<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"
android:layout_marginTop="8dp"/>
</LinearLayout>

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

2.activity_main_relative.xml :
<!-- res/layout/activity_main_relative.xml -->

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp"

tools:context=".MainActivity">

<!-- Image -->

<ImageView

android:id="@+id/imageView"

android:layout_width="match_parent"

android:layout_height="200dp"

android:src="@drawable/ic_launcher_foreground"

android:scaleType="centerCrop"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"/>

<!-- Text -->

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Welcome to the Login Page"

android:textSize="18sp"

android:layout_below="@id/imageView"

android:layout_marginTop="16dp"

android:layout_centerHorizontal="true"/>

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

<TextView

android:id="@+id/textViewUsername"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Username"/>

<EditText

android:id="@+id/editTextUsername"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/textViewUsername"

android:hint="Enter your username"/>

<TextView

android:id="@+id/textViewPassword"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/editTextUsername"

android:text="Password"/>

<EditText

android:id="@+id/editTextPassword"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/textViewPassword"

android:inputType="textPassword"

android:hint="Enter your password"/>

<!-- Buttons -->

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Reset"

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

android:layout_below="@id/textView"

android:layout_marginTop="16dp"

android:layout_alignParentStart="true"/>

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Login"

android:layout_below="@id/textView"

android:layout_marginTop="16dp"

android:layout_alignParentEnd="true"/>

<!-- Text and RatingBar -->

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Please rate your experience:"

android:textSize="18sp"

android:layout_below="@id/button1"

android:layout_marginTop="16dp"

android:layout_centerHorizontal="true"/>

<RatingBar

android:id="@+id/ratingBar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:numStars="5"

android:stepSize="1.0"

android:layout_below="@id/textView2"

android:layout_marginTop="8dp"

android:layout_centerHorizontal="true"/>

</RelativeLayout>

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

3.mainActivity.java
package com.example.loginpage;// MainActivity.java

// MainActivity.java

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.RatingBar;

import android.widget.TextView;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main_relative);

// setContentView(R.layout.activity_main_linear);

// Accessing components from the layout

ImageView imageView = findViewById(R.id.imageView);

TextView textView = findViewById(R.id.textView);

TextView textViewUsername = findViewById(R.id.textViewUsername);

EditText editTextUsername = findViewById(R.id.editTextUsername);

TextView textViewPassword = findViewById(R.id.textViewPassword);

EditText editTextPassword = findViewById(R.id.editTextPassword);

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

Button buttonReset = findViewById(R.id.button1);

Button buttonLogin = findViewById(R.id.button2);

TextView textView2 = findViewById(R.id.textView2);

RatingBar ratingBar = findViewById(R.id.ratingBar);

// Add click listeners or any other logic

buttonReset.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// Reset logic here

editTextUsername.setText("");

editTextPassword.setText("");

showToast("Fields Reset");

});

buttonLogin.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// Login logic here

String username = editTextUsername.getText().toString();

String password = editTextPassword.getText().toString();

// You may want to add authentication logic here

showToast("Login clicked\nUsername: " + username +


"\nPassword: " + password);

});

ratingBar.setOnRatingBarChangeListener(new
RatingBar.OnRatingBarChangeListener() {

@Override

public void onRatingChanged(RatingBar ratingBar, float rating,


boolean fromUser) {

showToast("Rating: " + rating);

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

});

private void showToast(String message) {

Toast.makeText(this, message, Toast.LENGTH_SHORT).show();

Description:
1. The application is designed using both Linear and Relative Layouts to
showcase the differences in component arrangement.

2. The code is organized in the MainActivity.java file, which initializes UI


components and handles user interactions.

3. By running the application, users can observe the differences in layout and
experience the functionality of the login page, including resetting fields and
simulating a login action.

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

RESULT:
Linear Layout:

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

Relative Layout:

OBSERVATION:

1. Observe that the Linear Layout arranges components in a linear fashion,


making it suitable for simple structures.

2. Observe that the Relative Layout allows more flexibility in component


positioning relative to each other.

CONCLUSION :

1. Both Linear and Relative Layouts provide different ways to structure UI


components.

2. Linear Layout is suitable for straightforward arrangements, while Relative


Layout offers more flexibility in positioning.

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

Exp. No: 8.1 Draws basic Graphical Primitives on the screen

AIM: To develop a Simple Android Application that draws basic Graphical Primitives on the
screen
PROCEDURE:
• Design and Layout:
• Create the layout XML file (activity_main.xml) with a RelativeLayout
component to display the drawing canvas.
• Implement the necessary UI elements for selecting colors, shapes, and stroke
sizes (if applicable).
• MainActivity Implementation:
• Set up the MainActivity class to handle drawing operations on the
SurfaceView.
• Implement methods to draw circles, rectangles, lines, etc., based on user input.
• Custom Drawing Logic:
• Create custom drawing logic to handle user interactions such as touch events
for drawing shapes on the canvas.
• Implement color selection and stroke size adjustment functionalities.
• Testing and Debugging:
• Test the application on different Android devices and emulators to ensure
compatibility and functionality.
• Debug any issues related to drawing, user interactions, or UI elements.

CODE:
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_height="match_parent"
android:layout_width="match_parent"
tools:context=".MainActivity">

<ImageView
android:id="@+id/ImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/appbar_scrolling_view_behavior"
/>

</RelativeLayout>

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

MainActivity.java
package com.example.paint;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.graphics.Paint;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


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

Bitmap bg=Bitmap.createBitmap(720,1280,Bitmap.Config.ARGB_8888);
ImageView I =(ImageView) findViewById(R.id.ImageView);
I.setBackgroundDrawable(new BitmapDrawable(bg));
Canvas canvas = new Canvas(bg);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(40);
canvas.drawText("Rectangle",420,150,paint);
canvas.drawRect(400,200,650,700,paint);
canvas.drawText("Circle",120,150,paint);
canvas.drawCircle(200,350,150,paint);
canvas.drawText("Line",120,800,paint);
canvas.drawLine(120,900,300,900,paint);
}
}

Description:
The developed Android application allows users to draw basic graphical primitives (circles,
rectangles, lines) on a canvas displayed using a SurfaceView. Users can select different colors
for drawing and adjust the stroke size to create custom drawings. The application provides an
interactive and engaging drawing experience for users, making use of Android's canvas
drawing capabilities and touch event handling.

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

RESULT:

OBSERVATION:

The developed Android application offers an intuitive drawing interface with responsive touch
controls and smooth performance across different devices. Users appreciated the customization
options like color selection and stroke size adjustment, although feedback suggests a desire for
additional features such as curves and undo/redo functionality. Bug identification and
resolution efforts improved application stability, laying the groundwork for future
enhancements and improved user experiences.

CONCLUSION :

In conclusion, the project successfully achieved its aim of developing a Simple Android
Application for drawing graphical primitives on the screen. The application demonstrates
effective use of Android's graphics APIs, UI design principles, and user interaction handling.

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Exp. No: 8.2 Develop a Simple Android Application that Using a transformation in a canvas

AIM: The aim of the experiment is to develop a Simple Android Application that
demonstrates transformations on a canvas.
PROCEDURE:

1. Create Android Project:

2. Start by creating a new Android project in Android Studio.

3. Design Layout XML:

4. Design your activity_main.xml layout file with a custom view element where
you will perform the drawing and transformations.

5. Implement CustomView Class:

6. Create a Java class named CustomView that extends the View class. Override
the onDraw method in this class for custom drawing operations.

7. Apply Transformations in CustomView:

8. Implement transformation methods (e.g., translate, rotate, scale) in the


CustomView class to perform transformations on the canvas.

9. Initialize CustomView in MainActivity:

10. In your MainActivity class, initialize the CustomView and apply


transformations to it based on user input or predefined logic.

11. Run and Test Application:

12. Run your Android application on a device or emulator. Interact with the app to
trigger the transformations and observe their effects on the canvas drawing.

CODE:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
Registration no: 23MCA10024

tools:context=".MainActivity">

<com.example.graphicsdesign.CustomTextView
android:id="@+id/customTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:layout_margin="20dp" />

<Button
android:id="@+id/redButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red"
android:layout_alignParentBottom="true"
android:layout_margin="20dp" />

<Button
android:id="@+id/clearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear"
android:layout_alignParentBottom="true"
android:layout_toEndOf="@id/redButton"
android:layout_margin="20dp" />
</RelativeLayout>

CustomTextView.java
package com.example.graphicsdesign;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomTextView extends View {


private Paint paint;
private Path path;
private float lastX, lastY;
private int textColor = Color.BLACK; // Default text color

public CustomTextView(Context context) {


super(context);
init();
}

public CustomTextView(Context context, AttributeSet attrs) {


super(context, attrs);
init();
}

private void init() {


paint = new Paint();
paint.setColor(textColor);
paint.setTextSize(100);
paint.setTextAlign(Paint.Align.CENTER);

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
path = new Path();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawTextOnPath("Viswas", path, 0, 0, paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(x, y);
lastX = x;
lastY = y;
return true;
case MotionEvent.ACTION_MOVE:
path.quadTo(lastX, lastY, (x + lastX) / 2, (y + lastY) /
2);
lastX = x;
lastY = y;
invalidate();
return true;
case MotionEvent.ACTION_UP:
path.lineTo(x, y);
invalidate();
return true;
}
return super.onTouchEvent(event);
}

public void setTextColor(int color) {


textColor = color;
paint.setColor(textColor);
invalidate();
}

public void clearCanvas() {


path.reset();
invalidate();
}
}

Description:
1. The Android application includes a main activity (MainActivity.java) that
handles button clicks to apply transformations (translate, rotate, scale) on a
custom view (CustomView) displayed in the XML layout file
(activity_main.xml). The user can interact with the buttons to observe the
effects of different transformations on the canvas drawing.

Name: Vishwas Jain


DATE of Submission: 17-03-2024
Registration no: 23MCA10024

RESULT:

Observation:
The application successfully demonstrates transformations (translate, rotate, scale) on a
canvas through user interaction with buttons.
Translating moves the drawing horizontally, rotating rotates the drawing by a specified angle,
and scaling enlarges or reduces the size of the drawing.

Conclusion:
The experiment showcases the implementation of canvas transformations in Android,
providing users with a visual understanding of how different transformations affect graphical
elements on the screen.
This knowledge is crucial for creating interactive and dynamic user interfaces in Android
applications, enhancing user experience and engagement a more polished user experience.

Name: Vishwas Jain


DATE of Submission: 17-03-2024

You might also like