Introduction to mobile application development

1. Introduction to Mobile Application
Development
TK2323 Mobile Programming
Sem 2 2023/2024
Lam Meng Chun
lammc@ukm.edu.my (G-02-04)

2. Outline
Introduction
▹Lecturer
▹Class, Lab
Introduction to Android Architecture
▹ System Apps
▹ Java API Framework
▹ C/C++ Libraries
▹ Android Runtime
▹ Hardware Abstraction Layer (HAL)
▹ Linux Kernel
Introduction to
Mobile Platform
▹Sale
▹Android
▹iOS
▹Window
App Development
Method
▹Native
▹Hybrid
▹Pure Web App
2

3. Lam Meng Chun
lammc@ukm.edu.my
G-02-04
Extended Reality (AR VR)
Human Computer Interaction
3
Hello Welcome to TK2323!
https://www.facebook.com/MyXLab/

4. What will you learn in this
course
▹Basic components to make a simple mobile application (Android).
▸UI, Material Design UI,
▸ListView, RecyclerView, MasterDetail View
▸Tab, Option Menu
▸Activity, Intent, EventListener
▸ROOM, Firebase, Firestore
▸API (Mobile site)
▸Permission
▸Sensor
▹Each topic will have a corresponding lab assignment/exercise
4

5. Class Learning Approach
Lecture (Physical)
▹ 2-4 hours per week self
learning
▹ Sign the attendance
▹ Online till week 5
5

6. Class Learning Approach
Lab (Flip – physical)
▸ Synchronous
▸ Finish the lab assignment before lab hour
▸ Lab Assignment (Have to present to lecturer during lab
hour)
▸ Penalty on late submission
▸ Every lab and project must consist of your matrix
▸ Hybrid till week 5
6

7. Mobile Application
Development Project
▹ Group Work (2-3
persons)
YOU CAN ALSO SPLIT YOUR
CONTENT
Final Exam
▹ Theory
▹ Programming
7
UKM Folio
▹ Lecture Note
▹ Self Assessment
▹ Lab Assignment

8. Distribution
▹Lab Assignment (25%) – 5
▸Follow video
▸Add extra feature based on
the topic
▸Do not copy paste from your
friend, penalty will be given for
both parties
8
▹Mobile Development
Project (25%)
▸Group Work (2-3 persons)
▹Quiz (10%)
▹Exam (40%)

9. Distribution
▹Mobile Development Project (25%)
▸Group Work (2-3 persons)
▹ Progress based
▸Project Idea (1 mark) Week 4
▸Wireframe (2 marks) Week 7
▸First Development progress (2 marks) Week 12
▸Final presentation and report (20 marks) Week 13/14
9

10. 20% Rule
Have to score minimum 20% for carry marks and also in
the Exam in order to pass the subject.
▹ Carry marks (60*20% = 12)
▹ Exam (40*20% = 8)
10

11. Introduction
Let’s start with some statistic
11

12. Smartphones sold
12

13. Smartphone Sales to End Users by Vendor
13

14. Smartphone Sales to End Users by Vendor
14

15. Smartphone Sales to End Users by Vendor
15

16. Smartphone Sales to End Users by Vendor
16

17. 17

18. (Q1 2020 – Q4 2021)
18

19. 19

20. 20
https://gs.statcounter.com/vendor-market-share/mobile

21. 21

22. Introduction to
Mobile Platform
22

23. Android, iOS, Windows. BlackBerry
23 Platform Language IDE Notes
Android Kotlin, Java, c ,
c++
Android
Studio
Open Source,
- Google developer account
(USD 25 whole life)
iOS Swift,
Objective-C
X Code -Apple machine only
-Requires Apple Developer
Account (USD99 per year)
Huawei C/, C++, Java,
JavaScript and
Kotlin.
DevEco
Studio
Windows C# Visual Studio
BlackBerry Java, c , c++

24. 24

25. 25

26. 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, Google Drive
▸Corporate Web site
26

27. iOS
Distribution
(https://deve
loper.apple.c
om/support/
app-store/)
27

28. iOS
Distribution
(https://deve
loper.apple.c
om/support/
app-store/)
28

29. Android Distribution
29

30. Android
Distribution
30

31. Android
Distribution
31

32. App Development
Method
32

33. 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)
33
Hybrid
Hybrid development
combines the best (or
worst) of both the
native and pure web
app.

34. Web App/Responsive web
▹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
34

35. Web App
▹Cannot access the mobile hardware and default app
▸GPS, camera, touch, contact, sensors (Depending on
the web technology)
▹Development Language
▸HTML, CSS, Javascript
35

36. 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
36

37. Native
37

38. 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
38

39. 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
39
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.

40. 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.
40
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.

41. Hybrid Method
▹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.
41

42. Hybrid Method
▹Development Environments and SDKs
▸ReactNative - JavaScript
▸Flutter - Dart
▸Xamarin – c#
▸Ionic Framework - Angular 4 typescript.
42

43. Hybrid App
43

44. Comparison
44
https://dzone.com/articles/state-native-vs-web-vs-hybrid

45. Comparison
45
Native Hybrid (one code for
multiple platforms)
Web (one code for multiple
platforms)
IDE and
Programming
Language
Android – Android Studio
(java, kotlin)
iOS – Xcode (swift, objective-
c)
Ionic
React Native
(HTML, Javascript)
PhP
Python
Ruby on Rails
Device Access All device APIs Depending on the tool Only few device API
UI Original UI components
(Better UX)
Mimic the original UI Mimic the original UI
Distribution App store, Google Play store App store, Google Play store Does not requires app
store/google play (lost some
app store benefits as well)
Performance Best performance Hard to achieve native-like
performance for complex app
Performance based on
browser and network
connection
Information Access Allow offline and online Allow offline and online Online
Time to market Slow Fast Fast
Cost expensive cheaper cheaper

46. Introduction to
Android
Break 5 minutes: 1815
46

47. Introduction to Android
▹Android is an open source, Linux-based software stack
created for a wide array of devices.
▸Linux Kernel
▸Hardware Abstraction Layer (HAL)
▸Native C/C++ Libraries
▸Android Runtime (ART)
▸JAVA API Framework
▸System Apps
47

48. 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), Smart Watch, Smart Glasses
48

49. Android
Platform
Architecture
– 5.0 and
above
49

50. 50 System 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

51. Java API 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:
51

52. Java API Framework
Resource Manager
providing access to non-
code resources such as
localized strings,
graphics, and layout
files
Notification Manager
that enables all apps to
display custom alerts in
the status bar
Location Manager
Location management,
using GPS or cell tower
52

53. Java API Framework
Activity Manager
Manages the lifecycle of
apps and provides a
common navigation
back stack
Content Providers
Manage the data
sharing between
applications
Telephony Manager
Provides APIs for
monitoring the basic
phone information,
such as the network
type and connection
state, plus utilities for
manipulating phone
number strings.
53

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: 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.
55
https://www.youtube.com/watch?v=G1ubVOl9IBw

56. 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
56

57. Native C/C++ Libraries
▹The next layer is the Android’s native libraries.
▹These libraries are written in c or c++ language and are
specific for a particular hardware.
57

58. Native C/C++ Libraries
▹Many core Android system components and services, such
as ART and HAL, are built from native code that require
native libraries written in C and C++.
▹The Android platform provides Java framework APIs to
expose the functionality of some of these native libraries to
apps
▹https://developer.android.com/ndk/guides/stable_apis.html
58

59. Native C/C++ 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
OpenMAX AL
Android native multimedia
handling is based on Khronos
Group OpenMAX AL 1.0.1 API.
OpenGL ES
Used to render 2D or 3D graphics
content to the screen
59

60. Hardware Abstraction Layer
▹a hardware abstraction layer (HAL) is a layer of
programming that allows a computer operating system to
interact with a hardware device at a general or abstract level
rather than at a detailed hardware level.
▹The hardware abstraction layer (HAL) provides standard
interfaces that expose device hardware capabilities to the
higher-level Java API framework.
(https://www.youtube.com/watch?v=Va8c9g3NclA)
60

61. 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.
▹Other such as threading and low-level memory
61

62. 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.
62

63. Introduction to
Android Studio
https://developer.android.com/studio/intro/index.html
63

64. The UI of
Android
Studio
64

65. The UI of
Android
Studio
65
1. The toolbar lets you carry out a wide range of actions,
including running your app and launching Android tools.
2. The navigation bar helps you navigate through your
project and open files for editing. It provides a more
compact view of the structure visible in
the Project window.
3. The editor window is where you create and modify code.
Depending on the current file type, the editor can change.
For example, when viewing a layout file, the editor displays
the Layout Editor.

66. The UI of
Android
Studio
66
4. The tool window bar runs around the outside of the IDE
window and contains the buttons that allow you to expand
or collapse individual tool windows.
5. The tool windows give you access to specific tasks like
project management, search, version control, and more.
You can expand them and collapse them.
6. The status bar displays the status of your project and the
IDE itself, as well as any warnings or messages.

67. Project View
67
▹Customize the view of the project
files to focus on specific aspects of
your app development.
▹For example, selecting
the Problems view of your project
displays links to the source files
containing any recognized coding
and syntax errors, such as a missing
XML element closing tag in a layout
file.

68. Project View
(Project
View)
68
▹Project View
▹All the files and file path are
showing exactly like the file system
in the operating system

69. Project View
(Android
View)
69
▹By default it is in Android View
▹Focus on the Android Project File
▹Classified according to the
▸Manifests
▸Java
▸Res
▸Gradle

70. Project
Structure
70
▹manifests: Contains the
AndroidManifest.xml file.
▹java: Contains the Java source
code files, including JUnit test
code.
▹res: Contains all non-code
resources, such as XML layouts, UI
strings, and bitmap images.

71. Project
Structure
Res-Layout
71

72. Project
Structure
Res-Layout
72

73. Project
Structure
Res-
Drawable
73

74. Project value
resources
74
colors.xml
XML resource that
contains the color code
and name.
Strings.xml
XML resource that
provides a single string.
Styles.xml
A style resource defines
the format and look for
a UI.

75. Project App
Manifest
75 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.

76. Project App
Manifest
76

77. Installation Guide
https://www.youtube.com/playlist?list=PLO9rmHIeCZCaFu4m_TKSSMwOsZHuSztFA
77

78. Getting Started – System Requirement
▹i5 Processor
▹16 GB RAM recommended; ssd will be much better
▹10 GB of available disk space minimum,
12 GB Recommended (IDE + Android SDK and emulator
system image)
▹1280 x 800 minimum screen resolution
78

79. Getting Started
1. Android Studio
▸ Android SDK
2. 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
79

80. Your Task
▹Install all the necessary tools to develop an android app
▸Refer to the material in UKMFolio
▸Run an hello world project in Real device/ Emulator
▸Start the lab assignment (with matrix no.)
▹Find a partner, a project partner
▸Mobile App Development Project(2-3 persons)
⬩Think a mobile application idea
80