3. Lam Meng Chun
lammc@ukm.edu.my
H-04-10
Human Computer Interaction
Natural User Interface
VR & AR
3
Hello Welcome to TK2323!
Zainal Rasyid
Mahayuddin
zainalr@ukm.edu.my
BKPTM, Block A (Level 1)
Simulation and Modeling
Robotics & Automation
Virtual & Augmented Reality
https://www.youtube.com/watch?v=6ECVHsUVuJg
https://www.youtube.com/watch?v=oH_LfXnklRw
4. What will you learn in this
course
▹Basic components to make a simple mobile application
(Android).
▸UI, Material Design UI,
▸ListView, RecyclerView, Fragment
▸Activity, Intent, EventListener
▸Multithread
▸SQLite, Firebase
▸Sensor
▹Each topic will have a corresponding lab assignment
4
5. Class Learning Approach
Lecture (Flip)
▹ Student center
learning
▹ 2-4 hours per week
self learning
▹ Less lecture, focus on
Quiz, Discussion, Lab
Lab (Flip)
▸Lab Assignment (Have
to present to lecturer
and answer some
questions,
Penalty on late
submission)
⬩Lab manual
⬩Lab Video
▸Lab Test
5
6. Mobile Application
Development Project
▹ Group Work (4-5)
▹ Attend the same lab
section
YOU CAN ALSO SPLIT YOUR
CONTENT
Final Exam
▹ Theory
▹ Progmming (Fill in
the blank/step by
step coding
instruction)
6
iFolio &
OpenLearning
▹ iFolio
(Submission of
Assignment/Task)
▹ OpenLearning
(Awesome video
that could make
you more easy to
understand the
concept)
12. Global smartphone sales by operating system
from 2009 to 201512
Andorid
▹ 1160.21 (~80%)
iOS
▹ 225.85 (~16%)
13. What will you learn in this
course
▹Sales of feature phones totalled 167 million units in 2015, 61
percent of total mobile phone sales in India.
▹Interesting phenomenon in Africa
(http://www.dw.com/en/feature-phone-and-smartphone-
battle-it-out-in-africa/a-18465485)
13
15. Android, iOS, Windows.
BlackBerry15
Platform Language IDE Notes
Android Java, c , c++ Android
Studio
Open Source,
iOS Swift,
Objective-C
X Code -Apple machine only
-Requires Apple Developer
Account
Windows C# Visual Studio
BlackBerry Java, c , c++
16. App Distribution Method
▹In-house-developed corporate apps
▸iOS requires you to submit the app to the Apple App
Store and get approval, even for apps from your own
company
▹Android apps can be distribute through
▸Google Play, Amazon App
▸USB connection from PC
▸Email
▸Corporate Web site
16
20. Native
specific to a given
mobile platform using
the development tools
and language that the
respective platform
supports
App Development Method
Pure Web App
Web app is basically a
web page, or series of
web pages (no
installation requires)
20
Hybrid
Hybrid development
combines the best (or
worst) of both the
native and HTML5
worlds.
21. Native
▹are specific to a given mobile platform using the development
tools and language that the respective platform supports
▸iOS: (Xcode, swiftobjective-C)
▸Android: (Eclipse/Android Studio, Java)
▸Windows app (Visual studio,visual C#)
▹Native apps look and perform the best.
▹Only can generate package (installer) for their own platform
21
23. Native
▹are specific to a given mobile platform using the development
tools and language that the respective platform supports
▸iOS: (Xcode, swift,objective-C)
▸Android: (Android Studio, Java)
▸Windows app (Visual studio, C#)
▹Native apps look and perform the best.
▹Only can generate package (installer) for their own platform
23
24. Muli Touch
double taps, pinch-
spread, and other
compound UI gestures
Native
Fast Graphics API
the native platform
gives you the fastest
graphics, which may
not be a big deal if
you’re showing a static
screen with only a few
elements, or a very big
deal if you’re using a
lot of data and require
a fast refresh
24
Fluid Animation
related to the fast
graphics API is the
ability to have fluid
animation. This is
especially important in
gaming, highly
interactive reporting,
or intensely
computational
algorithms for
transforming photos
and sounds.
25. Built-in components
The camera, address
book, geolocation, and
other features native to
the device can be
seamlessly integrated
into mobile apps.
Native
Ease of use
The native platform is
what people are
accustomed to, and so
when you add that
familiarity with all of
the native features they
expect, you have an
app that’s just plain
easier to use.
25
Documentation
There are over 2500
books alone for iOS
and Android
development, with
many more articles,
blog posts, and
detailed technical
threads on sites like
StackOverflow.
26. Web App
▹Web app is basically a web page, or series of web pages
(no installation requires)
▹Universal access
▸Using web browser
▹Automatic “updates”
▸distribution and support is much easier than for native
apps.
▸Content comes from server
26
27. Web App
▹Can not access the mobile hardware and default app
▸GPS, camera, touch
▹Development Language
▸HTML, CSS, Javascript
27
28. Hybrid App
▹Hybrid development combines the best (or worst) of both
the native and HTML5 worlds.
▹As a web app, primarily built using
▸HTML, CSS, Javascript, Mobile Development
Framework
▸that is then wrapped inside a thin native container that
provides access to native platform features.
28
29. Hybrid App
▹Development Environments and SDKs
▸Cordova
▸Xamarin (C#, Microsoft)
▸Ionic Framework (powered by Cordova)
▸Appcelerator Titanium
▸Sencha
29
33. Device Fragmentation
▹The mobile landscape is much more fragmented, with four
main platforms (Android, iOS, Windows Phone and
BlackBerry) that are continually evolving.
33
38. Screen Size
▹How to design for a device that fits in your pocket requires simplification
and a rethink about navigation.
▹While a desktop application may have tabs, options and links on all sides
of the screen and in line with text, for mobile you need to concentrate on
the immediate function, reducing the number of options to only those
needed for the immediate task or feature.
▹Designing an application that is optimized for various devices with
different screen densities and screen sizes is even more challenging.
38
42. User Interaction
Mouse & Keyboard
▸Interaction on
desktop
Touch
▸Even a single touch
can involve a variety of
interactions, including
▸single-tap,
▸double-tap,
▸long touch,
▸move and
▸fling.
Sensor Based
▹ Example?
42
43. Computing & Memory
Capacity
▹Mobile devices lack the computing power and memory
capacity of most desktop and server systems.
▹Developers need to write algorithms and perform code
optimization to support the mobile device capacity.
▹For example, 1 GB of memory is a constraint in mobile
phones which is not found in today’s desktop applications.
▹Loading picture (Try your Gallery App)
43
44. Battery Capacity
▹Another issue that enterprise applications do not have to
address is battery life.
▹With enterprise applications, you can have complex algorithms
running on the server because there are no battery constraints.
▹But when it comes to mobile, a complex algorithm or
suboptimal code will drain the battery quickly.
▹When designing algorithms, developers need to think about
battery consumption, and design for optimal usage.
44
46. Introduction to Android
▹Android is a software stack for mobile devices that
includes an operating system, middleware and key
applications.
▹The Android SDK provides the tools and APIs necessary to
begin developing applications on the Android platform
using the Java programming language.
46
47. Introduction to Android
▹Google describes Android as:
▸The first truly open and comprehensive platform for
mobile devices, all of the software to run a mobile phone
but without the proprietary obstacles that have hindered
mobile innovation.
▸TV, Auto (Car)
▹It is a Linux kernel and collection of c/c++ libraries
exposed through an application framework that provides
services for, and management of, the run time and
47
49. 49 Applications
▹Applications are the top layer in the Android architecture
and this is where our applications are going to fit into.
▹Several standard applications comes pre-installed with
every device, such as:
▸SMS client app
▸Dialer
▸Web browser
▸Contact manager
50. Introduction to Android OS
Architecture: Application
Framework
▹These are the blocks that our applications directly
interacts with.
▹The entire feature-set of the Android OS is available to you
through APIs written in the Java language.
▹These APIs form the building blocks you need to create
Android apps by simplifying the reuse of core, modular
system components and services, which include the
following:
50
51. Introduction to Android OS
Architecture: Application
Framework
Activity Manager
Manages the activity
life cycle of
applications
Telephony Manager
Manages all voice calls.
We use telephony
manager if we want to
access voice calls in
our application.
Content Providers
Manage the data
sharing between
applications
Location Manager
Location management,
using GPS or cell tower
Resource Manager
Manage the various
types of resources we
use in our Application
51
52. Introduction to Android OS
Architecture: Dalvik Virtual
Machine
Dalvik Virtual Machine
▹It is a type of JVM used in android devices to run apps and
is optimized for low processing power and low memory
environments.
▹Unlike the JVM, the Dalvik Virtual Machine doesn’t run
.class files, instead it runs .dex files. .dex files are built from
.class file at the time of compilation and provides higher
efficiency in low resource environments
52
53. Introduction to Android OS
Architecture: Dalvik Virtual
Machine
▹All apk's basic source code is in java language . When you
build this project all .java files get converted to .class now
the dx tool of adk converts all .class files to classes.dex file.
▹And this classes.dex file is executed on dalvik virtual
machine.
53
https://www.youtube.com/watch?v=G1ubVOl9IBw
54. Introduction to Android OS
Architecture: Android
Runtime
Android runtime (ART)
▹Google has introduced a new virtual machine known as
ART (Android Runtime) in their newer releases of Android.
▹In Lollipop, the Dalvik Virtual Machine is completely
replaced by ART.
54
55. Introduction to Android OS
Architecture: Android
Runtime
▹ART has many advantages over Dalvik VM such as AOT
(Ahead Of Time) compilation and improved garbage
collection which boost the performance of apps
significantly.
▹ART improves the overall execution efficiency and reduces
power consumption, which results in improved battery
autonomy on mobile devices.
55
▹https://source.android.com/devices/tech/dalvik/
56. Introduction to Android OS
Architecture: Libraries
▹The next layer is the Android’s native libraries.
▹It is this layer that enables the device to handle different
types of data.
▹These libraries are written in c or c++ language and are
specific for a particular hardware.
56
57. Introduction to Android OS
Architecture: Libraries
▹Surface Manager:
▸It is used for compositing window manager with off-
screen buffering.
▸Off-screen buffering means the apps can’t directly draw
into the screen, instead the drawings go to the off-screen
buffer.
▸There it is combined with other drawings and form the
final screen the user will see. This off screen buffer is the
reason behind the transparency of windows.
57
58. Introduction to Android OS
Architecture: Libraries
Media framework
Media framework provides
different media codecs allowing
the recording and playback of
different media formats
WebKit
It is the browser engine used to
display HTML content
SQLite
SQLite is the database engine
used in android for data storage
purposes
OpenGL
Used to render 2D or 3D graphics
content to the screen
58
59. Introduction to Android OS
Architecture: Linux Kernel
▹The whole Android OS is built on top of the Linux Kernel
with some further architectural changes.
▹It is this Linux kernel that interacts with the hardware
and it contains all the essential hardware drivers.
▹Drivers are programs that control and communicate with
the hardware.
59
60. Introduction to Android OS
Architecture: Linux Kernel
▹The Linux kernel also acts as an abstraction layer between
the hardware and other software layers.
▹As the Android is built on a most popular and proven
foundation, the porting of Android to variety of hardware
became a relatively painless task.
60
61. Introduction to Android OS
Architecture: Linux Kernel
▹For example, consider the Bluetooth function. All devices
has a Bluetooth hardware in it.
▹Therefore the kernel must include a Bluetooth driver to
communicate with the Bluetooth hardware.
61
66. Project value
resources
66
Dimens.xml
XML resource that
carries a dimension
value
Strings.xml
XML resource that
provides a single string.
Styles.xml
A style resource defines
the format and look for
a UI.
67. Project App
Manifest
67 Every application must have
an AndroidManifest.xml file
(with precisely that name) in
its root directory.
The manifest file provides
essential information about
your app to the Android
system, which the system
must have before it can run
any of the app's code.
70. Getting Started
1. Compiler: Java Development Kit (>JDK 1.8)
▸ JRE alone is not sufficient
2. Android Studio
▸ Android SDK
3. Emulator
▸ Android Studio Default Emulator
*note: Android SDK directory is important. It is better not to change or move the
directory once you set it. It could take up to 4+gb as well, because of the
continuously version update
70
71. Your Task
▹Openlearning
▸Create an account in and join the
“https://www.openlearning.com/courses/mobile-app-
development---android/HomePage” with code
“TK2323Sem2201617”
71
72. Your Task
▹Install all the necessary tools to develop an android app
▸Refer to the material in
▸Run an hello world project in Emulator/Real device
▹Find a partner, a project partner
▸Mobile App Development Project(3-4)
⬩An mobile application
⬩Attend lab together
72
