CSE 4027 - Mobile Application Development
CSE 4027 - Mobile Application Development
CSE 4027 - Mobile Application Development
Contents
Contents
http://developer.android.com/reference/packages.html
Additional Materials
http://developer.android.com/reference/packages.html
Weekly 3 Hours
Class Pattern
Weekly 3 Hours
2 Hours Theory
Class Pattern
Weekly 3 Hours
2 Hours Theory
Weekly 3 Hours
2 Hours Theory
Sessional-I - 15 Marks
Evaluation
Sessional-I - 15 Marks
Sessional-II - 15 Marks
Evaluation
Sessional-I - 15 Marks
Sessional-II - 15 Marks
Assignment- 20 Marks
Introduction
Introduction
1 Introduction
2 Mobility Panorama
3 Mobile Platforms
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
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
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.
2 Cross-compiler Philosophy
App is created using web technology. App is cross compiled to
native app.
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.
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
Android
Mobile Platforms
Android
Apple iOS
Mobile Platforms
Android
Apple iOS
Blackberry
Mobile Platforms
Android
Apple iOS
Blackberry
Windows Phone
XML
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
<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>
<!-- define your strings here -->
</resources>
Styles XML File
This XML is used to dene dierent styles and looks for the UI of
application.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.
DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
Color XML File
This le is used to dene the color codes that we use in our app.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- define your colors Here -->
<color name="greenColor">#0f0</color>
<color name="white">#fff</color>
</resources>
Dimension XML File
<resources>
<!-- Default screen margins, per the Android Design
guidelines. -->
<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_width="wrap_content"
android:layout_height="wrap_content"
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
Android Application Life-Cycle
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
<EditText
android:id="@+id/txtComments"
android:layout_width="match_parent"
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:layout_height="wrap_content"
android:text="Save"
android:layout_below="@+id/txtComments"
android:layout_alignRight="@+id/txtComments"/>
RelativeLayout
<Button
android:id="@+id/btnCancel"
android:layout_width="124px"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_below="@+id/txtComments"
android:layout_alignLeft="@+id/txtComments"/>
</RelativeLayout>
Practice Questions
Practice Questions
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
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
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.
Attributes of TableLayout
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.
Attributes of TableLayout
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
<ImageView android:id="@+id/imv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/photo"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
/>
</FrameLayout>
FrameLayout example 2
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