Introduction to Mobile Application Development to the native apps, hybrid apps work on a 'web container' which provides a browser

runtime and a bridge for native device APIs via Apache Cordova.
Mobile Application Development
Progressive Web Applications
Mobile application development is the process of creating software applications that run
on a mobile device, and a typical mobile application utilizes a network connection to work PWAs offer an alternative approach to traditional mobile app development by skipping
with remote computing resources. Hence, the mobile development process involves app store delivery and app installations. PWAs are web applications that utilize a set of
creating installable software bundles (code, binaries, assets, etc.), implementing backend browser capabilities - such as working offline, running a background process, and adding
services such as data access with an API, and testing the application on target devices. a link to the device home screen to provide an 'app like' user experience.
Mobile Applications and Device Platforms WHAT IS ANDROID?
There are two dominant platforms in the modern smartphone market. One is the iOS Android is a mobile operating system that is based on a modified version of Linux .
platform from Apple Inc. The iOS platform is the operating system that powers Apple's Android is an open source and Linux-based Operating System for mobile devices such as
popular line of iPhone smartphones. The second is Android from Google. The Android smartphones and tablet computers.
operating system is used not only by Google devices but also by many other OEMs to build
Android is called as “the first complete, open, and free mobile platform”:
their own smartphones and other smart devices.
Complete: allows for rich application development opportunities.
Alternatives for Building Mobile Apps
Open: It is provided through open-source licensing.
There are four major development approaches when building mobile applications
Free: Android applications are free to develop.
• Native Mobile Applications
THE ANDROID VERSION
• Cross-Platform Native Mobile Applications
• Hybrid Mobile Applications
• Progressive Web Applications
Each of these approaches for developing mobile applications has its own set of
advantages and disadvantages. When choosing the right development approach for their
projects, developers consider the desired user experience, the computing resources and
native features required by the app, the development budget, time targets, and resources
available to maintain the app.
Native Applications
Native mobile applications are written in the programming language and
frameworks provided by the platform owner and running directly on the operating system
of the device such as iOS and Android.
Cross-Platform Applications
Cross-platform native mobile applications can be written in variety of different
programming languages and frameworks, but they are compiled into a native application
running directly on the operating system of the device.
Hybrid-Web Applications
Hybrid mobile applications are built with standard web technologies - such as Operating Systems
JavaScript, CSS, and HTML5 - and they are bundled as app installation packages. Contrary

Different OS run on different types of hardware and are designed for different types of ➢ Multi-tasking —Supports multi-tasking applications
applications. For example, iOS is designed for iPhones and iPad tablets, while Mac ➢ Flash support —Android 2.3 supports Flash 10.1.
desktops and laptops use macOS. ➢ Tethering —Supports sharing of Internet connections as a wired/wireless hotspot
Microsoft Windows
Initial versions of Windows worked with MS-DOS, providing a modern graphical interface Architecture of Android
on top of DOS's traditional text-based commands. The Windows Start menu helps users
find programs and files on their devices.
APPLE IOS
Apple's iOS is one of the most popular smartphone operating systems, second only to
Android. It runs on Apple hardware, including iPhones, iPad tablets and iPod Touch media
players.
GOOGLE'S ANDROID OS
Android is the most popular operating system in the world judging by the number of
devices installed. Users can download custom versions of the operating system.
APPLE MAC OS
Apple's macOS, successor to the popular OS X operating system, runs on Apple laptops
and desktops. MacOS is known for its user-friendly features, which include Siri and
FaceTime.
LINUX OPERATING SYSTEM
Linux can be run on a wide variety of hardware and is available free of charge over the
internet.
Features of Android
Because Android is open source and freely available to manufacturers for customization,
there are no fixed hardware or software configurations. However, Android itself supports
the following features
➢ Storage —Uses SQLite, a lightweight relational database, for data storage.
➢ Connectivity —Supports GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth
(includes A2DP and AVRCP), Wi-Fi, and WiMAX Linux kernel
➢ Messaging —Supports both SMS and MMS. This is the kernel on which Android is based. This layer contains all the low-level device
➢ Web browser —Based on the open-source WebKit, together with Chrome’s V8 drivers for the various hardware components of an Android device.
JavaScript engine
➢ Media support —Includes support for the following media: H.263, H.264 (in 3GP or
MP4 container), MPEG-4 SP, AMR, AMR-WB (in 3GP container), AAC, HE-AAC (in
MP4 or 3GP container), MP3, MIDI, WAV, JPEG, PNG, GIF, and BMP
➢ Hardware support —Accelerometer Sensor, Camera, Digital Compass, Proximity
Sensor, and GPS
➢ Multi-touch —Supports multi-touch screens
 The Application Framework is a set of services that collectively form the environment in
which Android applications run and are managed. Exposes the various capabilities of the
Android OS to application developers so that they can make use of them in their
applications.

Applications
Libraries
At this top layer, you will find applications that ship with the Android device (such as
These contain all the code that provides the main features of an Android OS. For example, Phone, Contacts, Browser, etc.), as well as applications that you download and install
the SQLite library provides database support so that an application can use it for data from the Android Market. Any applications that you write are located at this layer.
storage. The WebKit library provides functionalities for web browsing.

Android Devices in the Market

➤Smartphones
➤Tablets
Android runtime
➤E-reader devices
At the same layer as the libraries, the Android runtime provides a set of core libraries that
enable developers to write Android apps using the Java programming language. ➤MP4 players

The Android runtime also includes the Dalvikvirtual machine, which enables every Android ➤Internet TVs
application to run in its own process, with its own instance of the Dalvikvirtual machine
(Android applications are compiled into Dalvikexecutables).
Dalvikis a specialized virtual machine designed specifically for Android and optimized for
battery-powered mobile devices with limited memory and CPU.
The Dalvik VM makes use of Linux core features like memory management
and multithreading, which is intrinsic in the Java language.

Application framework

Introduction to Android, Tools and Basics

For developing applications for android platform, you will require Integrated Development
Environment (IDE).
Android Studio
Android Studio is the official Integrated Development Environment (IDE) for Android app
development. Android Studio offers many features that enhance your productivity when
building Android apps for example Intelligent code editor: Android Studio provides an
intelligent code editor capable of advanced code completion, refactoring, and code
analysis. The powerful code editor helps you be a more productive Android app developer.
Android applications
Android applications are usually developed in the Java language or Kotlin language using
the Android Software Development Kit (SDK).
Kotlin
Kotlin is a JVM based language developed by JetBrains5, a company known for
creating IntelliJ IDEA, a powerful IDE for Java development. Android Studio, the official
Android IDE, is based on IntelliJ.
Once developed, Android applications can be packaged easily and sold out either through
a store such as Google Play or the Amazon Appstore. Android powers hundreds of millions
of mobile devices in more than 190 countries around the world. It's the largest installed
base of any mobile platform and is growing fast. Every day more than 1 million new
Android devices are activated worldwide.
First, we discuss what the system requirements for android studio are and how to install
and configure android studio. The following is the list of software's you will need before
you start your Android application programming.
System Requirements for Android Studio
•Microsoft® Windows® 8/7/Vista/2003 (32 or 64-bit)
• GB RAM minimum, 4 GB RAM recommended
• 400 MB hard disk space
• At least 1 GB for Android SDK, emulator system images, and caches
• 1280 x 800 minimum screen resolution
• Java Development Kit (JDK) 7
• Optional for accelerated emulator: Intel® processor with support for Intel® VT-x, Intel®
EM64T (Intel® 64), and Execute Disable (XD) Bit functionality
ANDROID – Environment Setup
➢ Downloading Android Studio
Download android studio from [Link] It will
open following web page.
 Go to bottom of the page and accept the License agreement and download JDK for
Windows x86 or Windows x64 for windows 32 bit and windows 64 bit respectively.

Click green button “Download Android Studio for Windows” it will open following page.

➢ Installing JDK
Double click downloaded JDK Installation file and follow instructions on screen.
Accept term and condition at the bottom and press blue button “Download Android
Studio for Windows”. It will start downloading android studio for windows. Do not start
installation before downloading and installing JDK 1.7 is over.
➢ Downloading JDK
To download JDK 1.7 type following URL in browser.
[Link]
[Link]. It will open page shown below

Press Next Button

Press Next Button this will start installation as shown below

Once Java SDK installation is finished it will display following screen.

After installation starts it will asks for Java Runtime Environment (JRE) Installation
location.

Press close button to finish Java SDK installation.

Press Next Button it will start installing JRE as shown below.

 ➢ Installing Android Studio
Launch the .exe file you just downloaded. It will open following screen

Click on I Agree button.

Click on Next button.

Specify path for Android Studio Installation and Android SDK Installation or use
default and press Next button

Click Next button.

Click on Finish button to launch Android Studio. It will display following screen
Press Install Button. This will start installation as shown below.

Select last option and press OK. It will download updates and create virtual device
for you.

Once installation is finished completed message will be displayed as shown

below.

Press next button to finish installation and launch Android Studio. Press finish button to start Android Studio with following initial welcome screen.
 Launching Android Studio To Create an Android Project
1. Open Android Studio if it is not already opened.
2. In the main Welcome to Android Studio window, click Start a new Android Studio
project. (If you don't have a project opened, in the Welcome screen, click New
[Link] If you have a project opened, from the File menu, select New Project).

Important Note:On some Windows systems, the launcher script does not find where Java is
installed. If you encounter this problem, you need to set an environment variable indicating the
correct location. Select Start menu > Computer > System Properties > Advanced System 3. In the Create Android Project window, enter Hello World for the Application name.
Properties. Then open Advanced tab > Environment Variables and add a new system variable 4. Verify that the default Project location is where you want to store your Hello World app
JAVA_HOME that points to your JDK folder, for example C:\Program Files\Java\jdk1.7.0_XX. and other Android Studio projects, or change it to your preferred directory.
5. Accept the default [Link] for Company Domain, or create a unique
company domain. If you are not planning to publish your app, you can accept the default.
6. click Next.

7. On the Target Android Devices screen, Phone and Tablet should be selected. Ensure
that API 15: Android 4.0.3 IceCreamSandwich is set to Minimum SDK; if not, use the
popup menu to set it. These are the settings. As of this writing, these settings make Hello
World app compatible with 97% of Android devices active on the Google Play Store.
8. Leave unchecked the Include Instant App support and all other options. Then click
Next. If your project requires additional components for your chosen target SDK,
Android Studio will install them automatically.

[Link] Configure Activity screen appears (which differs depending on which template you
chose in the previous step). By default, the empty Activity provided by the template is
named MainActivity. You can change this if you want, but this lesson uses MainActivity.
[Link] sure that the Generate Layout file option is checked. The layout name by default
9. The Add an Activity window appears. An Activity is a single, focused thing that the user is activity_main. You can change this if you want, but this lesson uses activity_main.
can do. It is a crucial component of any Android app. An Activity typically has a layout [Link] sure that the Backwards Compatibility (App Compat) option is checked. This
associated with it that defines how UI elements appear on a screen. Android Studio ensures that your app will be backwards-compatible with previous versions of Android.
provides Activity templates to help you get started. For the Hello World project, choose [Link] Finish.
Empty Activity as shown below, and click Next.
In the new version of Android Studio, the steps for creating an application are as shown in
the pictures

The development process

An Android app project begins with an idea and a definition of the requirements necessary to
realize that idea. As the project progresses, it goes through design, development, and testing.

ANDROID – Applications Component

Application components are the essential building blocks of an Android application. These
components are loosely coupled by the application manifest file [Link] that
describes each component of the application and how they interact.
There are following four main components that can be used within an Android application:
➢ Activities
They dictate the UI and handle the user interaction to the smartphone screen.
An activity represents a single screen with a user interface.
Activity is a window that contains the user interface of your applications.

An application can have zeroor moreactivities; in this example, the application contains
oneactivity: HelloWorldActivity. This HelloWorldActivity is the entry point of the application,
which is displayed when the application is started.
An activity is implemented as a subclass of AppCompatActivity class as follows:

package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
[Link](this);
setContentView([Link].activity_main);
[Link](findViewById([Link]), (v, insets) -> {
 Insets systemBars = [Link]([Link]()); ➢ Content Providers
[Link]([Link], [Link], [Link], [Link]); allow data exchange between applications.
return insets; A content provider component supplies data from one application to others on request.
}); Such requests are handled by the methods of the ContentResolver class. The data may be
} stored in the file system, the database or somewhere else entirely. A content provider is
} implemented as a subclass of ContentProvider class and must implement a standard set of
APIs that enable other applications to perform transactions.
➢ Services
They handle background processing associated with an application. There are additional components which will be used in the construction of above mentioned
Services–no visual interface –they run in the background entities, their logic, and wiring between them. These components are:
A service is a component that runs in the background to perform long-running operations.
For example, a service might play music in the background while the user is in a different ➢ View
application, or it might fetch data over the network without blocking user interaction with All user interface elements in an Android app are built using Viewand ViewGroupobjects.
an activity. A service is implemented as a subclass of Service class as follows: A Viewis an object that draws something on the screen that the user can interact with. A
ViewGroup is an object that holds other View(and ViewGroup) objects in order to define
package [Link]; the layout of the interface.
import [Link]; ➢ Layouts
import [Link]; View hierarchies that control screen format and appearance of the views.
import [Link]; ➢ [Link]
public class MyService extends Service { Configuration file for the application. This is the manifest file for your Android
public MyService() { application. Here you specify the permissions needed by your application, as well as
} other features (such as intent-filters,receivers, etc.).
@Override
public IBinder onBind(Intent intent) {
// TODO: Return the communication channel to the service.
throw new UnsupportedOperationException("Not yet implemented");
}
}

➢ Broadcast Receivers
They handle communication between Android OS and applications.
receive and react to broadcast announcements.
Broadcast Receivers simply respond to broadcast messages from other applications or
from the system. For example, applications can also initiate broadcasts to let other
applications know that some data has been downloaded to the device and is available for
them to use, so this is broadcast receiver who will intercept this communication and will
initiate appropriate action.
A broadcast receiver is implemented as a subclass of BroadcastReceiver class and each
message is broadcasted as an Intent object.
public class MyReceiver extends BroadcastReceiver
{
}

➢ Intent and Intent Filters

Android uses a special class called Intent to move from screen to screen. Intent describe
what an application wants done. The two most important parts of the intent data structure
are the actionand the datato act upon. Typical values for actionare MAIN (the front door
of the application), VIEW, PICK, EDIT, etc. The datais expressed as a Uniform Resource
Indicator (URI).
➢ Resource External elements, such as strings, constants and drawable pictures .
Android Studio creates a folder for the newly created project in the AndroidStudioProjects
folder on your computer.
Building a Simple User Interface
In this lesson, you create a layout in XML that includes a text field and a button. In the next
lesson, your app responds when the button is pressed by sending the content of the text field to
another activity.
Create a Linear Layout
1. In Android Studio, from the res/layout directory, open the activity_my.xml file.
2. Delete the <TextView> element.
3. Change the <constraintlayout> element to <LinearLayout>.
4. Add the android:orientation attribute and set it to "horizontal".
5. Remove the android:padding attributes and the tools:context attribute.
 Add a Text Field Add String Resources
1. In the activity_my.xml file, within the <LinearLayout> element, define an <EditText> By default, your Android project includes a string resource file at res/values/[Link].
element with the id attribute set to @+id/edit_message. Here, you'll add a
2. Define the layout_width and layout_height attributes as wrap_content. new string named "edit_message" and set the value to "Enter a message."
3. Define a hint attribute as a string object named edit_messag 1. In Android Studio, from the res/values directory, open [Link].
2. Add a line for a string named "edit_message" with the value, "Enter a message".
3. Add a line for a string named "button_send" with the value, "Send".

Add a Button
1. In Android Studio, from the res/layout directory, edit the activity_my.xml [Link] the
<LinearLayout> element, define a <Button> element immediately following the
<EditText> element.
2. Set the button's width and height attributes to "wrap_content" so the button is only as big
as necessary to fit the button's text label.
3. Define the button's text label with the android:text attribute; set its value to the
button_send string resource you defined in the previous section.

Building a Simple User Interface

In this lesson, you create a layout in XML that includes a text field and a button. In the next
lesson, your app responds when the button is pressed by sending the content of the text field to
another activity.
ID
Any View object may have an integer ID associated with it, to uniquely identify the View
within the tree.

Example

Run Your App Step1:Create a Linear Layout

1. In Android Studio, from the res/layout directory, open the [Link] file.
2. Delete the <TextView> element.
3. Change the <constraintlayout> element to <LinearLayout>.
4. Add the android:orientation attribute and set it to "horizontal".
5. Remove the android:padding attributes and the tools:context attribute.
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
 Step3:Add a Button
1. In Android Studio, from the res/layout directory, edit the [Link] [Link]
the <LinearLayout> element, define a <Button> element immediately following the
<EditText> element.
2. Set the button's width and height attributes to "wrap_content" so the button is only as big
as necessary to fit the button's text label.
3. Define the button's text label with the android:text attribute; set its value to the
button_send string resource you defined in the previous section.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />

Step2:Add a Text Field

1. In the [Link] file, within the <LinearLayout> element, define an <EditText>
element with the id attribute set to @+id/edit_message.
2. Define the layout_width and layout_height attributes as wrap_content.
3. Define a hint attribute as a string object named edit_messag
Step4:Add String Resources
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content" By default, your Android project includes a string resource file at res/values/[Link].
android:layout_height="wrap_content" Here, you'll add a
android:hint="@string/edit_message" /> new string named "edit_message" and set the value to "Enter a message."

1. In Android Studio, from the res/values directory, open [Link].

2. Add a line for a string named "edit_message" with the value, "Enter a message".
Respond to the Send Button
3. Add a line for a string named "button_send" with the value, "Send".
<string name="edit_message">Enter a message</string> Step1:
<string name="button_send">Send</string> 1. In Android Studio, from the res/layout directory, edit the [Link] file.
2. To the <Button> element, add the android:onClick attribute.
res/layout/activity_my.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage" />

3. In the java/[Link] directory, open the [Link] file.

4. Within the MainActivity class, add the sendMessage() method stub shown below.
java/[Link]/ [Link]
/** Called when the user clicks the Send button */
public void sendMessage(View view)
{
// Do something in response to button
}
In order for the system to match this method to the method name given to
android:onClick (/reference/android/view/[Link]#attr_android:onClick), the signature
must be exactly as shown. Specifically, the
method must:
Be public
Have a void return value
Have a View as the only parameter (this will be the View that was clicked)
Context
The class [Link] the connection to the Android system and the
resources of the project. It is the interface to global information about the application
environment. The context of current state of the application/object.
You can get the context by invoking getApplicationContext(), getContext(),
getBaseContext()or this(when in the activity class).
What Is a Toast Message?
Toast messages help to deliver simple feedback to the user. They most often follow an action
performed by a user and provide information regarding the success or failure of that action.
Toast messages ensure that the use of the application is not interrupted while providing
Step5:Run Your Ap necessary information for the user.
How To Use Toast Messages The compelte [Link]
To initiate a Toast object, the makeText() method is used. Here you should mention the
application context, content of the message, and the duration of the toast message. To display package [Link].app01_4;
the Toast message, you can use the method show(). An example code is given below. import [Link];
import [Link];
Context context = getApplicationContext(); import [Link];
CharSequence text = "Example toast message."; import [Link];
int duration = Toast.LENGTH_SHORT; import [Link];
Toast toast = [Link](context, text, duration); import [Link];
[Link](); import [Link];
Step2: import [Link];
1. In the java/[Link] directory, open the [Link] file. import [Link];
2. In sendMessage() method Use Toast Messages public class MainActivity extends AppCompatActivity {
The complete [Link] code @Override
protected void onCreate(Bundle savedInstanceState) {
<?xml version="1.0" encoding="utf-8"?> [Link](savedInstanceState);
<LinearLayout xmlns:android="[Link]
[Link](this);
xmlns:app="[Link]
setContentView([Link].activity_main);
xmlns:tools="[Link]
android:id="@+id/main" [Link](findViewById([Link]), (v, insets) -
android:layout_width="match_parent" >{
android:layout_height="match_parent" Insets systemBars = [Link]([Link]());
android:orientation="vertical" [Link]([Link], [Link], [Link],
tools:context=".MainActivity"> [Link]);
<EditText android:id="@+id/edit_message" return insets;
android:layout_width="wrap_content" });
android:layout_height="wrap_content" }
android:hint="@string/edit_message" /> public void sendMessage(View view)
<Button {
android:layout_width="wrap_content" Context context = getApplicationContext();
android:layout_height="wrap_content"
CharSequence text = "Example toast message.";
android:text="@string/button_send"
int duration = Toast.LENGTH_SHORT;
android:onClick="sendMessage"/>
</LinearLayout> Toast toast = [Link](context, text, duration);
[Link]();

}
}

Step3:Run Your App

Step3:Receive the Intent

Starting Another Activity 1. In the java/[Link] directory, edit the [Link]

file.
2. In the onCreate() method, remove the following line:
Step1:Create a new activity using Android Studio setContentView([Link].activity_display_message);
1. In Android Studio, in the java directory, select the package, [Link],
right-click, and select New > Activity > Empty View Activity. 3. Get the intent and assign it to a local variable. Intent intent = getIntent();
2. In the Choose options window, fill in the activity details 4. At the top of the file, import the Intent class.
➢ Activity Name:DisplayMessageActivity Layout Name:activity_display_message 5. Extract the message delivered by MainActivity with the getStringExtra() method.
3. Open the [Link] file
4. The class already includes an implementation of the required onCreate() String message = [Link](MainActivity.EXTRA_MESSAGE);
Step4:Display the Message
Intent and Intent Filters
Android uses a special class called Intent to move from screen to screen. Intent describe what an 1. In the onCreate() method, create a TextView object.
application wants done. The two most important parts of the intent data structure are the TextView textView = new TextView(this);
actionand the datato act upon
Step2:Build an Intent 2. Set the text size and message with setText().
1. In [Link], inside the sendMessage() method, create an Intent to start an [Link](40); [Link](message);
activity called DisplayMessageActivity 3. Then add the TextView as the root view of the activity’s layout by passing it to
2. At the top of the MainActivity class, add the EXTRA_MESSAGE definition as follows: setContentView().
setContentView(textView);
public class MainActivity extends AppCompatActivity { 4. At the top of the file, import the TextView class.
public final static String EXTRA_MESSAGE = "[Link]"; The complete onCreate()method for DisplayMessageActivity now looks like this:
……….. @Override
} public void onCreate(Bundle savedInstanceState)
{
3. At the top of the file, import the Intent class [Link](savedInstanceState);
4. Inside the sendMessage() method, use findViewById() to get the EditText element. // Get the message from the intent
5. At the top of the file, import the EditText class. intent = getIntent();
6. Assign the text to a local message variable, and use the putExtra() method to add its text String message = [Link](MyActivity.EXTRA_MESSAGE);
value to the intent. // Create the text view
7. In the sendMessage() method, to finish the intent, call the startActivity() method, passing TextView textView = new TextView(this);
it the Intent object created in step 1. [Link](40);
The complete sendMessage() method that's invoked by the Send button now looks like this: [Link](message);
public void sendMessage(View view) { // Set the text view as the activity layout
Intent intent = new Intent(this, [Link]); setContentView(textView);
EditText editText = (EditText) findViewById([Link].edit_message); }
String message = [Link]().toString();
[Link](EXTRA_MESSAGE, message);
startActivity(intent);
}
The 3rd Lecture: Design and programming of
Android apps
 A layout may contain any type of widgets such as buttons,
labels, textboxes, and so on.

 There are number of Layouts provided by Android which.

Examples:
 Linear layout
 Constraint layout
 Table layout

3 5
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 The View class is the Android’s most basic component from which users
interfaces can be created. It acts as a container of displayable elements.

 An Android’s XML view file consists of a layout design

 Layouts are invisible structured containers used for holding other Views.
holding a hierarchical arrangement of its contained elements.

 A View describes every interactive visual control object that appears on an

application screen.

 Every control object in an Android user interface is a subclass of the

Android View class.

2 4
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
  Constraint layout is the default layout available in the  Once your layout has created, you can load the layout resource
Android for building flexible and efficient layouts. All views from your application code, in your [Link]()
are laid out according to relationships between sibling views callback implementation.
and the parent layout.

 void setContentView (int layoutResID): Set the activity

content from a layout resource.
by default created

‫ﻧﺮﺑﻂ ﺍﻻﻧﺘﺮﻓﻴﺲ ﺏ ﺍﻟﺠﺎﻓﺎ‬

7 9
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 All the elements are displayed in linear fashion means all the  Table Layout is used to arrange the group of views into rows
childs/elements of a linear layout are displayed according to its and columns. Table Layout containers do not display a border
orientation. line for their columns, rows or cells.

 The value for orientation property can be either

horizontal or vertical.

6 8
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
 Android considers XML-based layouts to be resources,
 TextView displays text to the user and optionally allows them to edit
consequently layout files are stored in the res/layout directory inside
it programmatically.
your Android project.

11 13
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 Dealing with widgets & layouts typically involves the following

operations:
 Set properties: For instance, when working with a TextView you set the
background color, text, font, alignment, size, padding, margin, etc.

‫ﻳﺴﺘﺠﻴﺐ ﺍﻻﻭﺑﺠﻜﺖ ﻟﺤﺪﺙ‬

, on click ‫ﻣﻌﻴﻦ ﻣﺜﻞ‬  Set up listeners: For example, an image could be programmed to respond to
OneTouch.
various events such as: click, swipe, etc.

 Set focus: To set focus on a specific view, you call the method.

 Set visibility: You can hide or show views using setVisibility(…).

10 12
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
 EditText is used to provide an input or text field, especially in forms.
A Button is a Push-button which can be pressed, or clicked, by the
user to perform an action.
 It is a TextView with text editing operations.

 Perform different actions or events like click event, pressed event,

touch event etc.

15 17
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 Example: set the text in a text view:  Example: Set the text ”Username” in a edit text:
 By XML:

 By XML:
‫ﻧﻘﺪﺭ ﻧﻌﺪﻝ ﺑﺎﻝ ﺍﻛﺴﻤﻞ ﻭﺍﻟﺠﺎﻓﺎ‬
‫ﺑﺲ ﺍﻟﺠﺎﻓﺎ ﻳﻜﻮﻥ ﻣﻊ ﺍﻟﺮﻥ‬
‫ﻭﺍﻻﻛﺴﻤﻞ ﻗﺒﻞ ﺍﻟﺮﻥ‬
‫ﻭﺍﻟﺘﻐﻴﻴﺮ ﺍﻟﺜﺎﺑﺖ ﻳﻜﻮﻥ ﺍﻟﻠﻲ ﺑﺎﻟﺠﺎﻓﺎ‬
‫ﺍﻻﻛﺴﻤﻞ ﻛﺮﻳﻴﺖ ﺍﻻﻧﺘﺮﻓﻴﺲ‬
‫ﻭﺍﻟﺠﺎﻓﺎ ﻛﻮﻧﺘﺮﻭﻝ‬

 By Java code:
 By Java code:

14 16
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
 Display an image file in application.
 CheckBox is a type of two state button either unchecked or checked
in Android.
 Image file is easy to use but hard to master in Android, because of
the various screen sizes in Android devices.
 Used when presenting a group of selectable options to users that are
not mutually exclusive

19 21
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 Example: Set the size of the text on Button  Example: Set the black color in the background:

 By XML:  By XML:

 By Java code:  By Java code:

18 20
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
 RadioButton are mainly used together in a RadioGroup.  GUI is event driven.

 At one time we can check only one radio button from a group of
radio buttons which belong to same radio group.
 Event source: button press, screen touch.

‫ﺍﺫﺍ ﻣﺎﺣﻄﻴﻨﺎ ﺍﻟﺮﺩﻳﻮﻗﺮﻭﺏ‬

‫ﻭﺩﺍﺧﻠﻬﺎ ﺍﻟﺮﺍﺩﻳﻮ ﺑﺘﻦ ﻳﺼﻴﺮ‬
‫ﺍﻟﻤﺴﺘﺨﺪﻡ ﻳﻘﺪﺭ ﻳﺨﺘﺎﺭ ﺍﻛﺜﺮ‬  Every action the user performs while interacting with the user
‫ﻣﻦ ﺧﻴﺎﺭ‬
‫ﻧﺤﻄﻬﺎ ﺍﺫﺍ ﻧﺒﻲ ﺍﻟﻤﺴﺘﺨﺪﻡ‬ interface triggers an event.
‫ﻳﺨﺘﺎﺭ ﺧﻴﺎﺭ ﻭﺍﺣﺪ‬
‫ﺑﺲ ﺍﺫﺍ ﻻ ﻧﺤﻂ ﺭﺍﺩﻳﻮ ﺑﺘﻦ‬
‫ﻟﺤﺎﻟﻬﺎ‬
 The application captures the event and consequently adopts a
specific behavior in response of that event.

23 25
IT324: Modern Concepts of Applications Programming IT342: Mobile and Cloud Computing

 Example: Set the size of text of a check box:  Example: Set the size of the text of a radio button:

 By XML:  By XML:

 By Java code:  By Java code:

22 24
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
 The View class defines several nested interfaces, each of which meant to
respond to a specific event:
 Such interfaces are called event listeners

 Example: [Link], onFocusChange()

 Event listeners can be registered to a View:

 Each event listener handles a specific event on behalf of the View it has been registered to.

 Example: a [Link] listener can manage click events on behalf of a

CheckBox view.

27 29
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 It is sufficient to create the correct event listener and register it to the

 Each action is performed on a specific element of the user interface.
View.

 Each view is responsible for handling those events resulting from the
interaction between the user and the View itself.
 Example: The button when clicked

26 28
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
  Two steps are needed to handle events via event listeners:
 Implementing the event listener interface

 Registering the event listener object to the View.

31 33
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing

 You can assign a method to your button in the XML layout, using the

 Each event listener interface exposes a callback method: Android:onClick attribute

 This method will be invoked whenever the user interacts with the
View

 Example: The [Link] interface defines an

OnClick() method that will be called each time the View is
clicked
 When the user clicks the button, the Android framework calls the
method [Link](View)
 The View that is passed as parameter is a reference to the button that was clicked

30 32
IT342: Mobile and Cloud Computing IT342: Mobile and Cloud Computing
  Examples of event listeners:

34
IT342: Mobile and Cloud Computing