Introduction to Mobile

Application Development
ECI3169
DAY SCHOOL 2

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 1

In previous day school
Unit 1 – Overview
◦ What is Mobile Computing
◦ History of Mobile Computing
◦ Mobile Platforms
◦ Mobile Application Development Environments
◦ Mobile Application Domains

Unit 2 – Mobile Application Design and Architecture

◦ Mobile Application Architecture
◦ Mobile Application Design Considerations

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 2

Today
Unit 2 – Mobile Application Design and Architecture
◦ Mobile GUI and Mobile Information Architecture
◦ Mobile Web Content Adaption

Unit 3 – Mobile Application Development

◦ Android Application Development

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 3

Mobile Information Architecture
Hierarchy
The hierarchy pattern is a standard site structure with an index page and
a series of sub pages. If you are designing a responsive site you may be
restricted to this, however introducing additional patterns could allow
you to tailor the experience for mobile.
Good for
Organizing complicated site structures that need to follow a desktop
site’s structure.
Watch for
Navigation. Multi-faceted navigation structures can present a problem
to people using small screens.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 4

Mobile Information Architecture
Hub & spoke
A hub and spoke pattern gives you a central index from which users will
navigate out. It’s the default pattern on Apple’s iPhone. Users can’t
navigate between spokes but must return to the hub, instead. This has
historically been used on desktop where a workflow is restricted
(generally due to technical restrictions such as a form or purchasing
process) however this is becoming more prevalent within the mobile
landscape due to users being focused on one task, as well as the form
factor of the device, making a global navigation more difficult to use.
Good for
Multi-functional tools, each with a distinct internal navigation and
purpose.
Watch for
Users that want to multi-task.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 5

Mobile Information Architecture
Nested doll
The nested doll pattern leads users in a linear fashion to more detailed
content. When users are in difficult conditions this is a quick and easy
method of navigation. It also gives the user a strong sense of where they
are in the structure of the content due to the perception of moving
forward and then back.
Good for
Apps or sites with singular or closely related topics. This can also be
used as a sub section pattern inside other parent patterns, such as the
standard hierarchy pattern or hub and spoke.
Watch for
Users won’t be able to quickly switch between sections so consider
whether this will be suitable, rather than a barrier to exploring content.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 6

Mobile Information Architecture
Tabbed view
This is a pattern that regular app users will be familiar with. It’s a
collection of sections tied together by a toolbar menu. This allows the
user to quickly scan and understand the complete functionality of the
app when it’s first opened.
Good for
Tools based apps with a similar theme. Multi-tasking.
Watch for
Complexity. This pattern is best suited to very simple content
structures.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 7

Mobile Information Architecture
Dashboard
Dashboard pattern brings more detailed content directly to the index
screen by using components to display portions of related tools or
content. This pattern is more suited to tablet than mobile due to its
complexity. It can be really powerful as it allows the user to
comprehend key information at a glance, but does heavily rely on
having a well-designed interface with information presented clearly.
Good for
Multi-functional tools and content-based tablet apps that have a
similar theme.
Watch for
The tablet screen gives you more space to utilize this pattern well,
however it becomes especially important to understand how a user
will interact with and between each piece of content, to ensure that
app is easy, efficient and enjoyable to use.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 8

Mobile Information Architecture
Filtered view
Finally, a filtered view pattern allows the user to navigate within a set
of data by selecting filter options to create an alternative view.
Filtering, as well as using faceted search methods, can be an excellent
way to allow users to explore content in a way that suits them.
Good for
Apps or sites with large quantities of content, such as articles, images
and videos. Can be a good basis for magazine style apps or sites, or as
a sub pattern within another navigational pattern.
Watch for
Mobile. Filters and faceted search can be difficult to display on a
smaller screen due to their complexity.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 9

Mobile GUI Architecture
Native UI
◦ Use native SDK components to visualize contents.
(i.e. Navigation Drawer, List Views, Fragments, etc. in android)
◦ Fast, highly customizable, but only limited to selected platform.
◦ Themes are generally provide native visual contents and animations.
◦ User gets same application experience as system applications.
◦ Mostly based on MVC architecture.

UI View UI Data Model

Visual UI
Controller Use data
Designed
Designed using models from
using
native local data or
markup
development from remote
language
language server

Native Mobile UI

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 10

Mobile GUI Architecture
Hybrid UI
◦ Use components provided by framework to visualize contents.
(i.e. Lists, forms, TextFields, etc.)
◦ Customizable, not depend on platform.
◦ Themes are generally provide visual contents and animations, similar to native themes.
◦ But user might not have the same application experience as system applications.

UI View
UI Data Model
Visual UI Controller
Use data
Designed Designed
models from
using using
local data or
Markup language
from remote
language provide by
server
framework

Framework
Mobile UI

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 11

Mobile GUI Architecture
Web UI
◦ Use HTML elements with CSS styles to visualize content.
(i.e. div, form, img, canvas, iframe, etc.)
◦ Slow, customizable, not depend on plat form, but not rending as same in all mobile platforms in same
way.
◦ Hard to provide native visual contents and animations.
◦ User gets different application experience than system applications.
◦ Back end functionalities implemented on remote server.
◦ Mostly based on Client server architecture.

Visual UI UI Data Model

UI View
Designed Use data
Controller
using models from
Designed
HTML/5 and local data or
using
styled using from remote
JavaScript
CSS server
Web View
Mobile WEB UI

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 12

Mobile Web Content Adaption
Generally speaking, people who are looking to build a mobile web site or web based application
fall into two categories. These two goals are quite different and tend to result in different
approaches and solutions. They're either:
◦ Trying to make an existing website work passably well on mobile devices or,
◦ Building a mobile experience from the ground up.

To adapt web contents with mobile there are few adaption patterns introduced. They help to
decide which way is best for their application. Most commonly known web content adaption
patterns are:
◦ Responsive design
◦ Mobile-first responsive design
◦ Progressive enhancement
◦ Server-side adaptation
◦ Hybrid

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 13

 Mobile Web Content Adaption
Content Resolution Context
Name Core principle
adaptation independence Inspection
Serve same HTML to every device.
- flexible grid
Responsive design - media queries No Yes No
- flexible images

Mobile-first responsive Same as responsive design but defaulting to

design serve mobile-friendly version No Yes No

Progressive Serve base HTML to device, use JavaScript to

Yes Yes Yes
enhancement build up functionality as far as possible

All logic on server, client receives only what is

Server-side adaptation Yes Yes No
required

Use device detection to serve initial device-

Hybrid sensitive HTML payload, use client-side Yes Yes Yes
progressive enhancement to build up

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 14

Mobile Web Content Adaption
Name Performance Pros Cons Summary
Responsive design Good, but performance Good technique for Inefficient image Achieves resolution
on lower devices making site less handling in its basic independence but not
limited by sending dependent on browser form content adaptation.
large resources to all resolution
devices, network speed Achieves resolution Inefficient images issue
may also be issue. Future-friendly: does independence only — same image
not require device delivered to all
database to be devices. 
maintained. Complex to build well.
Mobile-first responsive Good, but performance Removes image Achieves resolution Only really useful
design on lower devices inefficiency issue independence only variant of responsive
limited by sending design for building a
large resources to all mobile website
devices

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 15

Mobile Web Content Adaption
Name Performance
Progressive enhancement Not great - client-side logic Full adaptation possible
that implements the build-
up logic necessarily takes
some time to execute,
network speed issues may
impact effectiveness.
Server-side adaptation Limited only by server
performance
Hybrid Good, with reservations.
All clients get initial page
quickly but subsequent
enhancement may impose
delays
Pros Cons Summary
Building mobile and Effectively moves
desktop functionality from adaptation logic to client
single base seems limiting
Often used in conjunction
with responsive design
Full adaptation possible Device detection library Standard technique for
required (usually 10+ years
Fine-grained controls commercial)
Full content adaptation
possible but with cost of
having to use server-side
library
Full adaptation possible, Device detection library Probably best of both
but can also utilise client- required worlds, but currently very
side knowledge (e.g. complex to build
config settings, real-time Complex
data) to add to experience

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 16

Android
Software
◦ Integrated browser based on the open source WebKit engine.
◦ SQLite for relational data storage.
◦ Media support for common audio, video, and still image formats (MPEG4, H.264, MP3, AAC, AMR, JPG,
PNG, GIF)
◦ Dalvik Virtual Machine optimized for mobile devices until KitKat and then using Android Runtime (ART)
as Virtual Machine.

Hardware
◦ Cellular networking : GSM, EDGE, 3G, 4G (hardware dependent)
◦ LAN : Bluetooth, and Wi-Fi (hardware dependent)
◦ Graphics Hardware Acceleration
◦ Camera, GPS and Compass (hardware dependent)
◦ Touch screen and accelerometer for motion sensing

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 17

Android Architecture

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 18

Android Framework & Runtime
Framework
Content Providers
◦ Enable applications access data from other applications, sharing

Resource Manager
◦ Providing access to non-code resources

Notification Manager
◦ Enables all applications to display alerts in the status bar

Activity Manager
◦ Manages the lifecycle of applications

Runtime
◦ Includes a set of core libraries that provides most of the functionality-JAVA
◦ Every Android application runs in its own process
◦ Dalvik VM used as runtime until Android 4.4, but from Android 4.4 ART (Android RunTime) is the runtime

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 19

Android Building Blocks
AndroidManifest.xml - the control file-tells the system what to do with the top-level components
Activities - an object that has a life cycle-is a chunk of code that does some work
Views - an object that knows how to draw itself to the screen
Intents - a simple message object that represents an "intention" to do something
Intent Receiver - to execute in reaction to an external event(Phone
Notifications - Inform events across the platform
Services - is a body of code that runs in the background without UI
Content Provider - an application's data to be shared with other applications

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 20

Android Activity Lifecycle

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 21

Android Application Development
Android Studio
◦ Official IDE for Android based on JetBrains' IntelliJ IDEA and Android SDK included it self
◦ Live Layout: WYSIWYG Editor - Live Coding - Real-time App Rendering.
◦ A rich layout editor that allows users to drag-and-drop UI components, option to preview
layouts on multiple screen configurations.
◦ Template-based wizards to create common Android designs and components.
◦ Lint tools to catch performance, usability, version compatibility and other problems.
◦ Android-specific refactoring and quick fixes.
◦ ProGuard and app-signing capabilities.
◦ Gradle-based build support.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 22

Android Application Development
Eclipse IDE with ADT
◦ Android Development Tools (ADT) is a plugin for the Eclipse IDE that extends the capabilities
of Eclipse to
◦ Set up new Android projects
◦ Create an application UI
◦ Add packages based on the Android Framework API
◦ Export signed (or unsigned) .apk files in order to distribute application.
◦ User may have to install Eclipse, ADT plugin, and Android SDK separately and configure for
developments
◦ Graphical layout editor for edit UI layouts
◦ ANT based build support

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 23

Android Studio vs ADT
Feature Android Studio ADT
Build system Gradle ANT
Maven-based build dependencies YES NO
Build variants and multiple-APK
YES NO
generation
Advanced Android code YES NO
completion and refactoring
Graphical layout editor YES YES
APK signing and keystore
YES YES
management
NDK support YES YES

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 24

Android Studio Project Files
Android Studio project files and settings provide project-wide settings that apply across all modules in the project.

.idea - Directory for IntelliJ IDEA settings.

App - Application module directories and files.
Build - This directory stories the build output for all project modules.
Gradle - Contains the gradler-wrapper files.
.gitignore - Specifies the untracked files that Git should ignore.
build.gradle - Customizable properties for the build system. You can edit this file to specify the default build settings used by the
application modules and also set the location of your keystore and key alias so that the build tools can sign your application when building
in release mode. This file is integral to the project, so maintain it in a source revision control system.
gradle.properties - Project-wide Gradle settings.
Gradlew - Gradle startup script for Unix.
gradlew.bat - Gradle startup script for Windows.
local.properties - Customizable computer-specific properties for the build system, such as the path to the SDK installation. Because the
content of the file is specific to the local installation of the SDK, the local.properties should not be maintained in a source revision control
system.
.iml - Module file created by the IntelliJ IDEA to store module information.
settings.gradle - Specifies the sub-projects to build.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 25

Android Application Modules
Android Application Modules are the modules that eventually get built into the .apk files based on your build settings. They contain things
such as application source code and resource files. Most code and resource files are generated for you by default, while others should be
created if required. The following directories and files comprise an Android application module:
build/ - Contains build folders for the specified build variants. Stored in the main application module.
libs/ - Contains private libraries. Stored in the main application module.
src/ - Contains your stub Activity file, which is stored at src/main/java/<ActivityName>.java. All other source code files (such as .java or
.aidl files) go here as well.
androidTest/ - Contains the instrumentation tests. For more information, see the Android Test documentation.
main/java/com.<project>.<app> - Contains Java code source for the app activities.
main/jni/ - Contains native code using the Java Native Interface (JNI). For more information, see the Android NDK documentation.
main/gen/ - Contains the Java files generated by Android Studio, such as your R.java file and interfaces created from AIDL files.
main/assets/ - This is empty. You can use it to store raw asset files. Files that you save here are compiled into an .apk file as-is, and the
original filename is preserved. You can navigate this directory in the same way as a typical file system using URIs and read files as a stream
of bytes using the AssetManager. For example, this is a good location for textures and game data.
main/res/ - Contains application resources, such as drawable files, layout files, and string values in the following directories. See
Application Resources for more information.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 26

Android Application Modules
anim/ - For XML files that are compiled into animation objects. See the Animation resource type.
color/ - For XML files that describe colors. See the Color Values resource type.
drawable/ - For bitmap files (PNG, JPEG, or GIF), 9-Patch image files, and XML files that describe Drawable shapes or Drawable objects
that contain multiple states (normal, pressed, or focused). See the Drawable resource type.
mipmap/ - For app launcher icons. The Android system retains the resources in this folder (and density-specific folders such as mipmap-
xxxhdpi) regardless of the screen resolution of the device where your app is installed. This behavior allows launcher apps to pick the best
resolution icon for your app to display on the home screen. For more information about using the mipmap folders, see Managing
Launcher Icons as mipmap Resources.
layout/ - XML files that are compiled into screen layouts (or part of a screen). See the Layout resource type.
menu/ - For XML files that define application menus. See the Menus resource type.
raw/ - For arbitrary raw asset files. Saving asset files here is essentially the same as saving them in the assets/ directory. The only
difference is how you access them. These files are processed by aapt and must be referenced from the application using a resource
identifier in the R class. For example, this is a good place for media, such as MP3 or Ogg files.
values/ - For XML files that define resources by XML element type. Unlike other resources in the res/ directory, resources written to XML
files in this folder are not referenced by the file name. Instead, the XML element type controls how the resources defined within the XML
files are placed into the R class.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 27

Android Application Modules
xml/ - For miscellaneous XML files that configure application components. For example, an XML file that defines a PreferenceScreen,
AppWidgetProviderInfo, or Searchability Metadata. See Application Resources for more information about configuring these application
components.
AndroidManifest.xml - The control file that describes the nature of the application and each of its components. For instance, it describes:
certain qualities about the activities, services, intent receivers, and content providers; what permissions are requested; what external
libraries are needed; what device features are required, what API Levels are supported or required; and others. See the
AndroidManifest.xml documentation for more information
.gitignore/ - Specifies the untracked files ignored by git.
app.iml/ - IntelliJ IDEA module
build.gradle - Customizable properties for the build system. You can edit this file to override default build settings used by the manifest file
and also set the location of your keystore and key alias so that the build tools can sign your application when building in release mode.
This file is integral to the project, so maintain it in a source revision control system.
proguard-rules.pro - ProGuard settings file.

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 28

Android UI Design
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 29

UI Design – Key Attributes
◦ android:id
This provides a unique identifier for the view, which you can use to reference the object from your app
code, such as to read and manipulate the object. The at sign (@) is required when you're referring to
any resource object from XML. It is followed by the resource type (id in this case), a slash, then the
resource name.
◦ android:layout_width and android:layout_height
These attributes are used to specific sizes for the width and height, the "wrap_content" value specifies
that the view should be only as big as needed to fit the contents of the view. If you were to instead use
"match_parent", then the element would fill the screen, because it would match the size of the parent
View.
◦ android:text
This is used to specify the textual content for particular view such as TextView or EditText. Instead of
using a hard-coded string as the value, you can you value from resources by specifying the resource
name after "@string/".

03/07/2016 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 30

 Discussion

Access day school slides and resources from

http://goo.gl/dM7sEv

08/03/2015 CHARITHA GOONETILLEKE - THE OPEN UNIVERSITY OF SRI LANKA 32