A Project Report on

“STUDENT CAREERS”

Using Android – A Mobile Application

Submitted by

SHAIK SHAKEER 1009-20-143-055

D VENKATESH 1009-20-143-034
P ABHISHEK 1009-20-143-022

B. Com (Computer Applications)

Under the Guidance of
G. DEVENDER

Submitted in partial fulfilment for the award of

BACHELOR OF COMMERCE (COMPUTER APPLICATIONS)

NIZAM COLLEGE (Autonomous)

Osmania University, Hyderabad -500001
2020-2023
 DECLARATION

I hereby declare that this project report titled “Student Careers – using Android (Mobile Application) is
submitted by our team to the Department of Commerce in Nizam College, Hyderabad is bona-fide work
undertaken by our team and it is not submitted to any other University or Institution for the award of any
degree or diploma/ certificate or published any time before.

This project report is submitted in partial fulfilment of the requirement for the award of Bachelor of
Commerce Degree in Computer Applications.

Name of the Student: SHAIK SHAKEER

Date: Signature
 ACKNOWLEDGMENT

I am grateful and thankful to Prof. BHEEMA NAIK, the Principal of Nizam College and Dr. P
SRINIVAS REDDY, Head of Department of Commerce in Nizam College.

I express my sincere thanks to my supervisor Mr. G. Devender, for his valuable guidance, suggestions
and being instrumental in giving shape to this project.

I would like also to thank Nizam College for giving me the opportunity to work on the project report,
moreover, I would like to thank my friends who also played a pivotal role by giving me advices.

Last but not least, I would like to express my gratitude and thanks to all who directly and indirectly
helped me in collecting the necessary required information/ Data for this Project Report.

Date: Signature of the Candidate

 Table of Contents

Sl.no Title Pg no’s

Chapter 1: Introduction to Mobile

1
Application

2 Chapter 2: Introduction to Web Technology

3 Chapter 3: Setup Android Studio in System

4 Chapter 4: Development of Student Careers

5 Chapter 5: Student Careers(A Student Guide)

6 Results

7 Conclusion

8 Reference

9 Webliography
 Chapter 1:
Introduction to Mobile Application

1
1.1 Introduction to Mobile Application:
Mobile application development is the process to making software for smartphones and digital assistants,
most commonly for Android and iOS. The software can be preinstalled on the device, downloaded from a
mobile app store or accessed through a mobile web browser. The programming and markup languages
used for this kind of software development include Java, Swift, C# and HTML5.
A mobile application or app is a computer program or software application designed to run on a mobile
device such as a phone, tablet, or watch. Mobile applications often stand in contrast to desktop
applications which are designed to run on desktop computers, and web applications which run in mobile
web browsers rather than directly on the mobile device. The term "app", short for "software application",
has since become very popular; in 2010, it was listed as "Word of the Year" by the American Dialect
Society.
Mobile applications frequently serve to provide users with similar services to those accessed on PCs.
Despite the fact that applications may have avoided performing multiple tasks due to the restricted
equipment assets of the early cell phones, their explicitness is presently essential for their attractive
quality since they permit purchasers to hand-pick what their gadgets can do. An analyst report estimates
that the app economy creates revenues of more than €10 billion per year within the European Union,
while over 529,000 jobs have been created in 28 EU states due to the growth of the app market.

1.2 Types of Applications:

Mobile applications may be classified by numerous methods. A common scheme is to
distinguish native, web-based, and hybrid apps.
a) Native app: Native apps are built for a specific mobile operating system, usually iOS or
Android. Native apps enjoy better performance and a more finely-tuned user interface (UI),
and usually need to pass a much stricter development and quality assurance process before
they are released.
b) Web-based app: A web-based app is implemented with the standard web technologies of
HTML, CSS, and JavaScript. Internet access is typically required for proper behavior or being
able to use all features compared to offline usage. Most, if not all, user data is stored in the
cloud.
c) Hybrid app: The concept of the hybrid app is a mix of native and web-based apps. Apps
developed using Apache Cordova, Flutter, Xamarin, React Native, Sencha Touch, and other
frameworks fall into this category. These are made to support web and native technologies
across multiple platforms. Moreover, these apps are easier and faster to develop. It involves
use of single codebase which works in multiple mobile operating systems.

2
1.3 The History of Mobile Apps:
If we stride back into the traditional days of mobile app design and development, then, we
can probably find that the first used apps were mostly the monthly calendars, calculators and even games
that were developed in the Java framework. But, interestingly, the first-ever known smartphone was
launched by IBM in the year 1993. And, it came with features such as the contact book, calendar, world
clock and calculator.

A few years later, in the year 2002, the next smartphone, i.e., the blackberry smartphone
was launched. This was one of the major accomplishments in the field of the mobile app developed,
marking the significance of Blackberry Limited also known as Research in Motion Limited (RIM). This
was what brought about the integration of the concept known as wireless email.

Interesting facts about the mobile phones that were used at first:
 Users were forced to charge their mobile phones for not less than 10 hours as the battery would go
dead after some time. And, the users could make a call for hardly 30 minutes in a day as it had to
be kept for charging.
 Network and range issues were another concern as it would not allow people to make calls to
more than a few people in their close vicinities.

1.4 Development:
Developing apps for mobile devices requires considering the constraints and features of
these devices. Mobile devices run on battery and have less powerful processors than personal computers
and also have more features such as location detection and cameras. Developers also have to consider a
wide array of screen sizes, hardware specifications and configurations because of intense competition in
mobile software and changes within each of the platforms (although these issues can be overcome with
mobile device detection).

Mobile application development requires the use of specialized integrated development

environments. Mobile apps are first tested within the development environment using emulators and later
subjected to field testing. Emulators provide an inexpensive way to test applications on mobile phones to
which developers may not have physical access. Some of the Integrated Development Environment for
Android Applications are AIDE, DroidScript, CppDroid, Android Web Developer, Python Suite, Java
Suite, Eclipse, Arduino, Visual Studio, Unreal Engine, Android Studio, Corona IDE, PhoneGap etc...
3
Mobile user interface (UI) Design is also essential. Mobile UI considers constraints and contexts, screen,
input and mobility as outlines for design. The user is often the focus of interaction with their device, and
the interface entails components of both hardware and software. User input allows for the users to
manipulate a system, and device's output allows the system to indicate the effects of the users'
manipulation. Mobile UI design constraints include limited attention and form factors, such as a mobile
device's screen size for a user's hand. Mobile UI contexts signal cues from user activity, such as location
and scheduling that can be shown from user interactions within a mobile application. Overall, mobile UI
design's goal is primarily for an understandable, user-friendly interface.

Mobile UIs, or front-ends, rely on mobile back-ends to support access to enterprise systems. The mobile
back-end facilitates data routing, security, authentication, authorization, working off-line, and service
orchestration. This functionality is supported by a mix of middleware components including mobile app
servers, Mobile Backend as a service (MBaaS), and SOA infrastructure.

1.5 Distribution:
1.5.1 What is app distribution?
App distribution is the process of releasing an app to a broad set of users in order to
promote app engagement and usage. Often, app marketers will seek out app distribution channels and
platforms as a way to advertise their app - either organically or paid.

1.5.2 Five common app distribution channels

It’s much easier for advertisers to release their apps to thousands if not millions of users in one go
using an app distribution channel or platform. There are many app distributions channels available, and
they can all be used concurrently. Let’s take a look at a few examples.
App stores
Likely, the most common app distribution channel today is an app store - since they reach a wide
global audience, and don’t require budget. Think of an app store like a marketplace, in which app
marketers distribute and release their apps, and app consumers can browse and install the apps as
they choose.
Social media
In addition to app stores, social media is another free app distribution channel for marketers.
Using this channel, marketers create free accounts for their app on Facebook, Instagram, Twitter,
LinkedIn, WeChat, or any other social media platform relevant to their audience, and post relevant
content.

4
 It usually takes some time to amass a decent enough following on social media accounts to
make an impact in terms of app distribution. However, there are many tools’ marketers can use to
increase their social media output, such as scheduling platforms like Buffer and Hootsuite.
Email marketing
Sending out email newsletter campaigns to leads and prospects is a highly effective channel for
app distribution, as users have likely already expressed interest in the app - the reason why they’re
receiving the email. In fact, going off the above point, app marketers can use social media to
collect email addresses, requesting their followers to sign up to receive their newsletter. Then,
every so often, sendoff newsletters to the email distribution list encouraging app installs,
summarizing new app updates, and sharing additional relevant content.
ironSource Aura
By using ironSource Aura to distribute their apps, app marketers are able to run app advertising
campaigns directly on mobile devices. Aura connects app marketers with more than 130 million
users across more than 45 countries, through its partnerships with premium manufacturers and
carriers like Sprint, T-Mobile, Orange, Samsung, Huawei, Xiaomi and more.
Mobile ad networks
App marketers can also use mobile ad networks to distribute their apps via paid user acquisition
campaigns. Put simply, a mobile ad network is an intermediary channel that connects advertisers
and publishers - app advertisers pay the ad network to serve their ads, and the ad network
distributes the ads to end users by publishing the ads on other apps, which ultimately earn revenue
for showing the ad. There are many mobile ad networks, including ironSource, which app
advertisers use to acquire high-impact users.

1.5.3 Top five app distribution platforms

Let’s dive deeper into the app store distribution channel first mentioned - app stores. There are dozens of
third-party app stores, each of which function as an effective app distribution platform for marketers to
make their apps available.
Google Play Store
The Google Play Store is available on all Android devices, and distributes 2.8 million apps
worldwide - making it the biggest app distribution platform on the market. The Play Store is split
by apps and games, and can be further broken down into app categories, editor’s
recommendations, and most popular.
Apple App Store

5
 Developed by Apple, and only available on iOS devices, the App Store distributes more than 2.2
million apps to users around the world. The App Store is divided into 3 tabs - Today, Games, and
Apps. The Today tab functions like a news feed and is updated with fresh content each day by
Apple’s editors, including the Game of the Day, App of the Day, and app starter packs. The
Games tab and Apps tab each aggregate the most popular free games/apps, paid games/apps and
editor picks.
Amazon Appstore
The Amazon Appstore is only available on Android devices, and is preloaded onto Fire tablets and
phones. It distributes 487K apps - far less than the Play Store and App Store but still considered a
leading app store.
Samsung Galaxy Store
The Samsung Galaxy Store comes preinstalled on all devices manufactured by Samsung. In
addition to distributing Samsung owned and operated apps, the Samsung Galaxy Store also
distributes apps by third-party app developers.
Huawei AppGallery
The official distribution platform of Huawei, AppGallery is preloaded on all devices manufactured
by Huawei, and distributes thousands of apps to its users. AppGallery is the top 3 biggest and
most popular app store in China, with 122 million monthly active users.

1.5.4 App distribution strategy

Follow the 4 steps below to learn how to create a strong distribution strategy for your app.
Distribute your app across multiple channels and platforms
The key to a successful app distribution strategy is widening the net and diversifying the pool -
make sure you’re not locking yourself into too few platforms and sources. Essentially, the more
channels you distribute your app on, the bigger your audience becomes, and the chances of an
install increases. That means, that in addition to publishing your app on the App Store and Play
Store, it’s wise to also run paid campaigns on ad networks and partner with a solution that runs
traffic through device manufacturers and carriers.
Turn off distribution channels that don’t perform
Running on multiple app distribution platforms, you’ll notice that some perform better than others.
If at any given time a platform that you’re paying for isn’t bringing you high volume or high
quality, turn off that channel and refocus your budget elsewhere. There’s no need to continue
paying for a channel that doesn’t deliver high performance or ROI. It’s important to constantly
evaluate the strength or your distribution platforms, and test their performance against each other.

6
 Optimize each channel frequently
In addition to testing distribution channels, don’t forget to optimize the performance of the
distribution channel itself. That means running app store optimization on the app stores - such as
improving the screen shots, keywords, and videos; working closely with tech partners to improve
user acquisition campaigns - optimizing the bid and analyzing the ad sources; analyzing the best
times of day to post social media; etc.
Focus on niche app distribution channels
The popular app distribution channels we touched on earlier are a good start, but also make sure
you’re not missing out on more niche ones - as this is where the quality lies. Though volume may
be low on these particular app distribution channels, the traffic is much more targeted, which will
significantly increase the quality of the consumer and their intent to be loyal users over the long-
term. There are, for example, ad networks and social media groups with heavy supply in certain
countries, demographics, and interests. If you know the target audience of your app is women
between the ages of 18-24, be sure to distribute your apps on platforms that target this persona.

1.6 App wrapping vs. Native app management:

Especially when employees "bring your own device" (BYOD), mobile apps can be a
significant security risk for businesses, because they transfer unprotected sensitive data to the Internet
without knowledge and consent of the users. Reports of stolen corporate data show how quickly corporate
and personal data can fall into the wrong hands. Data theft is not just the loss of confidential information,
but makes companies vulnerable to attack and blackmail.

Professional mobile application management helps companies protect their data. One
option for securing corporate data is app wrapping. But there also are some disadvantages like copyright
infringement or the loss of warranty rights. Functionality, productivity and user experience are
particularly limited under app wrapping. The policies of a wrapped app can't be changed. If required, it
must be recreated from scratch, adding cost. An app wrapper is a mobile app made wholly from an
existing website or platform, with few or no changes made to the underlying application. The "wrapper"
is essentially a new management layer that allows developers to set up usage policies appropriate for app
use.

1.7 Features of Application:

 Simplicity
 Speed

7
  Good image resolution
 Flexibility
 Security
 Updates

1.8 Importance of Mobile Apps:

The importance of mobile phones in our everyday life and activities is undeniably
unending. This is so because there is ongoing tremendous transformation in that mobile phones are no
longer the ordinary communication device it used to be. It has become the colossal point of attention for
individuals and businesses alike, courtesy of the various incredible features and opportunities that mobile
phones offer. The cumulative progress of mobile technology, the availability and access to high-speed
internet and the remarkable communicative interface in these devices results into a whole level of new
and innovative experience mobile computing. This is made possible through the development of mobile
applications (mobile apps).

1.9 Exploring XML with Android Studio:

XML is a software- and hardware-independent tool for storing and transporting data. Maybe it is a little
hard to understand, but XML does not DO anything. Someone must write a piece of software to send,
receive, store, or display it.
o XML stands for eXtensible Markup Language;
o XML is a markup language much like HTML;
o XML was designed to store and transport data;
o XML was designed to be self-descriptive;
o XML is a W3C Recommendation.

8
1.9.1 The Difference Between XML and HTML:

HTML XML

HTML stands for Hyper Text Markup XML stands for extensible Markup Language.
Language.

HTML is static. XML is dynamic.

HTML is a markup language. XML provides framework to define markup

languages.

HTML can ignore small errors. XML does not allow errors.

HTML is not Case sensitive. XML is Case sensitive.

HTML tags are predefined tags. XML tags are user defined tags.

There are limited number of tags in HTML. XML tags are extensible.

HTML does not preserve white spaces. White space can be preserved in XML.

HTML tags are used for displaying the data. XML tags are used for describing the data not for
displaying.

In HTML, closing tags are not necessary. In XML, closing tags are necessary.

HTML is used to display the data. XML is used to store data.

HTML does not carry data it just displays it. XML carries the data to and from database.

Many computer systems contain data in incompatible formats. Exchanging data between
incompatible systems (or upgraded systems) is a time-consuming task for web developers. Large amounts
of data must be converted, and incompatible data is often lost. XML stores data in plain text format. This
provides a software- and hardware-independent way of storing, transporting, and sharing data.
XML also makes it easier to expand or upgrade to new operating systems, new applications, or new
browsers, without losing data.
1.9.2 XML Syntax:
XML syntax refers to the rules that determine how an XML application can be written. The XML
syntax is very straight forward, and this makes XML very easy to learn.

9
 Fig 2. 1
1.9.2.1 XML Declaration:
The XML document can optionally have an XML declaration. It is written as follows −
<?xml version = "1.0" encoding = "UTF-8"?>
Where version is the XML version and encoding specifies the character encoding used in the document.
Syntax Rules for XML Declaration:
 The XML declaration is case sensitive and must begin with "<?xml>" where "xml" is written in
lower-case.
 The XML declaration strictly needs be the first statement in the XML document.

 An HTTP protocol can override the value of encoding that you put in the XML declaration.

1.9.2.2 Tags and Elements:

An XML file is structured by several XML-elements, also called XML-nodes or XML-tags. The
names of XML-elements are enclosed in triangular brackets < > as shown below −
<element>
Syntax Rules for Tags and Elements:
 Element Syntax – “Each XML-element needs to be closed either with start or with end elements.”
 Nesting of Elements – “An XML-element can contain multiple XML-elements as its children, but
the child elements must not overlap. i.e., an end tag of an element must have the same name as
that of the most recent unmatched start tag.”
 Root Element – “An XML document can have only one root element. For example, following is
not a correct XML document, because both the x and y elements occur at the top level without a
root element.”
 Case Sensitivity – “The names of XML-elements are case-sensitive. That means the name of the
start and the end elements need to be exactly in the same case.”

10
1.9.2.3 XML Attributes:
An attribute specifies a single property for the element, using a name/value pair. An XML-
element can have one or more attributes.
Syntax Rules for XML Attributes:
 Attribute names in XML (unlike HTML) are case sensitive. That is, HREF and href are considered
two different XML attributes.
 Same attribute cannot have two values in a syntax.
 Attribute names are defined without quotation marks, whereas attribute values must always appear
in quotation marks.

1.9.2.4 XML References:

References usually allow you to add or include additional text or markup in an XML document.
References always begin with the symbol "&" which is a reserved character and end with the symbol ";".
 Entity References − An entity reference contains a name between the start and the end
delimiters. For example: &amp; where amp is name. The name refers to a predefined string of
text and/or markup.
 Character References − These contain references, such as &#65; contains a hash mark (“#”)
followed by a number. The number always refers to the Unicode code of a character. In this
case, 65 refers to alphabet "A".

1.9.2.5 XML Text:

The names of XML-elements and XML-attributes are case-sensitive, which means the name of
start and end elements need to be written in the same case. To avoid character encoding problems, all
XML files should be saved as Unicode UTF-8 or UTF-16 files. Whitespace characters like blanks, tabs
and line-breaks between XML-elements and between the XML-attributes will be ignored.
1.9.3 XML comments:
The comments are added as notes or lines for understanding the purpose of an XML code.
Comments can be used to include related links, information, and terms. They are visible only in the
source code; not in the XML code. Comments may appear anywhere in XML code. A comment starts
with <!-- and ends with -->. You can add textual notes as comments between the characters. You must
not nest one comment inside the other.

11
1.9.4 XML – Encoding:
Encoding is the process of converting Unicode characters into their equivalent binary
representation. When the XML processor reads an XML document, it encodes the document depending
on the type of encoding. Hence, we need to specify the type of encoding in the XML declaration.
UTF stands for UCS Transformation Format, and UCS itself means Universal Character Set. The
number 8 or 16 refers to the number of bits used to represent a character. They are either 8(1 to 4 bytes)
or 16(2 or 4 bytes). For the documents without encoding information, UTF-8 is set by default.

1.9.5 XML in Android:

XML tags define the data and used to store and organize data. It’s easily scalable and simple to
develop. In Android, the XML is used to implement UI-related data, and it’s a lightweight markup
language that doesn’t make layout heavy. XML only contains tags, while implementing they need to be
just invoked.

1.9.5.1 Basics of User Interface (UI):

Basically, in Android XML is used to implement the UI-related data. So, understanding the core
part of the UI interface with respect to XML is important. The User Interface for an Android App is built
as the hierarchy of main layouts, widgets. The layouts are ViewGroup objects or containers that control
how the child view should be positioned on the screen. Widgets here are view objects, such as Buttons
and text boxes.

Fig 2. 2

12
 Declaring your UI in XML allows you to separate the presentation of your app from the code that
controls its behavior. Using XML files also makes it easy to provide different layouts for different screen
sizes and orientations. The Android framework gives you the flexibility to use either or both of these
methods to build your app's UI. For example, you can declare your app's default layouts in XML, and
then modify the layout at runtime.

1.9.5.2 Layout:
A layout defines the structure for a user interface in your app, such as in an activity. All elements
in the layout are built using a hierarchy of View and ViewGroup objects. A View usually draws
something the user can see and interact with. The types of Layouts in Android are follows:
1. Linear Layout: We use this layout to place the elements in a linear manner. A Linear manner means
one element per line. This layout creates various kinds of forms on Android. In this, arrangement of
the elements is in a top to bottom manner. This can have two orientations:
a. Vertical Orientation – It is shown above where the widgets such as TextViews, and all in a
vertical manner.
b. Horizontal Orientation – It is shown above where the widgets such as TextViews, and all in a
horizontal manner.

2. Relative Layout: This layout is for specifying the position of the elements in relation to the other
elements that are present there. In the relative layout, alignment of the position of the elements to the
parent container is possible. To define it in such a way, we write the following:
 android:layout_alignParentTop= “true”
 android:layout_alignParentLeft= “true”

3. Frame Layout: FrameLayout is designed to block out an area on the screen to display a single item.
Generally, FrameLayout should be used to hold a single child view, because it can be difficult to
organize child views in a way that's scalable to different screen sizes without the children
overlapping each other.

4. Constraint Layout: ConstraintLayout provides you the ability to completely design your UI with the
drag and drop feature provided by the Android Studio design editor. It helps to improve the UI
performance over other layouts. With the help of ConstraintLayout, we can control the group of
widgets through a single line of code.

13
 5. Drawer Layout: DrawerLayout acts as a top-level container for window content that allows for
interactive "drawer" views to be pulled out from one or both vertical edges of the window. Drawer
positioning and layout is controlled using the “android:layout_gravity” attribute on child views
corresponding to which side of the view you want the drawer to emerge from: left or right (or
start/end on platform versions that support layout direction.)

1.9.5.2.1 Attributes of Layout:

Attributes are part of XML elements. An element can have multiple unique attributes. Attribute gives
more information about XML elements. To be more precise, they define properties of elements. An XML
attribute is always a name-value pair.
The following are the attributes for customizing a Layout while defining it:
 android:id: It uniquely identifies the Android Layout.
 android:hint: It shows the hint of what to fill inside the EditText.
 android:layout_height: It sets the height of the layout.
 android:layout_width: It sets the width of the layout.
 android:layout_gravity: It sets the position of the child view.
 android:layout_marginTop: It sets the margin of the from the top of the layout.
 android:layout_marginBottom: It sets the margin of the from the bottom of the layout.
 android:layout_marginLeft: It sets the margin of the from the left of the layout.
 android:layout_marginRight: It sets the margin of the from the right of the layout.
 android:layout_x: It specifies the x coordinates of the layout.
 android:layout_y: It specifies the y coordinates of the layout.

1.9.5.3 View:
A View is a simple building block of a user interface. It is a small rectangular box that can be
TextView, EditText, or even a button. It occupies the area on the screen in a rectangular area and is
responsible for drawing and event handling. View is a superclass of all the graphical user interface
components. The use of a view is to draw content on the screen of the user’s Android device. A view can
be easily implemented in an application using the java code. Its creation is easier in the XML layout file
of the project.

14
1.9.5.3.1 Types of Views:
A View is also known as Widget in Android. Any visual(that we can see on screen) and
interactive(with which user can interact with) is called a Widget. The types of view classes are as follows:

1. Text View: This class is used to display text on the android application screen. It also allows user
to optionally edit it. Although it contains text editing operations, the basic class does not allow
editing.

2. Edit Text: This class makes text to be editable in Android application. It helps in building the data
interface taken from any user, also contains certain features through which we can hide the data
which are confidential.

3. Image view: Image view helps to display images in an android application. Any image can be
selected, we just have to paste our image in a drawable folder from where we can access it.

4. Check Box: Checkbox is used in that applications where we have to select one option from Enco
multiple provided. Checkbox is mainly used when 2 or more options are present.

5. Radio Button: Radio button is like checkbox, but there is slight difference between them. Radio
button is a two-states button that can be either checked or unchecked.

6. Button View: This class is used to create a button on an application screen. Buttons are very
helpful in getting into a content. Android button represents a clickable push-button widget.

7. Image Button View: Image button is a button but it carries an image on it. We can put an image or
a certain text on it and when we click it provides the operations assigned to it.

1.10 Exploring JAVA with Android:

Java is a class-based, object-oriented programming language and is designed to have as few
implementation dependencies as possible. A general-purpose programming language made for developers
to write once run anywhere that is compiled Java code can run on all platforms that support Java. Java
applications are compiled to byte code that can run on any Java Virtual Machine. The syntax of Java is

15
similar to c/c++. Java makes writing, compiling, and debugging programming easy. It helps to create
reusable code and modular programs.
1.10.1 Java Terminology:
Java is the name of an island in Indonesia where the first coffee (named java coffee) was
produced. And this name was chosen by James Gosling while having coffee near his office. Note that
Java is just a name, not an acronym. Before learning Java, one must be familiar with following common
terms of Java.
1. Java Virtual Machine (JVM): This is generally referred to as JVM. There are three execution
phases of a program. They are written, compile and run the program.
 Writing a program is done by a java programmer like you and me.
 The compilation is done by the JAVAC compiler which is a primary Java compiler
included in the Java development kit (JDK). It takes the Java program as input and
generates bytecode as output.
 In the Running phase of a program, JVM executes the bytecode generated by the compiler.

2. Bytecode in the Development process: As discussed, the Javac compiler of JDK compiles the
java source code into bytecode so that it can be executed by JVM. It is saved as .class file by the
compiler. To view the bytecode, a disassembler like javap can be used.

3. Java Development Kit(JDK): While we were using the term JDK when we learn about bytecode
and JVM. So, as the name suggests, it is a complete Java development kit that includes everything
including compiler, Java Runtime Environment (JRE), java debuggers, java docs, etc. For the
program to execute in java, we need to install JDK on our computer in order to create, compile
and run the java program.

4. Java Runtime Environment (JRE): JDK includes JRE. JRE installation on our computers
allows the java program to run, however, we cannot compile it. JRE includes a browser, JVM,
applet supports, and plugins. For running the java program, a computer needs JRE.

5. Garbage Collector: In Java, programmers can’t delete the objects. To delete or recollect that
memory JVM has a program called Garbage Collector. Garbage Collectors can recollect the
objects that are not referenced. So, Java makes the life of a programmer easy by handling memory
management. However, programmers should be careful about their code whether they are using
objects that have been used for a long time. Because Garbage cannot recover the memory of
objects being referenced.
16
 6. ClassPath: The classpath is the file path where the java runtime and Java compiler look for .class
files to load. By default, JDK provides many libraries. If you want to include external libraries,
they should be added to the classpath.

Fig 3. 1
1.10.2 Difference between JDK, JRE, JVM:
Following are the important differences between JDK,JRE and JVM

17
Sr.
Key JDK JRE JVM
No.

JVM (Java Virtual Machine)

JDK (Java JRE (Java Runtime is an abstract machine that is
Development Kit) Environment) is the platform-dependent and has
is a software implementation of three notions as a
development kit JVM and is defined specification, a document
to develop as a software package that describes requirement of
applications in that provides Java JVM implementation,
1 Definition Java. In addition class libraries, along implementation, a computer
to JRE, JDK also with Java Virtual program that meets JVM
contains number Machine (JVM), and requirements, and instance,
of development other components to an implementation that
tools (compilers, run applications executes Java byte code
JavaDoc, Java written in Java provides a runtime
Debugger etc.). programming. environment for executing
Java byte code.

JDK is primarily
On other hand JRE is
used for code JVM on other hand specifies
majorly responsible
Prime execution and has all the implementations and
2 for creating
functionality prime responsible to provide these
environment for code
functionality of implementations to JRE.
execution.
development.

JDK is platform
dependent i.e., for
Like of JDK JRE is
Platform different JVM is platform
3 also platform
Independence platforms independent.
dependent.
different JDK
required.

As JDK is On other hand JRE

responsible for does not contain tools
prime such as compiler or
development so it debugger etc. Rather
JVM does not include
4 Tools contains tools for it contains class
software development tools.
developing, libraries and other
debugging and supporting files that
monitoring java JVM requires to run
18
application. the program.

JDK = Java
1.10.3 Features of Java:
1. Platform Independent: Compiler converts source code to bytecode and then the JVM executes
the bytecode generated by the compiler. This bytecode can run on any platform be it Windows,
Linux, macOS which means if we compile a program on Windows, then we can run it on Linux
and vice versa. Each operating system has a different JVM, but the output produced by all the OS
is the same after the execution of bytecode. That is why we call java a platform-independent
language.
2. Object-Oriented Programming Language: Organizing the program in the terms of collection of
objects is a way of object-oriented programming, each of which represents an instance of the
class.
The four main concepts of Object-Oriented programming are:
a. Abstraction
b. Encapsulation
c. Inheritance
d. Polymorphism
3. Simple: Java is one of the simple languages as it does not have complex features like pointers,
operator overloading, multiple inheritances, Explicit memory allocation.

4. Robust: Java language is robust which means reliable. It is developed in such a way that it puts a
lot of effort into checking errors as early as possible, that is why the java compiler is able to detect
even those errors that are not easy to detect by another programming language. The main features
of java that make it robust are garbage collection, Exception Handling, and memory allocation.

5. Secure: In java, we don’t have pointers, so we cannot access out-of-bound arrays i.e., it shows
ArrayIndexOutOfBound Exception if we try to do so. That’s why several security flaws like stack
corruption or buffer overflow are impossible to exploit in Java.

6. Distributed: We can create distributed applications using the java programming language.
Remote Method Invocation and Enterprise Java Beans are used for creating distributed
applications in java. The java programs can be easily distributed on one or more systems that are
connected to each other through an internet connection.

7. Multithreading: Java supports multithreading. It is a Java feature that allows concurrent

execution of two or more parts of a program for maximum utilization of CPU.

19
8. Portable: As we know, java code written on one machine can be run on another machine. The
platform-independent feature of java in which its platform-independent bytecode can be taken to
any platform for execution makes java portable.

9. High Performance: Java architecture is defined in such a way that it reduces overhead during the
runtime and at some time java uses Just in Time (JIT) compiler where the compiler compiles code
on-demand basics where it only compiles those methods that are called making applications to
execute faster.

10. Dynamic flexibility: Java being completely object-oriented gives us the flexibility to add classes,
new methods to existing classes and even create new classes through sub-classes. Java even
supports functions written in other languages such as C, C++ which are referred to as native
methods.

11. Sandbox Execution: Java programs run in a separate space that allows user to execute their
applications without affecting the underlying system with help of a bytecode verifier. Bytecode
verifier also provides additional security as its role is to check the code for any violation of access.

12. Write Once Run Anywhere: As discussed above java application generates a ‘.class’ file which
corresponds to our applications(program) but contains code in binary format. It provides ease t
architecture-neutral ease as bytecode is not dependent on any machine architecture. It is the
primary reason java is used in the enterprising IT industry globally worldwide.
13. Power of compilation and interpretation: Most languages are designed with purpose either they
are compiled language or they are interpreted language. But java integrates arising enormous
power as Java compiler compiles the source code to bytecode and JVM executes this bytecode to
machine OS-dependent executable code.

Example:
// Demo Java program

// Importing classes from packages

import java.io.*;

// Main class

20
public class KSK {

// Main driver method

public static void main(String[] args)
{
// Print statement
System.out.println("Welcome to Nizam Buddy");
}
}

Output:
Welcome to Nizam Buddy

Explanation:
1. Comments: Comments are used for explaining code and are used in a similar manner in Java or C
or C++. Compilers ignore the comment entries and do not execute them. Comments can be of a
single line or multiple lines.

Single line Comments:

Syntax:
// Single line comment
Multi-line comments:
Syntax:
/* Multi line comments*/
2. import java.io.*: This means all the classes of io package can be imported. Java io package
provides a set of input and output streams for reading and writing data to files or other input or
output sources.
3. class: The class contains the data and methods to be used in the program. Methods define the
behavior of the class. Class KSK has only one method Main in JAVA.
4. static void Main(): static keyword tells us that this method is accessible without instantiating the
class.
5. void: keywords tell that this method will not return anything. The main() method is the entry point
of our application.

21
 6. System.in: This is the standard input stream that is used to read characters from the keyboard or
any other standard input device.
7. System.out: This is the standard output stream that is used to produce the result of a program on
an output device like the computer screen.
8. println(): This method in Java is also used to display text on the console. It prints the text on the
console and the cursor moves to the start of the next line at the console. The next printing takes
place from the next line.
Everything in java , is represented in Class as an object including the main function.

1.10.4 Basic terminologies in Java:

1. Class: The class is a blueprint (plan) of the instance of a class (object). It can be defined as a template
which describes the data and behaviour associated with its instance.
Example: Blueprint of the house is class.

2. Object: The object is an instance of a class. It is an entity which has behaviour and state
Example: A car is an object whose states are: brand, colour, number-plate.
Behaviour: Running on the road.

3. Method: The behaviour of an object is the method.

Example: The fuel indicator indicates the amount of fuel left in the car.

4. Instance variables: Every object has its own unique set of instance variables. The state of an object is
generally created by the values that are assigned to these instance variables.
Example: Steps to compile and run a java program in a console
javac KSK.java
java KSK
Java
public class KSK {
public static void main (String[] args) {
System.out.println("KSK!");
}
22
 }
Output
KSK!
Note: When the class is public, the name of the file has to be the class name.

1.10.5 The Basic Syntax:

1. Comments in Java:
There are three types of comments in Java.
i. Single line Comment
// System.out.println("KSK!");
ii. Multi-line Comment
/*
System.out.println("KSK!");
System.out.println("Alice!");
*/
iii. Documentation Comment. Also called a doc comment.
/** documentation */
2. Source File Name: The name of a source file should exactly match the public class name with the
extension of .java. The name of the file can be a different name if it does not have any public
class. Assume you have a public class KSK.
KSK.java // valid syntax
KSK.java // invalid syntax
3. Case Sensitivity: Java is a case-sensitive language, which means that the identifiers AB, Ab,
aB,  and ab are different in Java.
System.out.println("Alice"); // valid syntax
system.out.println("Alice"); // invalid syntax
4. Class Names:
i. The first letter of the class should be in Uppercase (lowercase is allowed, but not discouraged).
ii. If several words are used to form the name of the class, each inner word’s first letter should be
in Uppercase. Underscores are allowed, but not recommended. Also allowed are numbers and
23
 currency symbols, although the latter are also discouraged because they are used for a special
purpose (for inner and anonymous classes).
class MyJavaProgram // valid syntax
class 1Program // invalid syntax
class My1Program // valid syntax
class $Program // valid syntax, but discouraged
class My$Program // valid syntax, but discouraged (inner class Program inside the class My)
class myJavaProgram // valid syntax, but discouraged
5. public static void main(String [] args):
The method main() is the main entry point into a Java program; this is where the processing starts.
Also allowed is the signature public static void main(String… args).
6. Method Names:
i. All the method names should start with a lowercase letter.
ii. If several words are used to form the name of the method, then each first letter of the inner
word should be in Uppercase. Underscores are allowed, but not recommended. Also allowed are
digits and currency symbols.
public void employeeRecords() // valid syntax
public void EmployeeRecords() // valid syntax, but discouraged
7. Identifiers in java:
Identifiers are the names of local variables, instance and class variables, labels, but also the names
for classes, packages, modules and methods. All Unicode characters are valid, not just the ASCII
subset. 
i. All identifiers can begin with a letter, a currency symbol or an underscore (_). According to the
convention, a letter should be lower case for variables.
ii. The first character of identifiers can be followed by any combination of letters, digits, currency
symbols and the underscore. The underscore is not recommended for the names of variables.
Constants (static final attributes and enums) should be in all Uppercase letters.
iii. Most importantly identifiers are case-sensitive.
iv. A keyword cannot be used as an identifier since it is a reserved word and has some special
meaning.
Legal identifiers: MinNumber, total, ak74, hello_world, $amount, _under_value
Illegal identifiers: 74ak, -amount
8. White-spaces in Java:

24
 A line containing only white-spaces, possibly with the comment, is known as a blank line, and the
Java compiler totally ignores it.
9. Access Modifiers: These modifiers control the scope of class and methods.
 Access Modifiers: default, public, protected, private
 Non-access Modifiers: final, abstract, strictfp
10. Java Keywords:
Keywords or Reserved words are the words in a language that are used for some internal process
or represent some predefined actions. These words are therefore not allowed to use as variable
names or objects. 

Below is the list of reserved keywords in Java:

abstract assert boolean break

byte case catch char

class const continue default

do double else enum

extends final finally float

for goto if implements

import instanceof int interface

long native new package

private protected public return

short static strictfp super

switch synchronized this throw

throws transient try void

volatile while

1.11Android Studio Plugins to Simplify Android App Development :

Android Studio, along with the pre-existing features, also provides the developers with numerous best
android studio plugins that add to the productivity of the tool. A plugin or add-on is a software component
that can be added to an existing program without altering its functionalities. Plugins prove to be extremely
helpful if you want to add functionalities to your existing software instead of switching to any other
available options.
25
Every developer aims at a speedy yet efficient development process, opting for numerous solutions that
result in the same, and the plugins make a huge contribution to the cause. If you are an android developer
and want to improve your productivity, here are some extremely effective as well as essential plugins that
are worth trying –

1. ADB Idea : ADB Idea is a plugin made for Android Studio and Intellij IDEA to simplify the android
development process. It empowers you to perform various essential actions at a click, instead of creating
them from scratch,  which eventually speeds up the development process.

ADB plugins come with the following features:

 Uninstall App
 Clear App Data
 Kill App
 Start App
 Restart App
 Clear App Data and Restart

So, no more struggling with the series of steps of the app settings to perform an action. Just find the
command in the ‘Find Actions’ option or the tools section of ADB Idea, click on it, and that’s it.

2. CodeGlance:

CodeGlance is a kind of minimap of the entire code, which facilitates you to view the complete code
block at a glance. Once you enable the CodeGlance, the whole code displays at the side of the screen in
the minimap format, from where you can quickly jump to the desired section of code by selecting it from
the CodeGlance box. CodeGlance also displays the blocks’ color, making it even more comprehensible
and productive.

3. Key Promoter X

When working on Android projects, Key Promoter X assists in achieving the necessary shortcuts. The
Key Promoter X displays the keyboard shortcut you should have used instead when developers click a
button inside the IDE using the mouse. 

Key Promoter X facilitates the move to quicker, mouse-free development by offering a straightforward
approach to learning how to replace tiresome mouse work with keyboard shortcuts.  The Key Promoter X
tool window provides a hit list of the mouse operations that developers most frequently use, along with a
quick link to a shortcut they can use in their place. The Key Promoter X offers the option to immediately
generate a shortcut for buttons that don’t already have one.

4. Scala

Sbt-android is the primary tool used for creating Android apps in Scala. With the help of the sbt tasks, this
plugin offers you to quickly build and run your application from an sbt console. Even better, it
automatically downloads and updates the Android SDK for you. How to build up a new project with sbt-
android and how to set up IntelliJ is very well explained in the README in the GitHub repository (or
Android Studio). 

The following features are available for free with the IntelliJ IDEA community edition: 

 Coding support (highlighting, completion, formatting, refactorings, etc.)

26
  Navigation, search, information about types and implicit
 Integration with sbt and other build tools. 
 Support for testing frameworks (ScalaTest, Specs2, uTest)
 Worksheets, the Scala debugger, and Ammonite scripts

The Scala Plugin installation procedure is as follows:

Open Android Studio, select plugins, search Scala on the search bar i.e. (Type/to see options), and install. 

5. IdeaVim

Plugin for IntelliJ Platform-based IDEs that emulates Vim.

IdeaVim offers support for a wide range of Vim features, including motion keys, deletion/changing,
marks, registers, some Ex commands, Vim regexps, configuration via /.ideavimrc, macros, Vim plugins,
etc.

The IdeaVim Plugin installation procedure is as follows:

Open Android Studio, select plugins, search IdeaVim on the search bar i.e. (Type/to see options), and
install. 

6. Android Input

When developing Android apps, you frequently need to enter text to test specific features or functionality
on an actual Android device or emulator.

The Android input plugin allows you to simply input text into an Android device or emulator easily. 

 The plugin remembers the last used device so you don’t have to select the device you last used
every time. 
 It also remembers the previous text you sent but selects it all by default so you can send or write
without using your mouse. 
 Enter to send a text message without using a mouse.
 You can close the dialogue by pressing the ESC key if you don’t want to send anything.

The Android Input installation procedure is as follows:

Open Android Studio, select plugins, search Android Input on the search bar i.e. (Type/to see options),
and install. 

7. Android Drawable Preview

There are several drawable components that you will utilize when developing an Android app. This
makes it challenging to remember which drawable you used, particularly if you’re working on a big
project. In light of this, figuring this out requires a lot of time and work, and without being sure, you
might duplicate the drawable.

27
It is resolved with the Android Drawable Preview plugin. It accomplishes this by inserting previews of
the drawable you’ve used in place of the project view’s default file icons. To find out exactly which
drawable you’ve used, just look through the folders in your project view while using the plugin.

The Android Drawable Preview plugin installation procedure is as follows:

Open Android Studio, select plugins, search Android Drawable Preview on the search bar i.e. (Type/to
see options), and install. 

1.12 Operators in Java:

Java provides many types of operators which can be used according to the need. They are classified based
on the functionality they provide. Some of the types are:

1. Arithmetic Operators: They are used to perform simple arithmetic operations on primitive data
types. 
 * : Multiplication
 / : Division
 % : Modulo
 + : Addition
 – : Subtraction

2. Unary Operators: Unary operators need only one operand. They are used to increment, decrement or
negate a value. 
 – : Unary minus, used for negating the values.
 + : Unary plus indicates the positive value (numbers are positive without this, however). It
performs an automatic conversion to int when the type of its operand is the byte, char, or short.
This is called unary numeric promotion.
 ++ : Increment operator, used for incrementing the value by 1. There are two varieties of
increment operators. 
 Post-Increment: Value is first used for computing the result and then incremented.
 Pre-Increment: Value is incremented first, and then the result is computed.
 — : Decrement operator, used for decrementing the value by 1. There are two varieties of
decrement operators. 

28
  Post-decrement: Value is first used for computing the result and then decremented.
 Pre-Decrement: Value is decremented first, and then the result is computed.
 ! : Logical not operator, used for inverting a boolean value.

3. Assignment Operator: ‘=’ Assignment operator is used to assign a value to any variable. It has a right
to left associativity, i.e. value given on the right-hand side of the operator is assigned to the variable on
the left, and therefore right-hand side value must be declared before using it or should be a constant. 
The general format of the assignment operator is:
variable = value;
In many cases, the assignment operator can be combined with other operators to build a shorter version of
the statement called a Compound Statement. For example, instead of a = a+5, we can write a += 5. 
 +=, for adding left operand with right operand and then assigning it to the variable on the left.
 -=, for subtracting right operand from left operand and then assigning it to the variable on the left.
 *=, for multiplying left operand with right operand and then assigning it to the variable on the left.
 /=, for dividing left operand by right operand and then assigning it to the variable on the left.
 %=, for assigning modulo of left operand by right operand and then assigning it to the variable on
the left.

4. Relational Operators: These operators are used to check for relations like equality, greater
than, less than. They return boolean results after the comparison and are extensively used in
looping statements as well as conditional if-else statements.
The general format is, 
variable relation_operator value
Some of the relational operators are- 
 ==, Equal to: returns true if the left-hand side is equal to the right-hand side.
 !=, Not Equal to: returns true if the left-hand side is not equal to the right-hand side.
 <, less than: returns true if the left-hand side is less than the right-hand side.
 <=, less than or equal to returns true if the left-hand side is less than or equal to the
right-hand side.
 >, Greater than: returns true if the left-hand side is greater than the right-hand side.
 >=, Greater than or equal to: returns true if the left-hand side is greater than or equal to
the right-hand side.
29
5. Logical Operators: These operators are used to perform “logical AND” and “logical OR” operations,
i.e., the function similar to AND gate and OR gate in digital electronics. One thing to keep in mind is the
second condition is not evaluated if the first one is false, i.e., it has a short-circuiting effect. Used
extensively to test for several conditions for making a decision. Java also have “Logical NOT”, it returns
true when condition is false and vice-versa
Conditional operators are:
 &&, Logical AND: returns true when both conditions are true.
 ||, Logical OR: returns true if at least one condition is true.
 ! , Logical NOT: returns true when condition is false and vice-versa

6. Ternary operator: Ternary operator is a shorthand version of the if-else statement. It has three
operands and hence the name ternary.
The general format is:
condition ? if true : if false
The above statement means that if the condition evaluates to true, then execute the statements after the ‘?’
else execute the statements after the ‘:.’  

7. Bitwise Operators: These operators are used to perform the manipulation of individual bits of a
number. They can be used with any of the integer types. They are used when performing update and
query operations of the Binary indexed trees. 
 &, Bitwise AND operator: returns bit by bit AND of input values.
 |, Bitwise OR operator: returns bit by bit OR of input values.
 ^, Bitwise XOR operator: returns bit by bit XOR of input values.
 ~, Bitwise Complement Operator: This is a unary operator which returns the one’s complement
representation of the input value, i.e., with all bits inverted.

8.Shift Operators: These operators are used to shift the bits of a number left or right, thereby multiplying
or dividing the number by two, respectively. They can be used when we have to multiply or divide a
number by two.
General format- 
number shift_op number_of_places_to_shift;

30
  <<, Left shift operator: shifts the bits of the number to the left and fills 0 on voids left as a result.
Similar effect as of multiplying the number with some power of two.
 >>, Signed Right shift operator: shifts the bits of the number to the right and fills 0 on voids left
as a result. The leftmost bit depends on the sign of the initial number. Similar effect as of dividing
the number with some power of two.
 >>>, Unsigned Right shift operator: shifts the bits of the number to the right and fills 0 on voids
left as a result. The leftmost bit is set to 0.

9. instanceof operator: The instance of the operator is used for type checking. It can be used to test if an
object is an instance of a class, a subclass, or an interface.
General format- 
object instance of class/subclass/interface

31
 Chapter 2:
Introduction to Web Technology

32
2.1 Introduction to Web Technologies:
Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the internet. A web browser is used to access web
pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on
the Internet. Hyperlinked resources on the World Wide Web can be accessed using software interfaces
provided by Web browsers.

2.2 Classification of Web Technology:

Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the internet. A web browser is used to access web
pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on
the Internet. Hyperlinked resources on the World Wide Web can be accessed using software interfaces
provided by Web browsers.

2.2.1 Web Technology can be classified into the following sections:

World Wide Web (WWW): The World Wide Web is based on several different technologies:
Web browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).

Web Browser: The web browser is an application software to explore www (World Wide Web).
It provides an interface between the server and the client and requests to the server for web
documents and services.

Web Server: Web server is a program which processes the network requests of the users and
serves them with files that create web pages. This exchange takes place using Hypertext Transfer
Protocol (HTTP).

Web Pages: A webpage is a digital document that is linked to the World Wide Web and viewable
by anyone connected to the internet has a web browser.

Web Development: Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web programming, and database
management. It is the creation of an application that works over the internet i.e., websites.

2.3 Classification of Web Development:

33
Web development refers to the building, creating, and maintaining of websites. It includes aspects such as
web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e., websites.

2.3.1 Web Development can be classified into two ways:

Frontend Development: The part of a website that the user interacts directly is termed as front end.
It is also referred to as the ‘client side’ of the application.

Backend Development: Backend is the server side of a website. It is the part of the website that
users cannot see and interact. It is the portion of software that does not come in direct contact with
the users. It is used to store and arrange data.

2.4 Frontend Development and Languages:

Frontend development is the part of web development that develops and creates the website's
frontend elements or features immediately visible and available to the end-user or client. A frontend

34
developer, in essence, is responsible for everything you see, including styling, images, text, alignment,
navigation, colours, and so on, and strives to make the user experience as frictionless as possible. They also
assist with debugging and add to the overall design and look. Frontend development's main aims are
responsiveness and performance.

The frontend portion is built by using some languages which are discussed below:

2.4.1 HTML:

HTML stands for Hypertext Markup Language. It is used to design the front-end portion of web pages using
a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. The markup language is used to define the text documentation within the tag
which defines the structure of web pages.

The most extensively used Frontend Language is HTML, which is a markup language. The term "text
wrapped within a text" is used to describe Hypertext. It is similar to a hyperlink which has an underlying
text that, when clicked, takes you to a different webpage. A programming language is not always the same
as a markup language. It's instead used to add formatting and layout to a plain text document. As a result,
more interactive and dynamic text material is produced. A web page is a document that is usually written in
HTML and displayed via a web browser.

2.4.2 CSS:

Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the
process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly,
CSS enables you to do this independent of the HTML that makes up each web page.

35
 CSS is used to turn a document into a format that audiences can understand. This is especially
important for browsers like Chrome, Firefox, and Edge, designed to deliver documents to screens, printers,
and projectors visually. CSS is widely used because it saves time, has easy maintenance, offers selectors,
text effects, and layouts.

Although CSS is a style sheet, it is also considered as the top Frontend Language. CSS, or Cascading Style
Sheets, is a design language that simplifies making web pages presentable. Selectors are used to pick
elements and apply styles to them.

2.4.3 JavaScript:

JavaScript is a robust client-side programming language that is open-source. Its primary purpose is
to enhance a user's interaction with a web page. In other words, you can utilize this programming language
to improve the vibrancy and engagement of your website. JavaScript is also widely used in the development
of games and mobile apps. Excellent speed, cross-browser interoperability, and straightforward semantics
are just a few of JavaScript's essential qualities, providing a seamless developer experience.

2.4.4 AJAX:

Ajax is an acronym for Asynchronous JavaScript and XML. It is used to communicate with the
server without refreshing the web page and thus increasing the user experience and better performance.

The two major features of AJAX allow you to do the following:

 Make requests to the server without reloading the page

 Receive and work with data from the server

36
AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting tremendous
industry momentum and several tool kit and frameworks are emerging. But at the same time, AJAX has
browser incompatibility and it is supported by JavaScript, which is hard to maintain and debug.

2.4.5 React:

React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by

Facebook. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets
you compose complex UIs from small and isolated pieces of code called “components”. React is a UI
development library written in JavaScript. Facebook and an open-source developer community run it.
Although React is a library and not a language, its usage in web development is rampant. The library was
introduced in May 2013 and is currently one of the most popular frontend libraries for web development.

2.4.6 Angular:

Angular is an open-source JavaScript framework based on TypeScript. Google runs it, and one of its main
goals is to build single-page apps. As a framework, Angular offers apparent advantages, and it also provides
a standard structure for developers in a team to work with. It allows users to create huge applications that
are easy to manage.

Some salient features of Angular are:

TypeScript - Angular uses TypeScript. TypeScript is a set of types for JavaScript that lets users
write more understandable JavaScript code. All TypeScript code may be compiled with JavaScript
and run on any platform.

Data Binding - It employs dynamic HTML and does not require complex scripting or
programming.

37
2.4.7 jQuery:

jQuery is a trendy, leading JavaScript framework and application development platform. It is leaner; it is
faster loading, and it comes loaded with features that make the life of a JavaScript application developer
much more accessible. No longer is JavaScript an afterthought, grafted onto stateless HTML. It is used
more and more to be the foundation and the primary driving force of web development and application
development, from desktops to tablets and smartphones.

2.5 Backend Development and languages:

Web development activities that are done at the back end of programs are referred to as back-end
development. Back-end development covers server-side web application logic and integration and activities,
like writing APIs, creating libraries, and working with system components instead of frontend development,
which focuses on customer-facing services and programs. Backend developers build code that allows a
database and an application to communicate with one another. Backend developers take care and maintain
the back-end of a website, including databases, servers, and apps, and they control what you don't see.

The backend portion is built by using some languages which are discussed below:

2.5.1 PHP:

PHP is a server-side scripting language designed specifically for web development. Since PHP code
executed on the server-side, so it is called a server-side scripting language.

PHP is a server-side and general-purpose scripting language that is especially suited for web
development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Pre-
processor. It’s a recursive acronym because the first word itself is also an acronym. PHP was created by
Rasmus Lerdorf in 1994. It’s currently maintained by the PHP Development Team.

38
PHP has two main applications:

 Server-side scripting – PHP is well-suited for developing dynamic websites and web applications.
 Command-line scripting – like Python and Perl, you can run PHP script from the command line to
perform administrative tasks like sending emails and generating PDF files.

2.5.2 Node.js:

Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost
any kind of project!

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows
Node.js to be very performant.

A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a
set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and
generally, libraries in Node.js are written using non-blocking paradigms, making blocking behaviour the
exception rather than the norm.

2.5.3 Java:

Java is one of the most popular and widely used programming languages and platforms. It is highly
scalable. Java components are easily available. Java is an object-oriented language that is designed to have
as few implementation dependencies as possible. It is a class-based computing platform for developing
mobile and web applications.

Java programming language is used for back-end development. Based on the training from
Java online course; browsers don’t understand other languages other than HTML, CSS, and JS. So, other
programming languages like Java, PHP, Python, Ruby on Reels, and Node JS all run on the server. Since
back-end development is known as server-end development, Java is being used.

39
2.5.4 JavaScript:

JavaScript can be used as both (front end and back end) programming. JavaScript is primarily known as the
“language of browsers,” and it is used for web-based applications.

The role of JavaScript in backend development is to make changes to the existing web page. HTML/CSS
just makes a page, but it doesn’t help in displaying/updating new data, use popups, etc. To change the
button’s color while the mouse hovers on it, add popups and dropdowns; it’s all done using JavaScript, with
some exceptions in CSS. When it's used for back-end, the Node.js framework allows a server to handle
front-end data updates and build scalable network applications to process simultaneous user requests.

2.5.5 C#:

C# is a general-purpose, modern and object-oriented programming language pronounced as “C sharp”. C#

is a high-level language that can operate on various types of computers easily. Programmers use this
powerful language with frameworks like .NET to design the internal structure of webpages and connect
client interactions with server interactions for a fully functioning program. The versatility and stability of
C# and its related frameworks make it a reliable choice for web and software development.

2.5.6 C++:

C++ is a general purpose, case-sensitive, free-form programming language that supports object-oriented,
procedural and generic programming.
C++ tutorial provides basic and advanced concepts of C++. Our C++ tutorial is designed for beginners
and professionals.
C++ is an object-oriented programming language. It is an extension to C Programming.
Our C++ tutorial includes all topics of C++ such as first example, control statements, objects and
classes, inheritance, constructer, destructor, this, static, polymorphism, abstraction, abstract class,
interface, namespace, encapsulation, arrays, strings, exception handling, File IO, etc.

40
2.5.7 DBMS:

The software which is used to manage database is called Database Management System (DBMS).

Database Management Systems (DBMS) are software systems used to store, retrieve, and run queries on
data. A DBMS serves as an interface between an end-user and a database, allowing users to create, read,
update, and delete data in the database.

DBMS manage the data, the database engine, and the database schema, allowing for data to be manipulated
or extracted by users and other programs. This helps provide data security, data integrity, concurrency, and
uniform data administration procedures.

Database management systems can be classified based on a variety of criteria such as the data model, the
database distribution, or user numbers. The most widely used types of DBMS software are relational,
distributed, hierarchical, object-oriented, and network.

Distributed database management system

A distributed DBMS is a set of logically interrelated databases distributed over a network that is
managed by a centralized database application. This type of DBMS synchronizes data periodically
and ensures that any change to data is universally updated in the database.

Hierarchical database management system

Hierarchical databases organize model data in a tree-like structure. Data storage is either a top-down
or bottom-up format and is represented using a parent-child relationship.

Network database management system

41
 The network database model addresses the need for more complex relationships by allowing each
child to have multiple parents. Entities are organized in a graph that can be accessed through several
paths.

Relational database management system

Relational database management systems (RDBMS) are the most popular data model because of its
user-friendly interface. It is based on normalizing data in the rows and columns of the tables. This is
a viable option when you need a data storage system that is scalable, flexible, and able to manage
lots of information.

Object-oriented database management system

Object-oriented models store data in objects instead of rows and columns. It is based on object-
oriented programming (OOP) that allows objects to have members such as fields, properties, and
methods.

2.6 Data Format:

Format of data is used by web applications to communicate with each other. It is light weight text-based
data interchange format which means, it is simpler to read and write.

Below are two common data formats used in web development.

XML: Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable.

JSON: JSON or JavaScript Object Notation is a format for structuring data.

42
2.7 API:

API is an abbreviation for Application Programming Interface which is a collection of communication

protocols and subroutines used by various programs to communicate between them.

Web Protocols:

Web protocols are set of rules followed by everyone communicating over the web.

HTTP: The Hypertext Transfer Protocol (HTTP) is designed to enable communications between
clients and servers. HTTP works as a request-response protocol between a client and server. A web
browser may be the client, and an application on a computer that hosts a web site may be the server.

Other Protocols:

 TCP/IP Model
 UDP
 FTP
 SMTP
 SOAP

2.8 Graphics:

Graphical elements are one of the key features of any webpage. They can be used to convey important
points better than text does and beautify the webpage.

Canvas: The HTML “canvas” element is used to draw graphics via JavaScript.

SVG: SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML
format.

43
2.9 Applications of Web Technologies

1. Realtime web analytics

Google has already started pushing into this market with Google Analytics, but there are a lot of other start-
ups exploring this space. If you think about it, there is a ton of opportunity there, as you have the ability to
capture and transmit interactive user data like never before. You can track where the mouse floats across the
screen, the orientation of a mobile device, and any number of other user interactions. Not only could you
track them, but you could actually watch them as they happen!

2. Digital Advertising

The digital advertising world has long been a solid revenue generator for web-based businesses. With real-
time web technologies, advertisers can move towards more interesting advertising paradigms, such as
charging for ads based on the amount of time the ad is visible on a user’s screen or other real-time
interaction metrics vs the CPM and CPC metrics that have long been the standard.

3. E-Commerce

E-commerce has always been a hotbed for engaging customers and customer interactions. Showing
shoppers what other shoppers are looking at online, or pushing out online deals directly to all connected
browsers are the types of real-time features that e-commerce platforms will look to adopt in the future.

4. Publishing

Keeping eyeballs on the screen is the primary goal on any online publisher, and one way to keep visitors on
your site is to keep them engaged. Realtime data can lead to some very interesting infographics, and it can
also help connect viewers like never before. A great example is some of the real-time comments like
Disqus.

5. Massively Multiplayer Online Games

Those big MMO games are making their way on to the web, and they will surely find a friend in real-time
web technologies. Many multiplayer games depend on low latency communications between individual
gamers, and for these technologies like WebSockets are ideal.

6. Backend Services and Messaging

Our backend systems have grown in scale and complexity over the last decade, and it is becoming
increasingly important to propagate messages across very large systems effectively and efficiently. The
real-time web is going to be great for these types of functions.

7. Project Management & Collaboration

Google docs and other platforms have already demonstrated the value (and potential complexity) in
implementing real-time collaborative environments on the Web. The new era of real-time web technologies
will hopefully make the development of these types of applications simpler and easier to build. Which is
great because most web applications are not built in a vacuum, so having the ability to connect all those
users together in constructive and insightful ways should be able to add value their workflows.

8. Realtime Monitoring Services

44
The bi-directional communication channel is great for remote devices or servers to stay connected to a
central monitoring service. This gives techs and admins the ability to watch what their endpoints are doing
in real-time without logging into the machine, and also gives the ability to send real-time alerts.

9.Live Charting and Graphing

Charts and graphs have always been a great way to visualize data. Now you can have those graphs and
charts connected to real-time data flows. The possibilities are literally endless, from displaying temperature
data measured from a connected home device to streaming stock prices to real-time chart.

10. Group and Private Chat

Chat has long been the de-facto example for real-time since by its very nature it requires real-time bi-
directional communication. Chat is a great use for real-time web technologies, and variations on group chats
and private chats could lead to more innovation in this area over the coming years.

2.10 HTML

2.10.1 Introduction to HTML

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language.
HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web
pages. A markup language is used to define the text document within tag which defines the structure of web
pages. This language is used to annotate (make notes for the computer) text so that a machine can
understand it and manipulate text accordingly. Most markup languages (e.g.: HTML) are human-readable.
The language uses tags to define what manipulation has to be done on the text.

HTML is a markup language used by the browser to manipulate text, images, and other content, in order to
display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of
HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1999.

The most extensively used Frontend Language is HTML, which is a markup language. The term "text
wrapped within a text" is used to describe Hypertext. It is similar to a hyperlink which has an underlying
text that, when clicked, takes you to a different webpage. A programming language is not always the same
as a markup language. It's instead used to add formatting and layout to a plain text document. As a result,
more interactive and dynamic text material is produced. A web page is a document that is usually written in
HTML and displayed via a web browser.

45
2.10.2 Structure of HTML:

HTML Page Structure

Below is a visualization of an HTML page structure:

<!DOCTYPE html>

<html>

<head>

<title>Page title</title>

</head>

<body>

<! - - body of the document - - >

</body>

</html>

Example of a simple HTML document

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

46
 <h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

2.10.3 Tags, Elements and Attributes

HTML uses predefined tags and elements which tell the browser how to properly display the content.
Remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end
of the page.

HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and
end with > symbol. Whatever written inside < and > are called tags.

Example:

<h1> heading 1 tag

<p> paragraph tag

<li> list tag

HTML Elements: Elements enclose the contents in between the tags. They consist of some kind of
structure or expression. It generally consists of a start tag, content and an end tag.

Example:

<h1>Heading one</h1>

where, “<h1>” is opening tag, “Heading one” is content, “</h1>” is closing tag

<p>Paragraph</p>

<li>List item</li>

HTML Attributes: It is used to define the character of an HTML element. It always placed in the opening
tag of an element. It generally provides additional styling (attribute) to the element.

Example:

<h1 id= “heading” class= “hd” align= “center”>Heading</h1>

Where id, class, align are attributes of the “h1” tag and “heading”, “hd”, “center” are
the values for those attributes.

Comparison between HTML elements and HTML attributes :

47
 HTML Tags HTML Elements HTML Attributes
HTML tags are used HTML element HTML attributes are
to hold the HTML holds the content. used to describe the
element. characteristic of an
HTML element in detail.

HTML tag starts Whatever written HTML attributes are

with < and ends with within a HTML tag found only in the starting
> are known as tag.
HTML elements.

HTML tags are HTML elements HTML attributes specify

almost like keywords specifies the general various additional
where every single content. properties to the existing
tag has unique HTML element.
meaning.

2.10.4 Tags:

HTML tags are like keywords which defines that how web browser will format and display the content.
With the help of tags, a web browser can distinguish between an HTML content and a simple content.
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are
unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right.
HTML tags are used to create HTML documents and render their properties. Each HTML tags have
different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text
and HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must be enclosed within < > these brackets.

o Every tag in HTML performs different tasks.

o If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

2.10.5 Elements

An HTML element is a type of HTML (HyperText Markup Language) document component, one of
several types of HTML nodes (there are also text nodes, comment nodes and others).[vague] HTML
document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which
add semantics and formatting to parts of document (e.g., make text bold, organize it into paragraphs, lists

48
and tables, or embed hyperlinks and images). Each element can have HTML attributes specified. Elements
can also have content, including other elements and text.

Syntax:

2.10.5.1 Types of HTML Elements

There are three kinds of HTML elements: normal elements, raw text elements, and void elements.

1) Normal elements usually have both a start tag and an end tag, although for some elements the end
tag, or both tags, can be omitted. It is constructed in a similar way:
 a start tag (<tag>) marking the beginning of an element, which may incorporate any number of
HTML attributes;
 some amount of content, including text and other elements;
 an end tag, in which the element name is prefixed with a slash: </tag>.
2) Raw text elements (also known as text or text-only elements) are constructed with:
 a start tag (in the form <tag>) marking the beginning of an element, which may incorporate any
number of HTML attributes;
 some amount of text content, but no elements (all tags, apart from the applicable end tag, will be
interpreted as content);
 an end tag, in which the element name is prefixed with a slash: </tag>. In some versions of
HTML, the end tag is optional for some elements. The end tag is required in XHTML.

An example is the <title> element, which must not contain other elements (including markup of text),
only plain text.

3) Void elements (also sometimes called empty elements, single elements or stand-alone elements)
only have a start tag (in the form <tag>), which contains any HTML attributes. They may not
contain any children, such as text or other elements. For compatibility with XHTML, the HTML
specification allows an optional space and slash (<tag /> is permissible). The space and slash are
required in XHTML and other XML applications. Two common void elements are <br /> (for a
hard line-break, such as in a poem or an address) and <hr /> (for a thematic break). Other such
elements are often place-holders which reference external files, such as the image (<img />)
element. The attributes included in the element will then point to the external file question. Another
example of a void element is <link />, for which the syntax is:

<link rel="stylesheet" href="fancy.css" type="text/css">

This <link /> element points the browser at a style sheet to use when presenting the HTML
document to the user. Note that in the HTML syntax attributes don't have to be quoted if they are
composed only of certain characters: letters, digits, the hyphen-minus and the period. When using
the XML syntax (XHTML), on the other hand, all attributes must be quoted, and a spaced trailing
slash is required before the last angle bracket:

49
 <link rel="stylesheet" href="fancy.css" type="text/css" />

2.10.5.2 Inline Elements vs Block Elements

In visual browsers, displayable elements can be rendered as either block or inline. While all elements are
part of the document sequence, block elements appear within their parent elements:

 As rectangular objects which do not break across lines;

 With block margins, width, and height properties which can be set independently of the surrounding
elements.

Conversely, inline elements are treated as part of the flow of document text; they cannot have margins,
width, or height set, and do break across lines.

2.10.5.3 Block Elements:

A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it
can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Here are the block-level elements in HTML:

<div>, <p>, <h1>, <li>, <ol>, <ul>, <table>, <form>.. etc.,

2.10.5.4 Inline Elements:

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example

<span>Hello World</span>

Here are the inline elements in HTML:

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>,
<img>, <input>, <label>.. etc.,

2.10.6 Attributes in HTML

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML
attributes are a modifier of an HTML element type. An attribute either modifies the default functionality of
50
an element type or provides functionality to certain element types unable to function correctly without them.
In HTML syntax, an attribute is added to an HTML start tag.

2.10.6.1 Common attributes

Usually, HTML elements can take any of several most common standard attributes (See the complete list):

The id can take attribute provides a document-wide unique identifier for an element. This can be used as
CSS selector to provide presentational properties, by browsers to focus attention on the specific element, or
by scripts to alter the contents or presentation of an element. Appended to the URL of the page, the URL
directly targets the specific element within the document, typically a sub-section of the page.

The class attribute provides a way of classifying similar elements. This can be used for semantic purposes,
or for presentation purposes. Semantically, for example, classes are used in microformats. Presentational,
for example, an HTML document might use the designation class="notation" to indicate that all elements
with this class value are subordinate to the main text of the document. Such elements might be gathered
together and presented as footnotes on a page instead of appearing in the place where they occur in the
HTML source. Another presentation use would be as a CSS selector. Multiple classes can be added by
having spaces between each Identifier.

An author may use the style non-attributable codes presentational properties to a particular element. The
style attribute can be used on any HTML element (it will validate on any HTML element; however, it is not
necessarily useful). It is considered better practice to use an element's id or class attributes to select the
element with a stylesheet, though sometimes this can be too cumbersome for a simple and specific or ad hoc
application of styled properties.

The title attribute is used to attach subtextual explanation to an element. In most browsers this attribute is
displayed as what is often referred to as a tooltip.

2.11 CSS (Cascading Style Sheets):

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed
on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web
pages all at once. External stylesheets are stored in CSS files

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

HTML was NEVER intended to contain tags for formatting a web page! HTML was created to
describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph</p>

51
 When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information were
added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the
style formatting from the HTML page!

2.11.1 CSS Syntax

lector{declaration1, declaration 2,..}where declaration is property, value pair i.e.,

{property1: value; property2: value;..}

selector can be anything such as name of the tag, id of the element, class of the element etc., the
way they are represented differs such as id is represented using “#” , class is represented using “.” etc.,.
Declaration is a property, value pair.

Every element has unique id for identification, one id can be given to two or more elements but
it’s not a good practice. Class value is provided to group similar elements in order to style them at a time,
without individually styling them.

Example:

p{ font-size: 20px; color: blue;}, here for the p tag i.e., para tag font-size of 20px, color blue is
applied.

#para{ font-size: 20px; color: blue;}, here the para is an id of an element for whose properties of
font-size and color values 20px and blue is applied.

52
 .para{ font-size: 20px; color: blue;}, here the para is class of one or a group of elements for
whose property’s values 20px, blue is applied.

2.11.2 Types of Style Sheets:

There are three types of CSS or stylesheet

1) Inline Style Sheet (Inline CSS)

2) Internal Style Sheet (Internal CSS)
3) External Style Sheet (External CSS)

2.11.2.1 Inline CSS

An inline style may be used to apply a unique style for a single element. To use inline styles, add
the style attribute to the relevant element. The style attribute can contain any CSS property.

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style=”color: blue; text-align: center;”>This is a heading</h1>

<p style=”color: red;”>This is a paragraph.</p>

</body>

</html>

2.11.2.2 Internal CSS

An internal style sheet may be used if one single HTML page has a unique style. The internal style
is defined inside the <style> element, inside the head section.

Example:

<!DOCTYPE html>

<html>

<head>
53
 <style>

body {

background-color: linen;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

2.11.2.3 External CSS

With an external style sheet, you can change the look of an entire website by changing just one
file! Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.

An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.

Here is an example of using myStyle css file for styling myWebpage.html

myWebpage.html

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”myStyle.css”>

</head>
54
 <body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

myStyle.css

body {

background-color: lightblue;

h1 {

color: navy;

margin-left: 20px;

One HTML page can have multiple CSS types and thus the order of priority for the types are as
follows:

1) Inline CSS
2) Internal and External CSS
3) Browser default

2.11.3 CSS Selectors

CSS selectors are used to “find” (or select) the HTML elements you want to style. We can divide
CSS selectors into five categories:

1) Simple selectors (select elements based on name, id, class)

2) Combinator selectors (select elements based on a specific relationship between them)
3) Pseudo-class selectors (select elements based on a certain state)
4) Pseudo-elements selectors (select and style a part of an element)
5) Attribute selectors (select elements based on an attribute or attribute value)

2.11.4 Applications and Advantages of CSS

55
 As mentioned before, CSS is one of the most widely used style language over the web. I’m going
to list few of them here:

CSS saves time – You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.

Pages load faster – If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means
faster download times.

Easy maintenance – To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.

Superior styles to HTML – CSS have a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.

Multiple Device Compatibility – Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.

Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So, it’s a good idea to start using CSS in all the HTML pages to make them
compatible to future browsers.

2.11.5 Creation and Maintenance of CSS

CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification has been
discussed and officially ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the
actual implementation of the language. Independent companies and organizations create that software.

2.11.6 Disadvantages of CSS:

 CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.

 With CSS, what works with one browser might not always work with another. The web
developers need to test for compatibility, running the program across multiple browsers.
 There exists a scarcity of security.

56
  After making the changes we need to confirm the compatibility if they appear. The similar change
effects on all the browsers.
 The programming language world is complicated for non-developers and beginners. Different
levels of CSS i.e., CSS, CSS 2, CSS 3 are often quite confusing.
 Browser compatibility (some styles sheets are supported and some are not).
 CSS works differently on different browsers. IE and Opera supports CSS as different logic.
 There might be cross-browser issues while using CSS.
 There are multiple levels which creates confusion for non-developers and beginners.

2.11.7 Benefits of CSS in Web Development

Improves Website Presentation

The standout advantage of CSS is the added design flexibility and interactivity it brings to web
development. Developers have greater control over the layout allowing them to make precise
section-wise changes. As customization through CSS is much easier than plain HTML, web
developers are able to create different looks for each page. Complex websites with uniquely
presented pages are feasible thanks to CSS

Makes Updates Easier and Smoother

CSS works by creating rules. These rules are simultaneously applied to multiple elements within
the site. Eliminating the repetitive coding style of HTML makes development work faster and less
monotonous. Errors are also reduced considerably. Since the content is completely separated from
the design, changes across the website can be implemented all at once. This reduces delivery times
and costs of future edits.

2.12 JavaScript:

JavaScript is one of the most popular scripting languages. It was released by Netscape and Sun
Microsystems in 1995. However, JavaScript is derived from Java but it isn’t the same as Java. Java is
pure object-oriented, high-level programming language, in which user can develop any sort of
application.

JavaScript code can be executed by all modern web browser. JavaScript code is embedded in the
HTML code so that it can be interpreted and run by the client’s browser. One of the strengths of
JavaScript is that it usually doesn’t require expensive development tools, even a simple notepad

57
application would do the good for you. Since it is interpreted language in the context of web thus it
doesn’t require any compiler to compile the code.

JavaScript is a case sensitive scripting language which means variable Name is different from
variable name, it has its own keywords i.e., these are some reserved words which can’t be used by its user
to name a function or a variable.

2.12.1 Features of JavaScript

JavaScript being one of the most popular scripting languages has some silent features specified as
follows:

1) Object Based: JavaScript is object-based scripting language.

2) Default: it is the default scripting language for most of the browsers.
3) Platform Independent: JavaScript provides cross platform support for loss of the web
browsers
4) Client-Side Application: JavaScript is only used for client-side applications.
5) Scripting Language: JavaScript is a scripting Language and it is not Java.
6) Case Sensitive: JavaScript is a case sensitive scripting language.
7) Interpreter Based: JavaScript is an interpreter-based scripting language since, it is interpreted
differently by different browsers but mostly it is interpreted by all the browsers in similar
manner.

2.12.2 Data Types:

Data type refers to the characteristic of a variable which specifies the kind of data a particular
variable can store. The set of types in the JavaScript language consists of primitive values and objects.
58
 • Primitive values (immutable datum represented directly at the lowest level of the language)

1) Boolean type
2) Null type
3) Undefined type
4) Number type
5) BigInt type
6) String type
7) Symbol type

• Objects (collections of properties)

2.12.2.1 Primitive values

All types except objects define immutable values (that is, values which can’t be changed). For
example (and unlike in C), Strings are immutable. We refer to values of these types as “primitive values

2.12.2.2 Objects

In computer science, an object is a value in memory which is possibly referenced by an identifier.

2.12.3 Operators in JavaScript

Operators are the expressions to perform some functions on one or more variables called
operands.

JavaScript has following operators:

1) Arithmetic Operators
2) Assignment Operators
3) String Operators
4) Comparison Operators
5) Logical Operators
6) Type Operators
7) Bitwise Operators

2.12.3.1 Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:

Operato Description Example

59
r

let x = 5;

+ Addition let y = 2;

let z = x + y;//z=7

let x = 5;

- Subtraction let y = 2;

let z = x - y;//z=3

let x = 5;

* Multiplication let y = 2;

let z = x * y; //z=10

let x = 5;

** Exponential let y = 2;

let z = x ** y;//z=25;

let x = 5;

/ Division let y = 2;

let z = x / y;//z=2

let x = 5;
Modulus (Division
% let y = 2;
Remainder)
let z = x % y;//z=1

let x = 5;
++ Increment
let z = x++;//z=6

-- Decrement let y = 2;

60
 let z = y--;//z=1

2.12.3.2 Assignment Operators

Operator Example Same as

= x=y; x=y;

+= x+=y; x=x+y;

-= x-=y; x=x-y;

*= x*=y; x=x*y;

/= x/=y; x=x/y;

%= x%=y; x=x%y;

**= x**=y; x=x**y;

2.12.3.3 String Operators

In addition to the comparison operators, which can be used on string values, the concatenation
operator (+) concatenates two string values together, returning another string that is the union of the two
operand strings.

For example,

console.log('my ' + 'string'); // console logs the string "my string".

The shorthand assignment operator += can also be used to concatenate strings.

For example,

var mystring = 'alpha';

mystring += 'bet'; // evaluates to "alphabet" and assigns this value to mystring.

2.12.3.4 Comparison Operators

61
 Comparison operators are used in logical statements to determine equality or difference between
variables or values.

Given that x = 5, the table below explains the comparison operators:

Operators Description Example Returns

x = = 8; false
== equal to x = = 5; true

x = = “5”; true

equal value and x = = = 5; true

===
equal type x = = = “5”; false

x ! =“6; true
!= not equal x ! = “5”; false

x ! = 5; false

not equal value or x ! = “5”; true

!==
not equal type x ! = 5; false

x < 10; true

< less than
x < 2; false

<= less than or equal to x < = 5; true

x > 2; true
> greater than
x > 5; false

greater than or equal

>= x > = 5; true
to

? Ternary operator

2.12.3.5 Logical Operators:

Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:

Operator Description Example

62
 && and (x < 10 && y > 1) is true

|| or (x == 5 || y == 5) is false

! not !(x == y) is true

2.12.3.6 Type Operators

Operator Description

typeof Returns the type of a variable

Returns true if an object is an instance of an

instanceof
object type

2.12.3.7 Bitwise Operators

Operator Description Example Same As

& AND 5&1

| OR 5|1

~ NOT ~5

^ XOR 5^1

<< Left Shift 5 << 1

>> Right Shift 5 >> 1

>>> Unsigned Right 5 >>> 1

Shift

63
 Chapter 3:
Introduction to Android Studio

64
3.1 Introduction About Android Studio:
3.1.1 Android Studio :

Android Studio is the official Integrated Development Environment (IDE) for android application
development. Android Studio provides more features that enhance our productivity while building
Android apps.

Android Studio was announced on 16th May 2013 at the Google I/O conference as an official IDE for
Android app development. It started its early access preview from version 0.1 in May 2013. The first
stable built version was released in December 2014, starts from version 1.0.

Since 7th May 2019, Kotlin is Google's preferred language for Android application development. Besides
this, other programming languages are supported by Android Studio.

3.1.2 Features of Android Studio:

 It has a flexible Gradle-based build system.

 It has a fast and feature-rich emulator for app testing.
 Android Studio has a consolidated environment where we can develop for all Android devices.
 Apply changes to the resource code of our running app without restarting the app.
 Android Studio provides extensive testing tools and frameworks.
 It supports C++ and NDK..

3.1.3Android Studio Version History

Version Release date

1.0 December 2014

1.1 February 2015

1.2 April 2015

1.3 July 2015

1.4 September 2015

1.5 November 2015

2.0 April 2016

2.1 April 2016

2.2 September 2016

2.3 March 2017

3.0 October 2017

3.1 March 2018

65
 3.2 September 2018

3.3 January 2019

3.4 April 2019

3.5 August 2019

3.2 Android Studio Installation Process :

Android Studio is the official IDE (Integrated Development Environment) for Android app development
and it is based on JetBrains’ IntelliJ IDEA software. Android Studio provides many excellent features that
enhance productivity when building Android apps, such as:

 A blended environment where one can develop for all Android devices
 Apply Changes to push code and resource changes to the running app without restarting the app
 A flexible Gradle-based build system
 A fast and feature-rich emulator
 GitHub and Code template integration to assist you to develop common app features and import
sample code
 Extensive testing tools and frameworks
 C++ and NDK support
 Built-in support for Google Cloud Platform, making it easy to integrate Google Cloud Messaging and
App Engine, and many more.
Provides GUI tools that simplify the less interesting parts of app development. 
Easy integration with real time database ‘firebase’.
System Requirements:
 Microsoft Windows 7/8/10 (32-bit or 64-bit)
 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator) 
 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB for
Android SDK and emulator system image)
 1280 x 800 minimum screen resolution
 Installation Guide:
Step 1: Head over to https://developer.android.com>studio to get the Android Studio executable or
zip file. 

66
 Step 2: Click on the Download Android Studio Button. 

Click on the “I have read and agree with the above terms and conditions” checkbox followed by the
download button. 

Click on the Save file button in the appeared prompt box and the file will start downloading. 

Step 3: After the downloading has finished, open the file from downloads and run it. It will prompt the
following dialog box. 

Click on next. In the next prompt, it’ll ask for a path for installation. Choose a path and hit next. 

Step 4: It will start the installation, and once it is completed, it will be like the image shown below. 

Click on next.

67
Step 5: Once “Finish” is clicked, it will ask whether the previous settings need to be imported [if the
android studio had been installed earlier], or not. It is better to choose the ‘Don’t import Settings option’.  

Click the OK button. 

Step 6: This will start the Android Studio. 

Meanwhile, it will be finding the available SDK components.

Step 7: After it has found the SDK components, it will redirect to the Welcome dialog box. 

68
Click on Next. 

Choose Standard and click on Next. Now choose the theme, whether the Light theme or
the Dark one. The light one is called the IntelliJ theme whereas the dark theme is called Dracula. Choose
as required. 

Click on the Next button. 

Step 8: Now it is time to download the SDK components. 

69
Click on Finish. Components begin to download let it complete.

The Android Studio has been successfully configured. Now it’s time to launch and build apps. Click on
the Finish button to launch it. 

Step 9: Click on Start a new Android Studio project to build a new app. 

You can run your first android app in Android Studio. 

3.3 Project Structure:

Android apps are made up of a whole set of artifacts called tree-like structures that can be displayed. The
Android Studio tool window Project offers several views, Packages, and Android. Views work as a filter.
Not every artifact (a file or directory) is in all views to see. The Android Studio Project view largely
corresponds to the level representation of the file system. It visualizes the hierarchical structure of a
project. Packages group files analogously to Java packages, where this makes sense. This view you may
not use very often. Most convenient for development is probably the point of view android. as you see in
the below Figure.

70
The Android view shows a simplified, partially flattened structure of a project. It allows quick access to
important files and directories. Thematically related artifacts are also presented together if they are
physically located in different directories. The tool window Project provides views either as tabs or as a
drop-down list you can do this with the Show Views as Tabs command in the context menu of the
window. To open it, right-click the window title mouse button on.
Let’s take a first look at important files and directories. To do this, activate the Android view. You will
see two nodes, app, and Gradle scripts.

Unfold the latter. The build.gradle file occurs twice, the Files gradle.properties, settings.gradle and
local.properties once each.

local.properties is automatically generated by Android Studio and should not be used by being edited by
hand. It contains an entry pointing to the one used for the project Android SDK references. settings.gradle
lists all modules of a project in android studio. The file will be updated as soon as a module is added or
71
deleted. In what context modules are used, I will show you later. Many apps only need one module. With
gradle.properties you can influence the build process. This is an advanced Task. Usually you do not need
to edit this file.
The build.gradle file is duplicated. A version refers to the project in android studio. Each module has a
further characteristic. there are build.gradle twice. Let’s take a look to throw the version for the app
module. Double-clicking on build.gradle (modules: app) opens the file in a text editor.
You can see what this can look like in the below figure. Please do not make any changes at first. You can
use the editor window at any time by clicking the cross on the tab or by Close by pressing the key
combination (Ctrl)+(F4).
The android { … } block contains information you entered when creating the project in android studio. So
application Id corresponds to the package name. minSdkVersion reflects your selection in the Minimum
SDK drop-down list this attribute indicates which Android version must be present on a device as a
minimum in order to use the being able to use the app. If this requirement is not met, the installation is
canceled. In such a case, however, Google Play does not display the program at all. versionCode and
versionName represent the version number of your app.As I’ll show you how to use these two variables
later. compileSdkVersion and buildToolsVersion correspond to the version level of your Android SDK.

Now let’s take a look at the app module. It contains the branches manifests, java and res. Source texts are
stored under java. You see that twice Package com.example.myapplication. This may irritate you if you
have already worked with other development environments. Please think Remember that the Android
view is an optimized (if you like, artificial) view of a project in android studio. A package contains the
ApplicationTest class, which is another MainActivity. You have entered this name in the project assistant.
You don’t have to worry about the test class at first. By the way, you can Conveniently create new classes
by right-clicking on a package and selecting New Java Class.
The res branch consists of several sub-nodes. values contain the file strings.xml. It includes texts that will
later appear in the source text or in description files to be referenced for the user interface. For this
purpose, the Android SDK tools generated a class called R. However, you must not edit these by  hand.
Therefore it is not available in the Android view.
 

the menu contains XML files for menus. I’ll show you how to use them somewhat later. The user
interface of an app is defined in layout.
In drawable are graphics. Bitmaps can be in different resolutions be discarded. An example of a drawable
is the app launcher icon, which has been stored here since the first Android version. Google now
recommends it but to separate it from the rest of the graphics of the application. The project assistant has
72
therefore been creating several directories mipmap-… for some time. New in Android 5 is a vector format
that frees you, as a developer, from the thankless task of creating for to create many display variants
graphics The manifests subnode contains the AndroidManifest.xml file. This is the central Description
file of an application. In it, among other things, components of the program are listed. As you will see
later, these are so-called activities, services, broadcast receivers, and content providers. The file also
contains information about which rights an app needs and which hardware it expects.
already briefly mentioned other building blocks) from at least one activity. Here are, to put it very simply,
screen pages. Various Aspects of an application such as lists, overviews, search, and input masks are
implemented as separate activities and as sub-elements of <application> in AndroidManifest. xml
entered.

3.4 Layout Editor:

Android Studio Layout Editor enables us to build layouts by dragging components onto the screen or
editing a XML layout file.

Layout Editor is one of the companions in Android Studio, that will follow us through the whole
journey of app design. For a beginner, this is one of the places where to start building apps. In  Layout
Editor you can design screens and add components, that you will use later in the code. So we have to
get used to it to start building our apps.

Google (aka Android) officially calls components widgets, but we think that component is a more
appropriate word for elements like Button, TextView etc. We will call all those elements components
throughout the article. So let us at CodeBrainer explain a little bit about Layout Editor.

With Android Studio Layout Editor, you can:

 Add components to the layout using drag and drop

 Add and change all the attributes (properties) for components
 View and Edit constraints for layouts
 Prepare a responsive design with a preview
 Edit XML code for layout

3.4.1 Parts of Layout Editor :

 Palette

Provides a list of components and layouts that you can drag into your layout in the editor. Here you
find Buttons, TextViews, Spinners, ImageViews etc.

73
 Component Tree

Shows the view hierarchy for your layout. Click an item here to see it selected in the editor. The
component tree is important when you have some nested components.

 Toolbar

Provides buttons to configure your layout design in the editor and helps you change some layout
attributes. In addition, here you can change the size of the display to check if constraints work as
expected. Here you can also find alignments and connection tools.

 Design Editor

The Design Editor displays your layout in a combination of the Design and Blueprint views.
Moreover, this is the main part of Android Studio Layout Editor, and here you see what you have
done visually.

 Attributes

Attributes are properties for components in your layout. Most of the time, attributes will describe
visual aspects of components, but sometimes they are used to set layout behaviour as well and set
parameters for tools.

The Attributes window is a list of properties you can set for your component. Typical properties are
Text, Hint, ID, Background. All the aspects of components can be set with attributes found here.

74
 

 All attributes

When you start using layout editor, the “All attributes” section will be hidden in a separate section (for
older versions you will see a link at the bottom of the attributes palette). All attributes is great,
furthermore you can use it to search for attributes that you know you want to set but are not a part of
commonly used attributes. Also for searching (see below) is best to have your view switched to all
attributes.

There are two "Toggle all attributes" buttons to switch between most used attributes and all attributes.
First is a link button at the bottom of the Attributes tooltip window. Second is left/right arrow button at
the top of Attributes tooltip window.

When you select all attributes, the list is divided into two parts. The first one shows the most recently
used attributes. The second one shows all the other attributes in alphabetical order.

 Declared Attributes

Declared Attributes is a section, which lists attributes specified in the layout file. When you add a
value to a new attribute for a component on the layout, this attribute will become a part of this list.
In addition, this means that it will be quicker to find all the used attributes .

75
 Searching for attributes

Above the attributes, there is a search field you can use; this is an excellent way of looking for those
“hidden” attributes. You have to remember one thing, that it is best to be in view all attributes mode
for searching since Android Studio searches only within visible attributes. For example, we have a
search for the Gravity attribute (first search with filtered attributes and second with all attributes).  

 Text editor for XML code

In the Text Editor, you can define the visual aspects of components with the XML code. When using a
text editor for your XML, you can also see a preview of that screen in real-time as you write the code.

A great way to learn about XML is to use Layout Editor and design your layouts (screens) and check
the XML code, with every change you will understand more. Nice practice can be a simple app like
Love Calculator on our blog. 

If you want to learn more on how XML looks, there is a good source for that at Android, Resource
types overview it has descriptions for all resource types with their XML attributes and structures.

3.4.2 Common actions you can do in the Layout Editor

Let us describe a few common actions you can do in the Layout Editor.

Adding a component to the screen:

All the components you can add to the screen are visible in the Pallete.

76
 Drag & Drop

Drag & drop is a visual approach since you have control over the position of a component on the
screen. With drag & drop, you can also control constraints if you have the Autoconnect tool turned
on. See the explanation below.

 Drag & Drop to the Component Tree

This one is great since you have more control over the hierarchy of components. However, you have to
set all the constraints afterwards in the Attributes window or by dragging anchors.

 Views, widgets or Components

Like we said before, we at CodeBrainer decided to use the name: “component” for all the elements
that go on layouts or views, but you can also hear other names for them like views and widgets in
some cases even controls. No matter the name, they are elements that will help us make a user
interface for our apps.

There are a lot of components. Most used components (views) are:

 EditText
 ImageView
 TextView
 Button (we have a nice blog on button designs)
 ImageButton
 CheckBox
 RecyclerView (see blog post RecyclerView, How to display data)

77
 Naming a component

Since you link elements from Layout to Activity in most cases, naming them for reference makes
sense. The ID is a field in Attributes used for naming your elements. Your name then appears in the
code under R.id.”name”.

 Changing text

Many components have text as part of their visual presentation. You can change this text in “text”
field. For example, TextView displays text as an integral part. You can style it later. The button has
text inside, to explain what it does.

 Solid background

Let us show you how to set a solid background for a control. You can do this by using a hash colour
string in the background field. For the best colour out there, magenta :D, you write “#ff00ff”.

If you want to set a solid background using values, you must add a new colour value.  Adding a colour
as a resource value is useful because you can reuse it everywhere in the app. Imagine that the first
version of your app has all the texts in red, but you later decide to change it to blue. You need to
change this value, and the whole app has a blue colour for the texts. Here is an example of a red
colour.

1. Click the button “Pick a Resource”

2. Change to “Color” in the selection on the left

78
 3. Add new resource

4. Select a red color of your choice

 Constraints

Constraints are great for making your layout work on different display sizes. With constraints, you
are describing the position of components on the screen. Also, because these are not fixed values,
Android can resize and move them around with rules you have set. Using constraints, you are actually
making a ConstraintLayout, that is the best way of making your apps responsive.

Naming is important for linking of objects to work. Without names, Android Studio Layout Editor is
unable to create constraints.

79
 Autoconnect Tool 

The autoconnect tool is a button with a magnet inside. Autoconnect draws guidelines for you.
This way, you can see which constraints are made for us automatically. Usually, it is helpful to leave it
on, but sometimes it makes constraints, that are not applicable to you and you have to reconnect them.

 Clear all constraints

Clear all constraint is a button that removes all constraints for selected components. Don’t press
it :D It removes all the constraints, and it is better to have control over it.

 Button with number

Button with a number (usually “8”) is a default margin of constraints. The margin is a minimum
spacing from the border to the component itself. You can see this margin in the Attributes window as
well as in the top part, where you can see all the connections.

 Make connections in the Attributes window

To add connections, you can press the plus button in the Attributes tool window. There is a button for
each border: left, right, top and bottom. After pressing the button, the constraint is drawn with a blue
line. The number that appears for that constraint is a margin in dp.

 Change margins within the Attributes window

To set a margin for, e.g. the left margin, select it and enter a number (it is in dp). Furthermore, this is a
margin from the start left side of the constraint. The margin comes handy when making the spacing
between components or making a border for the screen.

 Make a connection by dragging the anchor

80
Make a connection by dragging and dropping the anchor. For that, you need to click on the circle for
an appropriate constraint and drag it to the element or border. Android Studio makes the connection
for you.

 Chain of constraints

To start a chain, you have to select more elements, then choose it from a context menu. Put 3 buttons
in a somewhat random order on the screen and try it. You can see the result on the image below.

Once you have a chain, you can toggle the chain mode and get a different alignment for elements
in the chain.

81
  

 Responsive design

You can check the ability of your design to adapt to screen size even before you run your app. The
first option is to use a device from the drop-down and check if the design applies to that device.

82
The second option is to manually change the design with a mouse using the anchor at the bottom right
side of the design. While you drag the anchor, you see templates for the size and device sizes so that
you can move it to the size of the existing device.

 Guidelines

If you need help with responsive design in the way of splitting the screen into two parts, a great way to
do it is by using Guidelines. With a guideline, you can set constraints for each part of the screen
separately.

Responsive design is a broad topic, and you can learn more on this link about responsive design,
where you can learn about design, dimensions, keeping values in resources and much more .

3.5 Gradle Build System:

Gradle is a build system (open source) that is used to automate building, testing, deployment, etc.
“build.gradle” are scripts where one can automate the tasks. For example, the simple task to copy some
files from one directory to another can be performed by the Gradle build script before the actual build
process happens. 

Every Android project needs a Gradle for generating an apk from the .java and .xml files in the project.
Simply put, a gradle takes all the source files (java and XML) and applies appropriate tools, e.g., converts
the java files into dex files and compresses all of them into a single file known as apk that is actually
used. There are two types of build.gradle scripts  

Top-level build.gradle
Module-level build.gradle
83
Top-level build.gradle:

It is located in the root project directory and its main function is to define the build configurations that
will be applied to all the modules in the project. It is implemented as:  

JAVA

// Top-level build file where you can add configuration

// options common to all sub-projects/modules.

buildscript {

repositories {

google()

mavenCentral()

dependencies {

classpath 'com.android.tools.build:gradle:3.4.3'

allprojects {

repositories {

google()

mavenCentral()

task clean(type: Delete) {

delete rootProject.buildDir

The top-level build.gradle supports various build configurations like:  

84
buildscript: This block is used to configure the repositories and dependencies for Gradle. 
dependencies: This block in buildscript is used to configure dependencies that the Gradle needs to
build during the project

Java

classpath
'com.android.tools.build:gradle:3.0.
1'

This line adds the plugins as a classpath dependency for gradle 3.0.1. 

1. allprojects: This is the block where one can configure the third-party plugins or libraries. For freshly
created projects android studio includes mavenCentral() and Google’s maven repository by default. 

2. task clean(type:Delete): This block is used to delete the directory every time the project is run. This
way the projects keep clean when someone modifies some config files like, during settings.gradle
which requires a complete clean. 

 Module-level build.gradle:

Located in the project/module directory of the project this Gradle script is where all the dependencies are
defined and where the SDK versions are declared. This script has many functions in the project which
include additional build types and override settings in the main/app manifest or top-level build.gradle file.
It is implemented as:  

Java

// The first line in this file indicates

// the Android plugin is applied for Gradle to
// this build
 
apply plugin : 'com.android.application'
 
android
{
    compileSdkVersion 30
    buildToolsVersion "30.0.3"
    {
        applicationId "example.mehakmeet.geeksforgeeks"
        minSdkVersion 19

85
         targetSdkVersion 30
        versionCode 1
        versionName "1.0"
    }
    buildTypes
    {
        release
        {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-
android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies
{
    implementation fileTree(include
                            : [ '*.jar' ], dir
                            : 'libs')
        implementation 'com.android.support:appcompat-v7:26.1.0'
}

The Module-level build.gradle supports various build configurations like:  

1. android: This block is used for configuring the specific android build options. 

compileSdkVersion – This is used to define the API level of the app and the app can use
the features of this and lower level. 
2. defaultConfig: 

 applicationId– This is used for identifying unique id for publishing of the app.
 minSdkVersion– This defines the minimum API level required to run the application.
 targetSdkVersion– This defines the API level used to test the app.
 versionCode– This defines the version code of the app. Every time an update needs to be
of the app, the version code needs to be increased by 1 or more.
 versionName– This defines the version name for the app. this could be increased by much
while creating an update.

3. buildTypes(release): 

 minifyEnabled– this will enable code shrinking for release build.

 proguardFiles– this will specify the progaurd settings file.

4. dependencies: This specifies the dependencies that are needed to build the project.

Both the top-level and module-level build.gradle files are the main script files for automating the tasks in
an android project and are used by Gradle for generating the APK from the source files.

3.6 Android Emulator :

86
The Android emulator is an Android Virtual Device (AVD), which represents a specific Android device.
We can use the Android emulator as a target device to execute and test our Android application on our
PC. The Android emulator provides almost all the functionality of a real device.

Testing Android applications on emulator are sometimes faster and easier than doing on a real device. For
example, we can transfer data faster to the emulator than to a real device connected through USB.

The Android emulator comes with predefined configurations for several Android phones, Wear OS,
tablet, Android TV devices.

There are several methods to do that but most of them are quite unreliable and confusing but in this
article, we are going to do that with some very easy methods with some very easy steps.

Method 1

Step 1: Opening Emulator

First of all, we need to open the Android Studio Emulator properly, so that we can see the app that we are
going to install in it. Before going to the 2nd Step we will also need that APK file in advance that we will
install. In this case, I am using a testapp.apk file that we are going to install.

Step 2: Navigate to the Path below

C:\Users\<UserName>\AppData\Local\Android\Sdk\platform-tools

We have to go to the path mentioned above and paste the APK file here, after that Shift+Right Click at
the same window and open the PowerShell window.

87
 Opening Powershell window

After opening Powershell type the following commands

.\adb.exe install testapp.apk

In the Powershell window type the following command and it will install the app in the emulator and
that’s it your APK is installed in the Emulator.

Method 2

This method is much simpler than 1st method. We just need the APK file to install it in the Emulator.
First of all, we still have to open the Emulator and after that drag, your APK file and drop it in the
emulator anywhere and that’s it will simply install that app in the Emulator.

88
In conclusion, we have learned two methods to install an APK file in the Android Studio Emulator. So if
we need to use any external third-party application in our Emulator then we can prefer the above methods
to do that.

3.7 Debugging :

Debugging is the process of finding and resolving the defects or the problem in a computer program or a
software. Basically, programs needs to be debug when codes are not working as desired. Those defect call
be called as errors in Computer Programming World.

Android studio provides debugging Tools which can be really handy in debugging process.We need some
understanding before getting hands on it.

So let’s get started..Android Studio provides a debugger that allows you to do the following and more

1. Select a device to debug your app on.

2. Set breakpoints in your Java, Kotlin, and C/C++ code.

3. Examine variables and evaluate expressions at runtime.

Enable Debugging

Before you can begin debugging, you need to prepare as follows:

Install LLDB

If your project includes C/C++ code, you need to install LLDB from the SDK Manager.

Enable debugging on your device

89
 If you're using the emulator, this is enabled by default. But for a connected device, you need to enable
debugging in the device developer options.

Run a debuggable build variant:

Generally when we create android project we have two build variant and default is debug and other is
release build variant. To check your build variant there is build variant panel at lower left of Android
Studio

This is how a build variant dialog looks like after you click on Build Variants in lower left corner of the
Android Studio.

Run the debugger

There are two ways to run the debugger alongside your app:

 Attach the debugger to an existing app process that runs on a device or emulator.
 Run the app with the debugger.

Both ways accomplish the same thing to a certain extent. Once you're familiar with both ways, you can
pick the one that you prefer or whichever one is required.

Attach the debugger to an app process

If your app is already running, you can attach the debugger to it.

To attach the debugger to an app process, follow these steps:

1. Click   Run ‘app'.

2. After the app runs on a device or emulator, click   Attach Debugger to Android Process.

A Choose Process dialog opens in which you can choose the process to which you want to attach the
debugger.

90
3. Select com.example.diceroller and then click OK.

A Debug pane appears at the bottom of Android Studio with a message that indicates that the debugger is
attached to the target device or emulator.

You attached the debugger to your app! Don't worry about what this means or what you can do with the
debugger because that's covered later in this codelab. Next, you learn how to launch an app with the
debugger already attached.

Run the app with the debugger

If you know that you want to use the debugger from the start, you can save time when you run the app
with the debugger. Furthermore, if you want to debug code that only runs when the app launches, you
need to launch the app with the debugger already attached.

To run the app with the debugger, follow these steps:

1. In the Debug pane, click   Stop ‘Android Debugger', and then close the app on the device or
emulator.

91
 1. Click   Debug ‘app'.

The same Debug pane appears at the bottom of Android Studio with some console output.

Now you know how to launch the debugger! Next, you learn how to use it.

When you first launch the debugger, you see a number of buttons in the Debug pane. At the top of
the Debug pane, you see the Debugger and Console buttons.

92
The Console button displays the logcat output of the app. If you have any log statements in your code, the
output displays as that piece of code executes.

The Debugger button displays three separate panes, which are empty right now because you aren't using
the debugger:

1. Frames
2. Variables
3. Overhead

Use common debugger features

Set a breakpoint

One of the main features of the debugger is that it lets you stop execution on a specific line of code with a
breakpoint.

To set a breakpoint in Android Studio, you need to navigate to a specific line of code and then click in the
gutter next to the line number. To unset a breakpoint, you need to click an existing breakpoint in the
gutter to make it disappear.

93
  To try it yourself, set a breakpoint where the imageResource variable is set.

Use the Resume Program button

In the last section, you set a breakpoint where the imageResource variable is set. This breakpoint causes
the execution to suspend upon this instruction. When code execution is suspended with the debugger, you
likely need to continue execution to continue running the app. The most direct way to do this is to use
the Resume Program button.

To resume the program, follow these steps:

1. Click   Debug ‘app'. You should see something like this image after the app launches:

94
Before you resume the program, it's important to explain some of what you see on the screen when the
debugger suspends execution:

 Many of the buttons in the Debug pane are now clickable.

 The Frames pane displays a lot of information, which includes a highlighted reference to the line
where the breakpoint was set.
 The Variables pane displays a number of items, but this app doesn't have many variables so there
isn't a lot of information that is relevant in the scope of this codelab at the moment. However, the
ability to inspect variables is an essential feature of the debugger because it yields insight into
what happens in the code at runtime. This codelab goes into more detail about how to inspect
variables later.

If you look at the app on your device or emulator, you notice that the screen is blank because the app is
suspended on a line of code. More specifically, execution stopped at the breakpoint and the UI hasn't yet
rendered.

Bear in mind that the app won't always stop immediately only because a breakpoint was set. It depends on
where you place a breakpoint in the code. In this case, you placed it on a line that executes when the app
starts.

95
The key thing to remember is that the app only suspends at a breakpoint when an attempt to execute the
line at which the breakpoint was set occurs. There are multiple ways to move the debugger forward, but
for now you use the Resume Program button.

1. Click   Resume Program.

You should now see something that looks like this image:

The majority of the information disappears and the buttons are once again unclickable. The app also
appears as normal on your device or emulator. The reason for this is that the code is no longer suspended
at the breakpoint and the app is in a normal running state. The debugger is attached, but it doesn't do
much until there's an attempt to execute a line of code that has a breakpoint set. Leave this breakpoint in
place because it's useful in the following examples.

Use the Step Into button

96
The Step Into button of the debugger is a handy way to drill deeper into the code at runtime. If an
instruction makes a call to a method or another piece of code, the Step Into button lets you enter the code
without the need to navigate there manually before you launch the debugger to set a breakpoint.

To use the Step Into button, follow these steps:

1. Create a breakpoint in the setContent lambda body in the onCreate() function of

the MainActivity class where the DiceRollerApp()function is called.

1. Click   Debug ‘app' to rerun the app with the debugger. The execution suspends at the line
where the DiceRollerApp() function is called.
2. Click   Step Into.

Now line 52 is highlighted and the Frames pane in the Debug pane indicates that the code is suspended on
line 52.

97
If you expand the Frames pane, you can see that the line after the highlighted line starts
with invoke: followed by a line number, which is 44 in the previous image. This is what is referred to as
the call stack. Essentially, it shows the chain of calls that lead the code execution to the current line. In
this case, line 44 holds an instruction that calls the DiceRollerApp() function.

When you clicked the Step Into button when the debugger stopped at the breakpoint set on that function
call, the debugger stepped into that function, which leads the execution to line 52 where the function is
declared. The highlighted line indicates where the execution is suspended. If the lines after the
highlighted line have line numbers associated with them, it's an indication of the path of execution. In this
particular case, the debugger indicates that an instruction on line 44 brought you to line 52.

1. Click   Resume Program.

This should lead you to the original breakpoint that you set. You might understand a bit more about what
you saw when you stopped execution in the first example. This is the same picture from the sixth step of
the Resume program section:

98
 In the call stack, you can see that the DiceWithButtonAndImage() function suspended on line 63 and the
function was called from line 53 in the DiceRollerApp() function, which was called on line 44. The call-
stack feature can help you understand the path of execution. This is very helpful when a function is called
from many different places in the app.

The Step Into button provides a way to enter a function and suspend the execution without setting a
breakpoint in the function itself. In this case, you set a breakpoint on the call to
the DiceRollerApp() function. When you click the Step Into button, the execution suspends in
the DiceRollerApp() function.

Dice Roller is a fairly small app because there aren't many files, classes, or functions. When you work
with bigger apps, the Step Into feature of the debugger becomes more useful because it gives you the
option to drill down into the code without the need to navigate the code on your own.

Use the Step Over button

The Step Over button provides another means by which you can step through your app code at runtime. It
moves the execution to the next line of code and advances the debugger.

To use the Step Over button, follow these steps:

 Click   Step Over.

99
You now see that the debugger suspended the code on the next line of execution, which is line 53. You
can proceed to step through each line, consecutively.

100
 Use the Step Out button

The Step Out button does the opposite of the Step Into button. Rather than drill down into the call stack, the Step Out button navigates up to the call stack.

To use the Step Out button, follow these steps:

1. Click   Step Out.

Can you guess what line the program suspends on?

1. Notice that the debugger stepped out of the DiceRollerApp() function and onto the next line after the function's execution on line 45. Stepping out doesn't return to line 44 because that line already executed. Therefore, stepping out
takes you to line 45.

The Step Out button is a useful tool when you find yourself too deep in a method call stack. It lets you
work your way up the call stack without the need to step through all the code for each method that you
stepped into.

Inspect variables

Earlier in the codelab, there was a brief description of the Variables pane, which provides a more in-depth
explanation of how to inspect the variables shown in the pane to help you debug issues in your app.

To inspect the variables, follow these steps:

1. Click the breakpoint to remove it from where the DiceRollerApp() function is called, but leave the
breakpoint where the imageResource variable is set.

101
 2. Click   Debug ‘app'. You should see that the result$delegate variable is a MutableState with a
value of 1. That is because when the variable is defined, it is instantiated with
a mutableStateOf 1. MutableState means that the result variable holds a state that can be changed.

Note: The result$delegate variable in the Variables pane refers to the result variable in the code.

The $delegate notation is there because the result variable is a remember delegate.

1. Click   Resume Program.

2. In the app, click Roll. Your code suspends at the breakpoint again and you may see a different
value for the result$delegate variable.

In this image, the mutable state of the result$delegate variable holds a value of 6, This demonstrates how
you can inspect variables at runtime with the debugger. In a more full-featured app, the value of a
variable could potentially cause a crash. When you use the debugger to inspect variables, you can gain
more insight into the details of the crash so that you can fix the bug.

 If you have your own build variants:

You must use a build variant that includes debuggable true in the build configuration which can be
accessed from build.gradle. Usually, you can just select the default "debug" variant that's included in
every Android Studio project (even though it's not visible in the build.gradle file). But if you define new
build types that should be debuggable, you must add `debuggable true` to the build type. 

102
Now we are ready to start our debugger if this is the first time you can follow below steps else if the app
is already running follow app is already running section.

103
 Chapter 4:
Development of Student Careers

104
 Disclaimer: Before starting the process of development of application, following terms &
concepts are necessary to learn:

4.1 Glossary:

1) Activity:
In android, Activity represents a single screen with a user interface (UI) of an application and it
will act an entry point for users to interact with an app .Generally, the android apps will contain multiple
screens and each screen of our application will be an extension of Activity class. By using activities, we
can place all our android application UI components in a single screen. From the multiple activities in
android app, one activity can be marked as a main activity and that is the first screen to appear when we
launch the application. In android app each activity can start another activity to perform different actions
based on our requirements.

Generally, in android there is a minimal dependency between the activities in an app. To use
activities in application we need to register those activities information in our app’s manifest file
(AndroidMainfest.xml) and need to manage activity life cycle properly. Generally, the activities in our
android application will go through a different stage in their life cycle. In android, Activity class have 7
callback methods like onCreate(), onStart(), onPause(), onRestart(), onResume(), onStop() and
onDestroy() to describe how the activity will behave at different stages. By using activity cal-back
methods we can define how our activity can behave when the user enters or leaves our application.

105
2) Adapter:
To fill data in a list or a grid we need to implement Adapter. Adapters acts like a bridge between
UI component and data source. Here data source is the source from where we get the data and UI
components are list or grid items in which we want to display that data.

There are the some commonly used Adapter in Android used to fill the data in the UI components.

 BaseAdapter – It is parent adapter for all other adapters

 ArrayAdapter – It is used whenever we have a list of single items which is backed by an array
 Custom ArrayAdapter – It is used whenever we need to display a custom list
 SimpleAdapter – It is an easy adapter to map static data to views defined in your XML file

106
  Custom SimpleAdapter – It is used whenever we need to display a customized list and needed to
access the child items of the list or grid

3)ADB:
Android Debug Bridge (adb) is a versatile command-line tool that lets you communicate with a
device. The ADB is typical, used to communicate with a smartphone, tablet, smartwatch, set-top box, or
any other device that can run the Android operating system. We can do things on an Android device that
may not be suitable for everyday use, like, install apps outside of the Play Store, debug apps, access
hidden features, and bring up a UNIX shell, etc. For security reasons, Developer Options need to be
unlocked and you need to have USB Debugging Mode enabled as well. Not only that, but you also need
to authorize USB Debugging access to the specific PC that you’re connected to with a USB cable.

It requires three components:

a) client
b) daemon
c) server
4) AlertDialog:
Alert Dialog shows the Alert message and gives the answer in the form of yes or no. Alert Dialog
displays the message to warn you and then according to your response the next step is processed.Android
Alert Dialog is built with the use of three fields: Title, Message area, Action Button.

Alert Dialog code has three methods:

a) setTitle() method for displaying the Alert Dialog box Title
b) setMessage() method for displaying the message
c) setIcon() method is use to set the icon on Alert dialog box.

Then we add the two Button, setPositiveButton and setNegativeButton to our Alert Dialog Box as shown
below.

107
5) Android R.java file:
Android R.java is an auto-generated file by AAPT (Android Asset Packaging Tool) that contains
resource IDs for all the resources of res/ directory. If you create any component in the activity_main.xml
file, id for the corresponding component is automatically created in this file. This id can be used in the
activity source file to perform any action on the component.

Note: If you delete R.jar file, android creates it automatically

6) AppCompatActivity:
AppCompatActivity is a class from e v7 appcompat library. This is a compatibility library that
back ports some features of recent versions of Android to older devices. If you use support library, you
have to have all your activities extend AppCompatActivity instead of the Activity base class. Base class
for activities that wish to use some of the newer platform features on older Android devices. Some of
these backported features include: Using the action bar, including action items, navigation modes and
more with the setSupportActionBar(Toolbar) API.

7) AppCompatDelegate:
This class represents a delegate which you can use to extend AppCompat's support to any
Activity.When using an AppCompatDelegate, you should call the following methods instead of the
Activity method of the same name:

addContentView(android.view.View, android.view.ViewGroup.LayoutParams)
setContentView(int)

108
 setContentView(android.view.View)
setContentView(android.view.View, android.view.ViewGroup.LayoutParams)
requestWindowFeature(int)
hasWindowFeature(int)
invalidateOptionsMenu()
startSupportActionMode(androidx.appcompat.view.ActionMode.Callback)
setSupportActionBar(androidx.appcompat.widget.Toolbar)
getSupportActionBar()
getMenuInflater()
findViewById(int)

The following methods should be called from the Activity method of the same name:

onCreate(android.os.Bundle)
onPostCreate(android.os.Bundle)
onConfigurationChanged(android.content.res.Configuration)
onStart()
onStop()
onPostResume()
onSaveInstanceState(Bundle)
setTitle(CharSequence)
onStop()
onDestroy()

An activity can only be linked with one AppCompatDelegate instance, therefore the instance
returned from create(Activity, AppCompatCallback) should be retained until the Activity is destroyed.

109
7)APK:
An APK (Android Package Kit) is the file format for applications used on the Android operating
system. APK files are compiled with Android Studio, which is the official integrated development
environment (IDE) for building Android software.An APK file includes all of the software program’s
code and assets. Developers who create applications for use on Android devices must compile their
application into the APK format prior to uploading to Google Play, the official marketplace for Android
applications.

APK files can also be distributed directly to other Android users for installation on their devices.
Android users can grant permission to their device to install unknown apps if they wish to access APK
files from another source and install them directly. Android users may wish to install an APK directly if
they are beta testing an unreleased version of an application, or due to a device restriction, are unable to
download an app from Google Play.

8) Application Context:
This context is tied to the life cycle of an application. Mainly it is an instance that is a singleton
and can be accessed via getApplicationContext(). Some use cases of Application Context are:

If it is necessary to create a singleton object

During the necessity of a library in an activity

110
getApplicationContext():
It is used to return the context which is linked to the Application which holds all activities running inside
it. When we call a method or a constructor, we often have to pass a context and often we use “this” to
pass the activity context or “getApplicationContext” to pass the application context. This method is
generally used for the application level and can be used to refer to all the activities.

Activity Context
It is the activity context meaning each and every screen got an activity. For example, EnquiryActivity
refers to EnquiryActivity only and AddActivity refers to AddActivity only. It is tied to the life cycle of
activity. It is used for the current context. The method of invoking the Activity Context is getContext().

Some use cases of Activity Context are:

The user is creating an object whose lifecycle is attached to an activity.

Whenever inside an activity for UI related kind of operations like toast, dialogue, etc.,
getContext():
It returns the Context which is linked to the Activity from which it is called. This is useful when we want
to call the context from only the current running activity.

9) Array:
Array can be defined as a contiguous memory locations used to store the homogeneous data types.
In simple words, it is a variable that can store multiple values of single data type. To assign some value in
the memory there are two thing mandatory in program. First is its declaration and then its initialization.
So same principle is applied on Array also.
To declare it we can simply write as
int[] onedimensionalarray= new int[5];
//OR
int onedimendionalarray[]=new int[5];

to initialize that particular variable. Here it is assigned the values using index of that particular array.
onedimensionalarray[0]=10; // Particular value is initialized
We can also use shorter index to declare and directly initialize values:

111
int[] onedimensionalarray= {10,30,20,50,15};

10) ArrayList:
ArrayList is a dynamic data structure in which you can add or remove any number of elements
and those elements are stored in ordered sequence. It may also contain duplicate values.ArrayList are the
implementations of List interface. The package you required to import the ArrayList is import
java.util.ArrayList; In ArrayList, the items to be added are only of object type. No primitive data types
(i.e., int, char etc) are allowed to insert in ArrayList.

Syntax of ArrayList:
It’s very easy to use ArrayList, below is the syntax to declare it:

ArrayList arrayListDemo = new ArrayListDemo();

String ArrayList Declaration:
ArrayList<String> arrayListDemo = new ArrayListDemo<String>();
By using this syntax, an ArrayList is created which you can use to store characters. Here arrayListDemo
is the name of this particular ArrayList.

ArrayList Methods:
ArrayList is a subclass of AbstractList class and it implements List Interface. It has various
methods that are defined and inherited from its parent class. Below is the list of those methods with
example:
a) boolean add(Object o): It adds an element of Specific Object type at the end of Arraylist as no
index is mentioned in the method.
It returns True if element is successfully added, and returns false if it is not.
112
 b) void clear (): This method removes all the elements of the arraylist.
c) Object clone (): This method returns the exact same copy of the arraylist object.
d) boolean contains (Object element): This method returns true if the calling ArrayList object
contains the specific element as given in the argument list, otherwise it returns false.

11) AVD:
Android virtual device (AVD) is an emulator which is used to replicate the functionality of an
android phone, tablet, android wear or TV to test our android applications locally. By using the AVD
manager interface in the android studio we can set up an android virtual device emulator to test our
applications.

12) Bitmap File:

A bitmap graphic file (.png, .webp, .jpg, or .gif). Creates a BitmapDrawable. Nine-Patch File
A PNG file with stretchable regions to allow image resizing based on content (.9.png). Creates a
NinePatchDrawable.

a) Layer List:
A Drawable that manages an array of other Drawables. These are drawn in array order, so the
element with the largest index is be drawn on top. Creates a LayerDrawable.
b) State List:
An XML file that references different bitmap graphics for different states (for example, to use a
different image when a button is pressed). Creates a StateListDrawable.
c) Level List
An XML file that defines a drawable that manages a number of alternate Drawables, each
assigned a maximum numerical value. Creates a LevelListDrawable.

 Transition Drawable: An XML file that defines a drawable that can cross-fade between two
drawable resources. Creates a TransitionDrawable.
 Inset Drawable: An XML file that defines a drawable that insets another drawable by a specified
distance. This is useful when a View needs a background drawable that is smaller than the View's
actual bounds.
 Clip Drawable: An XML file that defines a drawable that clips another Drawable based on this
Drawable's current level value. Creates a ClipDrawable.

113
  Scale Drawable: An XML file that defines a drawable that changes the size of another Drawable
based on its current level value. Creates a ScaleDrawable
 Shape Drawable: An XML file that defines a geometric shape, including colors and gradients.
Creates a GradientDrawable.

13) Context:
The circumstances that form the setting for an event, statement, or idea, and in terms of which it
can be fully understood. Looking at this definition we come across two things:

a) The context tells us about the surrounding information.

b) It is very important to understand the environment which we want to understand.

Similarly, when we talk about the Android Programming context can be understood as something which
gives us the context of the current state of our application. We can break the context and its use into three
major points:

 It allows us to access resources.

 It allows us to interact with other Android components by sending messages.
 It gives you information about your app environment.

In the official Android documentation, context is defined as:

Interface to global information about an application environment. This is an abstract class whose
implementation is provided by the Android system. It allows access to application-specific resources and
classes, as well as up-calls for application-level operations such as launching activities, broadcasting and
receiving intents, etc.

How Does This Work?

114
1. It is the context of the current/active state of the application.
2. It is used to get information about the activity and application.
3. It is used to get access to resources, databases, and shared preferences, etc.
4. Both the Activity and Application classes extend the Context class.

Types of Contexts in Android

There are mainly two types of contexts are available in Android.
1. Application Context
This context is tied to the life cycle of an application. Mainly it is an instance that is a singleton
and can be accessed via getApplicationContext(). Some use cases of Application Context are:

If it is necessary to create a singleton object

During the necessity of a library in an activity
getApplicationContext():
It is used to return the context which is linked to the Application which holds all activities running
inside it. When we call a method or a constructor, we often have to pass a context and often we
use “this” to pass the activity context or “getApplicationContext” to pass the application context.
This method is generally used for the application level and can be used to refer to all the activities.

2. Activity Context
It is the activity context meaning each and every screen got an activity. For example,
EnquiryActivity refers to EnquiryActivity only and AddActivity refers to AddActivity only. It is
tied to the life cycle of activity. It is used for the current context. The method of invoking the
Activity Context is getContext().

14) DocumentReference:
public class DocumentReference extends Object
A DocumentReference refers to a document location in a Cloud Firestore database and can be
used to write, read, or listen to the location. There may or may not exist a document at the referenced
location. A DocumentReference can also be used to create a CollectionReference to a subcollection.

Subclassing Note: Cloud Firestore classes are not meant to be subclassed except for use in test mocks.
Subclassing is not supported in production code and new SDK releases may break code that does so.

115
15) Drawable:
A drawable resource is a general concept for a graphic that can be drawn to the screen and which
you can retrieve with APIs such as getDrawable(int) or apply to another XML resource with attributes
such as android:drawable and android:icon.

16) Font resources:

A font resource defines a custom font that you can use in your app. Fonts can be individual font
files or a collection of font files, known as a font family and defined in XML.

Bundled font:
You can bundle fonts as resources in an app. Fonts are compiled in R file and are automatically available
in the system as a resource. You can then access these fonts with the help of the font resource type.

file location:
res/font/filename.ttf (.ttf, .ttc, .otf, or .xml)
The filename is used as the resource ID.
resource reference:
In XML: @[package:]font/font_name
Downloadable font:
A downloadable font resource defines a custom font that you can use in an app. This font is not available
in the app itself; instead, the font is retrieved from a font provider.

17) Fragment:
A Fragment represents a reusable portion of your app's UI. A fragment defines and manages its
own layout, has its own lifecycle, and can handle its own input events. Fragments cannot live on their
own--they must be hosted by an activity or another fragment. The fragment’s view hierarchy becomes
part of, or attaches to, the host’s view hierarchy.
Dividing your UI into fragments makes it easier to modify your activity's appearance at runtime.
While your activity is in the STARTED lifecycle state or higher, fragments can be added, replaced, or
removed. You can keep a record of these changes in a back stack that is managed by the activity, allowing
the changes to be reversed.

116
18) Gradle:
Gradle is an open-source build automation tool that is designed to be flexible enough to build
almost any type of software.

The following is a high-level overview of some of its most important features:

 High performance
 JVM foundation
 Convention
 Extensiblity
 IDE support
 Insights

19) Handlers:
A Handler is a threading class defined in the android.os package through which we can send and
process Message and Runnable objects associated with a thread’s MessageQueue.
You start by creating a Handler instance. Then that instance gets associated with a single thread as well as
that thread’s message queue. The Handler you’ve just created will then get bound to the thread or
message queue of the thread that is creating it. Hence it can then deliver messages and runnables to that
message queue and execute them as they come out of the message queue.
Handler has two main uses:
a) Scheduling of messages and runnables that need to be executed in the future.
b) Enqueueing actions that need to be performed in the background thread.

 Handler and Looper

117
 Handler is a class fundamental to how we do thread in android, at the infrastructure level. It works
hand in hand with the Looper. Together they underpin everything that the main thread does—
including the invocation of the Activity lifecycle methods.

Looper will take care of dispatching work on its message-loop thread. On the other hand, Handler will
serve two roles:
a) First it will provide an interface to submit messages to its Looper queue.
b) Secondly it will implement the call-back for processing those messages when they are dispatched
by the Looper.

20) Intents:
An Intent is a messaging object you can use to request an action from another app component.
Although intents facilitate communication between components in several ways, there are three
fundamental use cases:

A. Starting an activity
An Activity represents a single screen in an app. You can start a new instance of an Activity by
passing an Intent to startActivity(). The Intent describes the activity to start and carries any
necessary data. If you want to receive a result from the activity when it finishes, call
startActivityForResult(). Your activity receives the result as a separate Intent object in your
activity's onActivityResult() callback.

B. Starting a service

118
 A Service is a component that performs operations in the background without a user interface.
With Android 5.0 (API level 21) and later, you can start a service with JobScheduler. For more
information about JobScheduler, see its API-reference documentation. For versions earlier than
Android 5.0 (API level 21), you can start a service by using methods of the Service class. You can
start a service to perform a one-time operation (such as downloading a file) by passing an Intent to
startService(). The Intent describes the service to start and carries any necessary data. If the
service is designed with a client-server interface, you can bind to the service from another
component by passing an Intent to bindService().

C. Delivering a broadcast
A broadcast is a message that any app can receive. The system delivers various broadcasts for
system events, such as when the system boots up or the device starts charging. You can deliver a
broadcast to other apps by passing an Intent to sendBroadcast() or sendOrderedBroadcast().

21) J.SON file:

JSON stands for JavaScript Object Notation. It is an independent data exchange format and is the
best alternative for XML.
Android provides four different classes to manipulate JSON data. These classes are JSONArray,
JSONObject, JSONStringer and JSONTokenizer.

22)LayoutInflator:
Instantiates (to represent) a layout XML file into its corresponding android.view.View objects. It
is never used directly. Instead, use android.app.Activity#getLayoutInflater() or
android.content.Context#getSystemService to retrieve a standard LayoutInflater instance that is already
hooked up to the current context and correctly configured for the device you are running on.
To create a new LayoutInflater with an additional Factory for your own views, you can use
cloneInContext to clone an existing ViewFactory, and then call setFactory on it to include your Factory.

119
23) Logcat:
Logcat is a command-line tool that dumps a log of system messages, including stack traces when
the device throws an error and messages that you have written from your app with the Log class. This
page is about the command-line logcat tool, but you can also view log messages from the Logcat window
in Android Studio.

24) MaterialAlertDialogBuilder
An extension of AlertDialog.Builder for use with a Material theme (e.g.,
Theme.MaterialComponents).

This Builder must be used in order for AlertDialog objects to respond to color and shape theming
provided by Material themes. The type of dialog returned is still an AlertDialog; there is no specific
Material implementation of AlertDialog.

25) Menu Resource:

A menu resource defines an application menu (Options Menu, Context Menu, or submenu) that
can be inflated with MenuInflater.

For a guide to using menus, see the Menus developer guide.

file location:
res/menu/filename.xml
The filename will be used as the resource ID.
compiled resource datatype:

120
Resource pointer to a Menu (or subclass) resource.
resource reference:
In Java: R.menu.filename
In XML: @[package:]menu.filename

26) Mipmap:
The mipmap folders are for placing your app/launcher icons (which are shown on the homescreen)
in only. Any other drawable assets you use should be placed in the relevant drawable folders as before.

According to this Google blogpost:

It’s best practice to place your app icons in mipmap- folders (not the drawable- folders) because they are
used at resolutions different from the device’s current density.

When referencing the mipmap- folders ensure you are using the following reference:

android:icon="@mipmap/ic_launcher"
The reason they use a different density is that some launchers actually display the icons larger than they
were intended. Because of this, they use the next size up.
27) Navigation:
Navigation refers to the interactions that allow users to navigate across, into, and back out from
the different pieces of content within your app. Android Jetpack's Navigation component helps you
implement navigation, from simple button clicks to more complex patterns, such as app bars and the
navigation drawer. The Navigation component also ensures a consistent and predictable user experience
by adhering to an established set of principles.

The Navigation component consists of three key parts that are described below:

A. Navigation graph: An XML resource that contains all navigation-related information in one
centralized location. This includes all of the individual content areas within your app, called
destinations, as well as the possible paths that a user can take through your app.

B. NavHost: An empty container that displays destinations from your navigation graph. The
Navigation component contains a default NavHost implementation, NavHostFragment, that
displays fragment destinations.
121
 C. NavController: An object that manages app navigation within a NavHost. The NavController
orchestrates the swapping of destination content in the NavHost as users move throughout your
app.

As you navigate through your app, you tell the NavController that you want to navigate either
along a specific path in your navigation graph or directly to a specific destination. The NavController then
shows the appropriate destination in the NavHost.

28) Nullable:
Denotes that a parameter, field or method return value can be null. When decorating a method call
parameter, this denotes that the parameter can legitimately be null and the method will gracefully deal
with it. Typically used on optional parameters. When decorating a method, this denotes the method might
legitimately return null.

29) pagerAdapter:
Base class providing the adapter to populate pages inside of a ViewPager. You will most likely
want to use a more specific implementation of this, such as
androidx.fragment.app.FragmentPagerAdapter or androidx.fragment.app.FragmentStatePagerAdapter.

When you implement a PagerAdapter, you must override the following methods at minimum:

 instantiateItem
 destroyItem
 getCount
 isViewFromObject

PagerAdapter is more general than the adapters used for AdapterViews. Instead of providing a
View recycling mechanism directly ViewPager uses callbacks to indicate the steps taken during an
update. A PagerAdapter may implement a form of View recycling if desired or use a more sophisticated
method of managing page Views such as Fragment transactions where each page is represented by its
own Fragment.

122
 ViewPager associates each page with a key Object instead of working with Views directly. This
key is used to track and uniquely identify a given page independent of its position in the adapter. A call to
the PagerAdapter method startUpdate indicates that the contents of the ViewPager are about to change.
One or more calls to instantiateItem and/or destroyItem will follow, and the end of an update will be
signaled by a call to finishUpdate. By the time finishUpdate returns the views associated with the key
objects returned by instantiateItem should be added to the parent ViewGroup passed to these methods and
the views associated with the keys passed to destroyItem should be removed. The method
isViewFromObject identifies whether a page View is associated with a given key object.

A very simple PagerAdapter may choose to use the page Views themselves as key objects,
returning them from instantiateItem after creation and adding them to the parent ViewGroup. A matching
destroyItem implementation would remove the View from the parent ViewGroup and isViewFromObject
could be implemented as return view == object;

30) SDK:
A software development toolkit (SDK) is a set of software tools and programs provided by
hardware and software vendors that developers can use to build applications for specific platforms. These
providers make their SDKs available to help developers easily integrate their apps with their services.
SDKs include documentation, application programming interfaces (APIs), code samples, libraries and
processes, as well as guides that developers can use and integrate into their apps. Developers can use
SDKs to build and maintain applications without having to write everything from scratch.

31) SharedPrefrences:
One of the most Interesting Data Storage options Android provides its users is Shared Preferences.
Shared Preferences is the way in which one can store and retrieve small amounts of primitive data as
123
key/value pairs to a file on the device storage such as String, int, float, Boolean that make up your
preferences in an XML file inside the app on the device storage. Shared Preferences can be thought of as
a dictionary or a key/value pair.

You can create a new shared preference file or access an existing one by calling one of these methods:

A. getSharedPreferences() — Use this if you need multiple shared preference files identified by
name, which you specify with the first parameter. You can call this from any Context in your app.

B. getPreferences() — Use this from an Activity if you need to use only one shared preference file
for the activity. Because this retrieves a default shared preference file that belongs to the activity,
you don't need to supply a name.

32) Strings.xml:
strings.xml: One of the most important as well as widely used values file is the strings.xml due to
its applicability in the Android project. Basic function of the strings.xml is to define the strings in one file
so that it is easy to use same string in different positions in the android project plus it makes the project
looks less messy.
We can also define an array in this file as well.

Note: Android studio gives a warning in layout xmls if a string is used in that file, thus it is a good
practice to store all hardcoded strings in strings.xml file.

33) Styles.xml:
styles.xml: Another important file in the values folder is the styles.xml where all the themes of the
Android project are defined. The base theme is given by default having the option to customize or make
changes to the customized theme as well. Every theme has a parent attribute which defines the base of the
theme. There are a lot of options to choose from depending on the need of the Android project.

34) Toasts:
A toast provides simple feedback about an operation in a small popup. It only fills the amount of
space required for the message and the current activity remains visible and interactive. Toasts
automatically disappear after a timeout.For example, clicking Send on an email trigger a "Sending
message..." toast, as shown in the following screen capture:
124
Alternatives to using toasts
A. If your app is in the foreground, consider using a snack bar instead of using a toast. Snack bars
include user-actionable options, which can provide a better app experience.

B. If your app is in the background, and you want users to take some action, use a notification
instead.

Instantiate a Toast object:

Use the makeText() method, which takes the following parameters:

 The application Context.

 The text that should appear to the user.
 The duration that the toast should remain on the screen.
 The makeText() method returns a properly initialized Toast object.

Show the toast:

To display the toast, call the show() method, as demonstrated in the following example
Java
Context context = getApplicationContext(); CharSequence text = "Hello toast!";
int duration = Toast.LENGTH_SHORT;
Toast toast = Toast.makeText(context, text, duration);
toast.show();

35) URI:
A Uniform Resource Identifier (URI) is a unique sequence of characters that identifies a logical or
physical resource used by web technologies. URIs may be used to identify anything, including real-world
objects, such as people and places, concepts, or information resources such as web pages and books.
Some URIs provide a means of locating and retrieving information resources on a network (either on the
Internet or on another private network, such as a computer filesystem or an Intranet); these are Uniform
Resource Locators (URLs). A URL provides the location of the resource.
A URI identifies the resource by name at the specified location or URL. Other URIs provide only
a unique name, without a means of locating or retrieving the resource or information about it, these are

125
Uniform Resource Names (URNs). The web technologies that use URIs are not limited to web browsers.
URIs are used to identify anything described using the Resource Description Framework (RDF), for
example, concepts that are part of an ontology defined using the Web Ontology Language (OWL), and
people who are described using the Friend of a Friend vocabulary would each have an individual URI.

36) util.objects;
android. util, Provides common utility methods such as date/time manipulation, base64 encoders
and decoders, string and number conversion methods, and XML utilities. This class consists of static
utility methods for operating on objects, or checking certain conditions before operation. These utilities
include null-safe or null-tolerant methods for computing the hash code of an object, returning a string for
an object, comparing two objects, and checking if indexes or sub-range values are out of bounds.

37) Value:
colors.xml: The colors.xml is an XML file which is used to store the colors for the resources.
An Android project contains 3 essential colours namely:
a) colorPrimary
b) colorPrimaryDark
c) colorAccent
These colors are used in some predefined resources of the android studio as well. These colors as needed
to be set opaque otherwise it could result in some exceptions to arise.

38) ViewHolder:
A ViewHolder describes an item view and metadata about its place within the RecyclerView. The
ViewHolder design pattern enables you to access each list item view without the need for the look up,
saving valuable processor cycles. Specifically, it avoids frequent call of findViewById() during ListView
scrolling, and that will make it smooth.

126
4.2 Procedure for Developing Student Careers :

Step 1: Open android Studio, click on New Project

Select Empty Activity
Enter Name of the Project: NizamPc
Set Package name: com.example.nizampc
Set location: C:\Users\deekonda venkatesh\Nizampc
Set Language: Java
Set Minimum SDK: API 21: Android 5.0 (Lollipop) (app will run approximately 99.3% devices)
Hit Finish to Create a project
Step 2: You will see two files MainActivity.java and activity_main.xml
Design Splash
Create an Activity
Right Click on the Package>> New>> Activity>> Empty Activity>
Activity Name: Splash
Check Generate a Layout File
Layout Activity: activity_splash
Check Launcher Activity
Hit Finish to create Splash Activity
activity_splash.xml
Add an ImageView in Layout file
Set ID: icon
Add an Image to Drawable folder and Provide value to your srcCompat attribute
srcCompat: @drawable/icon (name of the image is icon)
Splash.java
Create LauncherManager Class
Create a variable of SharedPreferences
Create an Editor variable for SharedPreferences
And following Code is used
Create an instance of launcherManager; in public class Splash AppCompatActivity
constructor.
Remove the title for the Activity using requestWindowFeature

127
 Create a new Handler Instance Constructor
Write an if condition stating
If user uses the app for very first-time open Slider Activity class
using Intents
Else open Dashboard Activity using Intent
Set delayMillis : 3000;

Create Dash board Activity

Add Scrollview to layout
Add Constraint layout inside Scrollview
Add Textview for Title
Add Textview for Title tag
Add Imageview for App Logo
Add Linear layout inside Constraint layout and repeat it 2 times
Add Cardview Linear layout and create 6 tabs

Create Resume Card Activity

Create Job Card Activity

Create Profile Activity
Create Settings Activity
Create Queries Activity
Create Contact Activity

128
 Chapter 5:
Student Careers (a Job Guide)

129
5.1 Introduction:
A Job Guide helps the Nizam College students helping them to tackle some of their real-world issues.
The moto behind the creation of this application is to bring all the resources useful to the students at one
place which can be accessed with the go of a click.
This application has 3 important modules which are core to this application those are Resume, Job, and
Profile.
Resume is a feature that is a part of the application helping students in building resume by simpling
giving details and by one click and previewing different styles of resume templates and by downloading
resume one can upload resume for different jobs.A student can create his/her resume by our app, by just
simple one click after giving details.
Job is another part of the application where students get different companies job vacancies in-detail and
students can apply for jobs directly.
Profile is the last important part of application we user can access his daily activities and get status of job
interviews that he applied for.

5.2 Features:
Some of the Key features of the Application are as follows:
1. Easy to use: Usability of any application can be categorized into complex and easy based on the
navigation and the GUI, this application has a comfortable navigation control and GUI of this application
is also moderate in complexity thus making its users to navigate to the desired location easily, making its
usability easy.
2. Simple GUI: GUI or to elaborate Graphical User Interface is the important factor which has a major
impact on any software and its usability, if the Interface is simple the user would be comfortable in using
the application, interface is nothing but the screen with which user interacts in order to obtain his/her
queries resolved. This application can be rated 4 out of 5 in the simplicity leaving a room for further
improvement.

130
3. Embedded with numerous functionalities: this application is like many in one featured product,
coming as an outcome of the teams’ efforts. This application has 3 important modules such as, Resume,
Job and Profile Activity. This are not the complete functionalities there are few more.
4. Provides you the information on the go of a click: The Resume is a activity helps in building
student’s resume and job is a activity were students get information about placement drives and off-
campus placement drives and also information about job-mela were students can find multiple options for
applying jobs.

5.3 Major Modules:

Student Careers has got three major modules segmented inside to it, below are the three modules
listed in a serial order:
1. Resume
2. Job
3. Profile

5.4 Resume:
A resume (or “CV” outside of the US) is a formal document that provides an overview of your
professional qualifications, including your relevant work experience, skills, education, and notable
accomplishments. Usually paired with a cover letter, a resume helps you demonstrate your abilities and
convince employers you’re qualified and hireable.

This application has a digital version of the resume in the dashboard activity , this resume activity act as a
resume builder for students of Nizam College.

131
5.4.1 Advantages:
 Simple to create resume
 Easy access
 Multiple templates
 No need of computer
 Easy to download
 Reduces time
 Easy to edit resume

5.5 Job:
The Job is Activity were the placement cell prepares the students to face campus interviews imparting
training in employable skills like Aptitude skills (Verbal Ability, Quantitative & Logical Reasoning),
Body Language, Resume Writing, Interview Skills, Group Discussions, overall personality development
skills viz., Goal Setting, Confidence Building, Motivation, Positive Thinking, Flexibility & other soft
skills. And also provides studentss to Apply for different vacancies in placement drives.

5.5.1 Advantages :
 Helps in finding student-fit job.
 Provides different internships jobs.
 Helps in knowing about by sending notifications.
 Share Career links of different Companies.
 Helps in Career in big Companies.

5.6 Profile:
132
Literal meaning of a profile means A summary or collection of information, especially about a person.
Coming to digital world its meaning changes as in, A specific page or field in which users can provide
various types of personal information in software or Internet systems.

Profile in this application provides users their information on one of the fragments of this application, it is
similar to the profile which we have on social media platforms.

5.8 Additional Functionalities:

There are additional functionalities too of this application most of which are listed below:

1. Notifications
Application has a option notifications, by this option the user can get auto notification of job
while it is uploaded. This option is provided in Setting Tab in Dashboard Activity.
2. Theme settings
The app comes in a default theme but if the user wishes to change the theme to dark mode, he can
change the theme to dark mode.

3. Sharing Functionality

133
 The user is given an edge to share this application via any of his messaging software or any mode
through which user wishes to share the application.

4. Feedback option
The user is also given a privilege to send their feedback on the application where the user might
need to send an email to the dedicated email address of the team-company

134
Results

135
136
Conclusion

137
138
Reference

139
140