This document provides an overview and introduction to developing Android apps using a hybrid approach with HTML5, jQuery, Apache Cordova and the Android SDK. It begins with background information about the author and their experience developing Android apps. It then outlines an agenda for two days of training on this topic. The rest of the document addresses frequently asked questions about Android and the hybrid app development process through short explanations and diagrams. Key topics covered include what Android is, its architecture, tools used for hybrid app development like Cordova and Eclipse, and how to structure an Android project.

1. 26/1/2015 http://blog.kerul.net 1
Android Apps Development
(Hybrid approach using HTML5, jQuery,
Apache Cordova and Android SDK)
Khirulnizam Abd Rahman
blog.kerul.net

2. About Khirulnizam
 Lecturer of Computer Science, Faculty of
Information Science and Technology, Selangor
International Islamic University College (KUIS) –
since 2000.
 Certified HRDF Trainer
 Codes in blog.kerul.net
 Avid Android developer since 2010 – MDeC
ICONApp 2010.
 Grants MDeC ICON 2010,2011; MDeC
ICONdap 2013.
 Apps in Google Play
 M-Mathurat – 200K ( bit.ly/m-mathurat )
 Peribahasa Dictionary – 20K ( bit.ly/pbahasa)
 mDictionary – open-sourced ( bit.ly/m-dictionary )
26/1/2015 http://blog.kerul.net 2

3. Agenda Day 1
26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 3

4. Agenda Day 2
26/1/2015 http://blog.kerul.net 4

5. Android Devices
26/1/2015 http://blog.kerul.net 5

6. Android Story
 http://www.techsavys.info/2011/07/the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shares.html
26/1/2015 http://blog.kerul.net 6

7. Faq1: What is Android?
 Android is a software stack for mobile devices
that includes an operating system,
middleware and key applications (platform).
The Android SDK provides the tools and APIs
necessary to begin developing applications on
the Android platform using the Java
programming language.
 The kernel of most Android version is based
on Linux 2.6 (3.0 for ICS).
 Android architecture;
26/1/2015 http://blog.kerul.net 7

8. Android Architecture
26/1/2015 http://blog.kerul.net 8

9. Faq2: Who develop
Android?
 Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc.
 Google acquired Android Inc.
in 2005.
 Till Mac 2013, developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
26/1/2015 http://blog.kerul.net 9

10. Android
Global
Market
share
Source: Strategy Analytics -
http://blogs.strategyanalytics.c
om/WSS/post/2013/10/31/And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013.aspx
26/1/2015 http://blog.kerul.net 10

11. Faq3: How many versions
(distributions) Android has?
26/1/2015 http://blog.kerul.net 11

12.  Source:
http://developer.android.com/resources/dashb
oard/platform-versions.html
26/1/2015 http://blog.kerul.net 12

13. Faq4: What is API Level?
 API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform.
 The Android platform provides a framework
API that applications can use to interact with
the underlying Android system.
26/1/2015 http://blog.kerul.net 13

14. Faq5: What is Android
app?
 Developer can develop application that runs
on top of Android.
 App is actually a simpler version of
application.
 Uses *.apk for the installer file extension.
26/1/2015 http://blog.kerul.net 14

15. Apps samples
26/1/2015 http://blog.kerul.net 15

16. Apps
26/1/2015 http://blog.kerul.net 16

17. Faq6: What is Dalvik Virtual
Machine, is it similar as JVM?
 Author - Dan Bornstein
 Dalvik VM implementing slightly different
architecture to JVM.
 Dalvik VM is a register-based
architecture.
 Being optimized for low memory and
slower processing speed.
 The VM was slimmed down to use less
space.
26/1/2015 http://blog.kerul.net 17

18. DVM (for below Android 5)
26/1/2015 http://blog.kerul.net 18

19. ART
 Android Runtime
26/1/2015 http://blog.kerul.net 19

20. Faq7: What is the language
used to develop Android app
Hybrid Approach?
 HTML
 CSS
 JavaScript
 Java
 XML
 SQL
26/1/2015 http://blog.kerul.net 20

21. Hybrid Approach
26/1/2015 http://blog.kerul.net 21

22. Hybrid Approach – consists
of
 HTML + jQuery (JavaScript, CSS)
 Apache Cordova (HTML to Android
Project)
 Eclipse ADT – to generate APK
26/1/2015 http://blog.kerul.net 22

23. Faq8: What are tools needed
to develop Android App
Hybrid? HTML knowledge
 jQuery (JavaScript + CSS framework)
 NodeJS
 Apache Ant
 Apache Cordova
 Latest JDK
 Eclipse ADT Bundle
 Android SDK
26/1/2015 http://blog.kerul.net 23

24. Apache ANT
 Apache Ant is a Java library and
command-line tool
 to drive processes described in build
files as targets and extension points
dependent upon each other.
 The main known usage of Ant is the
build of Java applications.
26/1/2015 http://blog.kerul.net 24

25. NodeJS
26/1/2015 http://blog.kerul.net 25
 Node.js contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP

26. Apache Cordova
 Previously known as PhoneGap
 use HTML5 and CSS3 for their rendering,
and JavaScript for logic
 HTML5 provides better support for GPS,
camera, video, etc.
 includes basic plugins that allow access to
the device's hardware’s.
 embeds HTML5 code inside a native
WebView on the device, using a foreign
function interface to access the native
resources of the device.
26/1/2015 http://blog.kerul.net 26

27. IDE - Eclipse
26/1/2015 http://blog.kerul.net 27

28. Emulator
26/1/2015 http://blog.kerul.net 28

29. Dalvik Debugger
26/1/2015 http://blog.kerul.net 29

30. Faq8: Where to distribute my
App?
 Play.google.com
 Sampung App Store
 Amazon AppStore
 Appzill.net
 GetJar.com
 Your own distribution channel
26/1/2015 http://blog.kerul.net 30

31. Android Project Structure
 Inside Android Project, there should be;
/src – the Java codes are here
/gen – generated automatically
/assets – put your fonts, videos, sounds here
/res – images, layout and global variables
/drawable-hdpi –for high spec phones
/drawable-ldpi –for low spec phones
/drawable-mdpi –for medium spec phones
/layout – all XML file for the screen(s) layout
/values – global constant variables
26/1/2015 http://blog.kerul.net 31

32. 26/1/2015 http://blog.kerul.net 32

33. AndroidManifest
 AndroidManifest.xml – app’s
permissions need to be registered here
– (eg: app can access Internet, phone
contacts, camera, etc must be
mentioned here)
26/1/2015 http://blog.kerul.net 33

34. <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="7"
android:versionName="1.7"
package="net.kerul.mMathurat">
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:taskAffinity=".mMathuratActivity">
<activity android:name=".mMathuratActivity"
android:label="@string/app_name"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".Aboutus" class=".Aboutus"
android:label="Mengenai kami..." android:screenOrientation="portrait">
</activity>
<activity android:name=".Berterusan" class=".Berterusan"
android:label="Mod pemanduan..." android:screenOrientation="portrait">
</activity>
</application>
<uses-sdk android:minSdkVersion="7" />
<receiver android:name=".DetectIncomingCall">
<intent-filter>
<action android:name="android.intent.action.PHONE_STATE" />
</intent-filter>
</receiver>
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE"></uses-permission>
</manifest>
26/1/2015 http://blog.kerul.net 34

35. DEMOs
26/1/2015 http://blog.kerul.net 35
LESS plan, MORE do
- Mark Zuckerberg

36. Agenda Day 1
26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 36

37. Installing Web Editor
 Use NotePad++
 Or any HTML editor (such as
DreamWeaver)
26/1/2015 http://blog.kerul.net 37

38. Web Client
 Any web browser could be the web
client
26/1/2015 http://blog.kerul.net 38

39. Install the Web Server
 Apache HTTPd – also available in
XAMPP
 Download at
https://www.apachefriends.org/
 localhost
26/1/2015 http://blog.kerul.net 39

40. Web root
26/1/2015 http://blog.kerul.net 40

41. What is HTML?
 HyperText Mark-up Language
 Marking up areas with angle brackets or
TAGs
26/1/2015 http://blog.kerul.net 41

42. HTML Basics Structure
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 Save as index.html
26/1/2015 http://blog.kerul.net 42

43. Hyperlinks
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="http://kerul.net">This is a link</a>
</body>
</html>
26/1/2015 http://blog.kerul.net 43

44. Images
 <img src="w3schools.jpg" alt="W3Schoo
ls.com" width="104" height="142">
26/1/2015 http://blog.kerul.net 44

45. Layout using DIV
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
26/1/2015 http://blog.kerul.net 45

46. CSS?
 Cascading Style Sheet
 Added to HTML4 to provide styles in
HTML elements
26/1/2015 http://blog.kerul.net 46

47. CSS syntax
 p {
color: red;
text-align: center;
}
26/1/2015 http://blog.kerul.net 47

48. Simple CSS example - internal
 <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
26/1/2015 http://blog.kerul.net 48

49. CSS inline
 <h1 style="color:blue;margin-left:30px;">
This is a heading.</h1>
26/1/2015 http://blog.kerul.net 49

50. CSS example
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
<body style=“background-color: #b0c4de;”>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
26/1/2015 http://blog.kerul.net 50

51. JavaScript
 Script to add live interaction to HTML
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse
over this text</h1>
</body>
</html>
26/1/2015 http://blog.kerul.net 51

52. JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the
input text to upper case.</p>
</body>
</html>
26/1/2015 http://blog.kerul.net 52

53. Mobile Web Page
 Create folders in web root as below
26/1/2015 http://blog.kerul.net 53

54. Copy the template
 css/jquery.mobile.min.css
 js/jquery.min.js
 js/jquery.mobile.min.js
 index.html
The css and js files are available in the
jQuery.mobile
26/1/2015 http://blog.kerul.net 54

55. Mobile Web page structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
26/1/2015 http://blog.kerul.net 55
http://demos.jquerymobile.com/1.4.5/pages/

56. Head segment
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css"
rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
26/1/2015 http://blog.kerul.net 56