CSE 4027 - Mobile Application Development

CSE 4027 - Mobile Application Development
Contents
Contents
1 Getting started with Mobility

Contents

2 Building blocks of mobile apps
Contents

3 Sprucing up mobile apps
Contents

4 Enhancing Application with Powerful Android Features
Contents

5 Testing mobile apps
Contents

5 Testing mobile apps
6 Taking apps to Market
Text Books
Text Books
1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

Apps", Wiley
Text Books

Apps", Wiley
2 Reto Meier, "Professional Android 4 Application
Development", Wrox Publications, 2012
Text Books

Apps", Wiley
3 Wei-Meng Lee, "Beginning Android 4 Application
Text Books

Apps", Wiley
4 Zigurd Mednieks, Laird Dornin, G. Blake Meike and Masumi
Nakumara, "Programming Android", O'Reilly Publications,
2011
Text Books

Apps", Wiley
4 Zigurd Mednieks, Laird Dornin, G. Blake Meike and Masumi
Nakumara, "Programming Android", O'Reilly Publications,
2011
5 Jerome DiMarzio, "Android A Programmer's Guide",
McGrawHill Publications, 2008
Reference Books
Reference Books
1 Brian Hardy, Bill Phillips, "Android Programming : The Big

Nerd Ranch Guide", Big Nerd Ranch Inc., 2013
Reference Books
1 Brian Hardy, Bill Phillips, "Android Programming : The Big

Nerd Ranch Guide", Big Nerd Ranch Inc., 2013
2 Android Studio 3.0 - Development Essentials - Android 8

Edition, 2017
Additional Materials
http://developer.android.com/reference/packages.html
http://developer.android.com/reference/packages.html
Design Patterns in Java

Class Pattern
Class Pattern
Weekly 3 Hours
Class Pattern
Weekly 3 Hours
2 Hours Theory
Class Pattern
Weekly 3 Hours
2 Hours Theory
1 Hours Demo / Hands On

Class Pattern
Weekly 3 Hours
2 Hours Theory
1 Hours Demo / Hands On
During Demo classes bring fully-charged Laptops

Evaluation
Evaluation
Sessional-I - 15 Marks
Evaluation
Sessional-II - 15 Marks
Evaluation
Sessional-II - 15 Marks
Assignment- 20 Marks
Introduction
Introduction
Initial mobiles - media player, reading e-books, web browsing

Introduction
Today - banking, travel itenary, education, watching television

Introduction
Today - banking, travel itenary, education, watching television
Any one can become App Developer

Mobility Panorama
Contents
1 Introduction
2 Mobility Panorama
3 Mobile Platforms
4 App Development Approaches
5 Android Overview
Mobility Panorama
Logical landscape of mobility
Logical landscape of mobility
Physical ecosystem of mobility
Mobile Components
Mobile Devices
Mobile Platforms
Mobile App Stores
Mobile Devices
Smart phones, tablets, phablets, e-readers, music players, smart

watches
Mobile Platforms
Android, Apple iOS

Play Stores
Apple App Store, Google Play

App Development Approaches
1 business case - B2C, B2B
2 user prole - customer, agent, vendor, supplier, senior

executive
3 mobile device - device type, device connectivity, operating

environment
Hybrid Approaches
Hybrid Approaches
1 Web-based Philosophy
App is created using web technology. App is wrapped in a
wrapper. Native wrapper will allow the app to leverage device
capabilities. e.g. JQuery Mobile, Sencha Touch used to create
the app. Adobe Phone Gap is used to wrap.
Hybrid Approaches
2 Cross-compiler Philosophy
App is created using web technology. App is cross compiled to
native app.
Hybrid Approaches
2 Cross-compiler Philosophy
App is created using web technology. App is cross compiled to
native app.
3 Middleware Philosophy
Allows hybrid app to be hosted on a middleware server. Users
can retrieve the app from the middleware server. Middleware
server acts as interface between app and enterprise systems.
e.g. SAP SMP, Kony(middleware)
Hybrid App Development Approaches
1 Web based philosophy
2 Cross compiler philosophy
3 Middleware philosophy - SAP SMP, Kony

Android Overview
Android Overview
An Open source mobile native platform

governed by Open Handset Alliance(OHA), led by Google
accepted by customers, app developers, OEMs
Android Software Stack
Android Software Stack
Mobile Platforms
Mobile Platforms
OS have come o the ages

Mobile Platforms
A mobile platform is a software stack

Mobile Platforms
Comprises OS, libraries and Application Development Frameworks

Mobile Platforms
OS does memory management, process management

Mobile Platforms
OS does memory management, process management
Libraries - media libraries, libraries for native data storage, rendering

screens and libraries for graphics
Mobile Platforms
Mobile Platforms
Android
Mobile Platforms
Android
Apple iOS
Mobile Platforms
Android
Apple iOS
Blackberry
Mobile Platforms
Android
Apple iOS
Blackberry
Windows Phone
XML
XML stands for Extensible Markup Language.

Tags(Elements) are not predened in XML
XML is readable both by humans and machine
Layouts
Basics of User Interface
The whole concept of Android User Interface is dened using

the hierarchy of View and ViewGroup objects
View class is dened in android.view package
ViewGroup class is dened in android.view package
ViewGroup class is subclass of View class
A ViewGroup can contain Views and other ViewGroups
View and ViewGroup
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.
com/apk/res/android"
android:orientation="vertical" android:layout_width="
match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/buton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
<TextView
android:id="@+id/textView1"
android:text="sample Text"
android:layout_marginTop="15dp"
android:textSize="30dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/editTextName"
android:hint="First Name"
/>
<EditText
android:id="@+id/editTextLastName"
android:hint="Last Name"/>
</RelativeLayout>
</LinearLayout>
Layouts
Linear Layout, Relative Layout, Absolute Layout, Table Layout,

Frame Layout and ConstraintLayout
Layout
Layouts are examples for ViewGroups

every Layout class is dened in android.widget package
every Layout class inherited from android.view.ViewGroup
Layout XML Files
Layout XML les are used to dene the actual UI of our application.
It holds all the elements(views) like the TextView, Buttons and
other UI elements that we want to use in our application.
Manifest XML File
This XML le is used to dene all the components of our

application
It includes the names of our application packages, Activities,
Receievers, Services and the permission that our application
needed
Suppose we need to use the internet in our app then we need
to dene Internet permission in this le
AndroidManifest.xml le
<manifest xmlns:android="http://schemas.android.com/
apk/res/android"
package="example.abhiandroid.MyApplication"> 
<uses-permission android:name="ANDROID.PERMISSION.
INTERNET" />

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">

<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.
LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Strings XML File
This XML le is used to replace hard-coded strings.

We dene all the strings in this XML le and then access them
in our Layout XML les
Strings.xml
<resources>
<string name="app_name">My Application</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="login">User Login</string>

</resources>
Styles XML File
This XML is used to dene dierent styles and looks for the UI of
application.
<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light.
DarkActionBar">

</style>
</resources>
Color XML File
This le is used to dene the color codes that we use in our app.
<resources>

<color name="greenColor">#0f0</color>
<color name="white">#fff</color>
</resources>
Dimension XML File
This XML is used to dene the dimensions of the Views.

dimens.xml File
<resources>

<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen><
dimen name="btnheight">50dp</dimen>
</resources>
TextView
Attributes of TextView
padding
text
textColor
textSize
textStyle
Example of TextView
<TextView
android:id="@+id/firstTextView"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:padding="10dp"
android:text="First Text View"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />
Android Application Lifecycle
Android Application Life-Cycle
onCreate() - called when the activity is rst created

onStart() - called when the activity becomes visible to the user

onResume() - called when the activity starts interacting with

the user

the user
Process specic events(such as launching activities, dialing

phone etc.)

the user
Process specic events(such as launching activities, dialing

phone etc.)
onPause() - called when the current activity is being paused

and the previous activity is resumed
onStop() - called when the activity is no longer visible to the

user

user
onDestroy() - called before the activity is destroyed by the

system

user
onDestroy() - called before the activity is destroyed by the

system
onRestart() - called when the activity has been stopped and is

restarting again
Android Activity Life-Cycle
Linear Layout
Linear Layout
Linear layout is a simple layout in Android for desujgning User

Interface
All the elements are displayed in linear fashion according to its
orientation
Linear Layout Horizontal
Linear Layout Vertical
Main Attributes in Linear Layout
orientation
This attribute is used to set childs/views horizontally or
vertically.
gravity
Used to control the alignment of the layout like left, right,
center, top, bottom etc.
layout_weight
The layout weight attribute specify each child control's relative
importance within the parent linear layout
Linear Layout with gravity=Right
Linear Layout layout_weight=2
Linear Layout without layout_weight
Linear Layout without layout_weight
android.widget.Relative Layout
Relative Layout
Relative Layout is a exible Layout

used to position UI components based on relative sibling or
parent's position
can use above another UI item, below, left, right of other item
RelativeLayout
Positions the bottom edge of this
android:layout_above view above the given anchor view
ID.
Positions the baseline of this view
android:layout_alignBaseline on the baseline of the given anchor
view ID
Makes the bottom edge of this
android:layout_alignBottom view match the bottom edge of the
given anchor view ID.
Makes the end edge of this view
android:layout_alignEnd match the end edge of the given
anchor view ID
Makes the left edge of this view
android:layout_alignLeft match the left edge of the given
anchor view ID
If true, makes the bottom edge of
android:layout_alignParentBottomthis view match the bottom edge
of the parent
RelativeLayout
If true, makes the end edge of this
android:layout_alignParentEnd view match the end edge of the
parent
If true, makes the left edge of this
android:layout_alignParentLeft view match the left edge of the par-
ent
If true, makes the right edge of this
android:layout_alignParentRight view match the right edge of the
parent
If true, makes the start edge of this
android:layout_alignParentStart view match the start edge of the
parent
If true, makes the top edge of this
android:layout_alignParentTop view match the top edge of the par-
ent
Makes the right edge of this view
android:layout_alignRight match the right edge of the given
anchor view ID
RelativeLayout
Makes the start edge of this view
android:layout_alignStart match the start edge of the given
anchor view ID
Makes the top edge of this view
android:layout_alignTop match the top edge of the given
anchor view ID
If set to true, the parent will be
android:layout_alignWithParentIfMissing
used as the anchor when the an-
chor cannot be be found for lay-
out_toLeftOf, layout_toRightOf,
etc
Positions the top edge of this view
android:layout_below below the given anchor view ID
If true, centers this child horizon-
android:layout_centerHorizontal tally within its parent
If true, centers this child horizon-
android:layout_centerInParent tally and vertically within its parent
RelativeLayout
If true, centers this child vertically

android:layout_centerVertical within its parent
Positions the start edge of this view
android:layout_toEndOf to the end of the given anchor view
ID
Positions the right edge of this view
android:layout_toLeftOf to the left of the given anchor view
ID
Positions the left edge of this view
android:layout_toRightOf to the right of the given anchor
view ID
Positions the end edge of this view
android:layout_toStartOf to the start of the given anchor
view ID
RelativeLayout

<RelativeLayout
android:id="@+id/RLayout"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:id="@+id/lblComments"
android:text="Comments"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
RelativeLayout
<EditText
android:id="@+id/txtComments"
android:layout_height="170px"
android:textSize="18sp"
android:layout_alignLeft="@+id/lblComments"
android:layout_below="@+id/lblComments"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/btnSave"
android:layout_width="125px"
android:text="Save"
android:layout_below="@+id/txtComments"
android:layout_alignRight="@+id/txtComments"/>
RelativeLayout
<Button
android:id="@+id/btnCancel"
android:layout_width="124px"
android:text="Cancel"
android:layout_below="@+id/txtComments"
android:layout_alignLeft="@+id/txtComments"/>
</RelativeLayout>
Practice Questions
Practice Questions
1 Develop an App for understanding an Activity Life Cycle. The

life cycle methods have to be shown both on screen and in Log.
Practice Questions

2 Develop an App for showing three buttons vertically. The

width of the buttons should be just enough to display its text.
The height of the three buttons should be in the ratio 1:2:3.
Practice Questions

2 Develop an App for showing three buttons vertically. The

width of the buttons should be just enough to display its text.
The height of the three buttons should be in the ratio 1:2:3.
3 Develop an Activity for Login Screen. Use Relative Layout.

android.widget.TableLayout
TableLayout
TableLayout
groups views into rows and columns

TableLayout
groups views into rows and columns
use <TableRow> element to designate a row

Table Layout
TableLayout
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" >
<TableRow>
<TextView
android:text="User Name:"
android:width ="120dp"/>
<EditText
android:id="@+id/txtUserName"
android:width="200dp" /> </TableRow>
TableLayout
<TableRow>
<TextView
android:text="Password:"/ >
<EditText
android:id="@+id/txtPassword"
android:password="true" />
</TableRow>
<TableRow>
<TextView/ >
<CheckBox
android:id="@+id/chkRememberPassword"
android:layout_width="match_parent" />
android:layout_height="wrap_content" />
android:text="Remember Password" />
</TableRow>
TableLayout
<TableRow>
<Button
android:id="@+id/buttonSignIn"
android:text="Log In"/ >
</TableRow>
Attributes of TableLayout
id attribute is used to uniquely identify a Table Layout.

<TableLayout
android:id="@+id/simpleTableLayout"
android:layout_height="match_parent/>
stretchColumns
Stretch column attribute is used to stretch columns to take up
available free space. The value that assigned to this attribute can
be a single column number or a comma delimited list of column
numbers (1, 2, 3...n).
If the value is 1 then the second column is stretched to take up any
available space in the row, because of the column numbers are
started from 0.
If the value is 0,1 then both the rst and second columns of table
are stretched to take up the available space in the row.
If the value is `*' then all the columns are stretched to take up the
available space.
shrinkColumns
Shrink column attribute is used to shrink or reduce the width of the
column`s. We can specify either a single column or a comma
delimited list of column numbers for this attribute. The content in
the specied columns word-wraps to reduce their width.
If the value is 0 then the rst column's width shrinks or reduces by
word wrapping its content.
If the value is 0,1 then both rst and second columns are shrinks or
reduced by word wrapping its content.
If the value is `*' then the content of all columns is word wrapped
to shrink their widths.
collapseColumns
collapse columns attribute is used to collapse or make invisible the
UI elements of a table layout. These columns are the part of the
table information but are invisible.
If the values is 0 then the rst column appears collapsed, i.e it is
the part of table but it is invisible.
android.widget.FrameLayout
Frame Layout
used to block an area on the screen

If multiple views are put, then overlaps each other
FrameLayout example 1

<FrameLayout xmlns:android="http://schemas.android.
xmlns:app="http://schemas.android.com/apk/res-
auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<ImageView android:id="@+id/imv"
android:src="@drawable/photo"/>
<TextView
android:text="Hello World!"
/>
</FrameLayout>
FrameLayout example 2

<FrameLayout xmlns:android="http://schemas.android.
android:layout_width="match_parent">
<TextView android:text="LeftTop"
<TextView android:layout_height="wrap_content"
android:text="RightTop"
android:layout_gravity="top|right" />
android:text="CentreTop"
android:layout_gravity="top|center_horizontal
" />
<TextView android:text="Left"
android:layout_gravity="left|center_vertical"
android:text="Right"
android:layout_gravity="right|center_vertical
" />
android:text="Centre"
android:layout_gravity="center" />
<TextView android:text="LeftBottom"
android:layout_gravity="left|bottom"
android:text="RightBottom"
android:layout_gravity="right|bottom" />
android:text="CenterBottom"
android:layout_gravity="center|bottom" />
</FrameLayout>
Units of Measurement
dp - Density-independent pixel. 1 dp is equivalent to one pixel

on a 160 dpi screen. This is the recommended unit of
measurement when specifying the dimension of views in your
layout. The 160 dpi screen is the baseline density assumed by
Android. You can specify either "dp" or "dip" when referring
to a density-independent pixel.

sp - Scale-independent pixel. This is similar to dp and is
recommended for specifying font sizes.

pt - Point. A point is de ned to be 1/72 of an inch, based on
the physical screen size.

pt - Point. A point is de ned to be 1/72 of an inch, based on
the physical screen size.
px - Pixel. Corresponds to actual pixels on the screen. Using
this unit is not recommended, as your UI may not render
correctly on devices with a dierent screen resolution.
Screen densities
Android denes and recognizes four screen densities:

Low density (ldpi) - 120 dpi
Medium density (mdpi) - 160 dpi
High density (hdpi) - 240 dpi
Extra High density (xhdpi) - 320 dpi

Some examples
Some examples
Nexus S is regarded as a hdpi device, as its pixel density is

closest to 240 dpi.
Some examples
Nexus S is regarded as a hdpi device, as its pixel density is

closest to 240 dpi.
The HTC Hero, however, has a 3.2-inch (diagonal) screen size

and a resolution of 320× 480. Its pixel density works out to be
about 180 dpi. Therefore, it would be considered an mdpi
device, as its pixel density is closest to 160 dpi.
How to convert dp to px
The formula for converting dp to px (pixels) is as follows:
Actual pixels = dp ∗ 160

dpi
, where dpi is either 120, 160, 240, or 320.
ConstraintLayout
ConstraintLayout
exible layout
allows at views with no hierarchy
hence improves performance(layout load time)
released in Google I/O 2016
similar to RelativeLayout
Design and BluePrint view in layout Design
Using Constraint Layout in Android Studio
It is not bundled as part of Android SDK

available as a support library
repositories {
maven {
url ’https://maven.google.com’
}
}
dependencies {
compile ’com.android.support.constraint:
constraint-layout:1.1.0-beta3’
}

CSE 4027 - Mobile Application Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSE 4027 - Mobile Application Development

Uploaded by

Copyright:

Available Formats

CSE 4027 - Mobile Application Development

1 Getting started with Mobility

1 Getting started with Mobility

1 Getting started with Mobility

1 Getting started with Mobility

1 Getting started with Mobility

1 Getting started with Mobility

1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

1 Anubhav Pradhan, Anil V Deshpande, "Composing Mobile

1 Brian Hardy, Bill Phillips, "Android Programming : The Big

1 Brian Hardy, Bill Phillips, "Android Programming : The Big

2 Android Studio 3.0 - Development Essentials - Android 8

Design Patterns in Java

1 Hours Demo / Hands On

1 Hours Demo / Hands On

During Demo classes bring fully-charged Laptops

Initial mobiles - media player, reading e-books, web browsing

Initial mobiles - media player, reading e-books, web browsing

Today - banking, travel itenary, education, watching television

Initial mobiles - media player, reading e-books, web browsing

Today - banking, travel itenary, education, watching television

Any one can become App Developer

4 App Development Approaches

Smart phones, tablets, phablets, e-readers, music players, smart

Android, Apple iOS

Apple App Store, Google Play

1 business case - B2C, B2B

2 user prole - customer, agent, vendor, supplier, senior

3 mobile device - device type, device connectivity, operating

1 Web based philosophy

2 Cross compiler philosophy

3 Middleware philosophy - SAP SMP, Kony

An Open source mobile native platform

OS have come o the ages

OS have come o the ages

A mobile platform is a software stack

OS have come o the ages

A mobile platform is a software stack

Comprises OS, libraries and Application Development Frameworks

OS have come o the ages

A mobile platform is a software stack

Comprises OS, libraries and Application Development Frameworks

OS does memory management, process management

OS have come o the ages

A mobile platform is a software stack

Comprises OS, libraries and Application Development Frameworks

OS does memory management, process management

Libraries - media libraries, libraries for native data storage, rendering

XML stands for Extensible Markup Language.

The whole concept of Android User Interface is dened using

Linear Layout, Relative Layout, Absolute Layout, Table Layout,

Layouts are examples for ViewGroups

This XML le is used to dene all the components of our

This XML le is used to replace hard-coded strings.

This XML is used to dene the dimensions of the Views.

onCreate() - called when the activity is rst created

onCreate() - called when the activity is rst created

onStart() - called when the activity becomes visible to the user

onCreate() - called when the activity is rst created

2 user prole - customer, agent, vendor, supplier, senior

OS have come o the ages

OS have come o the ages

OS have come o the ages

OS have come o the ages

OS have come o the ages

The whole concept of Android User Interface is dened using

This XML le is used to dene all the components of our

This XML le is used to replace hard-coded strings.

This XML is used to dene the dimensions of the Views.

onCreate() - called when the activity is rst created

onCreate() - called when the activity is rst created

onCreate() - called when the activity is rst created

onCreate() - called when the activity is rst created

Process specic events(such as launching activities, dialing

onCreate() - called when the activity is rst created

Process specic events(such as launching activities, dialing

Relative Layout is a exible Layout

Android denes and recognizes four screen densities: