HIT3328 - Chapter02 - Foundation and Tools

HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2012
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
1
Lecture 02
Foundation and
Tools
R. Vasa, 20122
Lecture Overview
•Programs and Operating Systems
•What is Android (for a programmer)?
•Android - Device and Interaction Overview
•Development Tools
•Configuring the IDE for Android
Development
•Using the Logger
•Building a Simple App.
•Building an Interactive App.
R. Vasa, 20123
Programs and Operating
Systems
•All programs eventually execute on
Hardware
•They all make use of services from O/S
PrograProgra
mm
OperatingOperating
SystemsSystems
HardwareHardware
R. Vasa, 20124
We program to an API
•Programs use services from O/S (via API)
PrograProgra
mm
OperatingOperating
SystemsSystems
HardwareHardware
APIAPI
R. Vasa, 20125
API is good - but frameworks
are better
•Android and iOS are more than O/S
•They are platforms and hence include,
•Operating System (with primitive API)
•Frameworks (incl. Components/Libraries)
PrograProgra
mm
OperatingOperating
SystemsSystems
Android
iOS
FrameworFramewor
ksks
APIAPI
R. Vasa, 20126
iOS
Cocoa TouchCocoa Touch
MediaMedia
Core ServicesCore Services
Core O/SCore O/S
Touch UI, Gestures
Audio, Video
Data, Telephony,
Networking, Location
Primary programming language: Objective-C

R. Vasa, 20127
Android
Image Source: http://developer.android.com
Programming languages: Java, C/C++
R. Vasa, 20128
We write to a
framework/library
•We are developing programs to use a
framework
•Knowledge of framework is very important
•Android / iOS have very different
frameworks
•Different data structures & algorithms
•Different nuances and culture
•But ... broad concepts are similar
•You can learn iOS faster if you know Android
(vice-versa)
R. Vasa, 20129
Lecture Overview - Where are
we?
Development
•Using the Logger
R. Vasa, 201210
Android is a bi-lingual platform
Image Source: http://www.tbray.org
JavaC/C++
R. Vasa, 201211
What is Dalvik?
•Dalvik is a Virtual Machine
•Dalvik executes the compiled Java code
•Dalvik uses a ‘register-based architecture’
•It is NOT a stack machine like the JVM
•Stack machine Vs Register machines
•Data is loaded and manipulated differently
•Register based -> quicker load and
execution, but slightly larger program size
R. Vasa, 201212
What is in the Android
Framework?
•All of these are available via Java (or C/C+
+)
Image Source: http://www.tbray.org

R. Vasa, 201213
Android Standard Libraries
•Java & C/C++ code can access these
libraries
Background Image Source: http://www.tbray.org
RDBMS Web Page
Rendering
XML
FontsCrypto
R. Vasa, 201214
Where do we start with
Android? Simple Graphical
Applications
R. Vasa, 201215
Some Assumptions (from now
on...)
•You know how to build Java programs
•You also know,
•Package organisation system of Java
•Aware of commonly used standard libraries
•Can use a command interface (Terminal in
OSX, MS Dos console in Windows)
•Can read Java code and understand
logic/flow
•Interface inheritance
R. Vasa, 201216
If your Java is rusty
•You have some catching up to do....
Free e-Book at http://www.mindview.net/Books/TIJ/
R. Vasa, 201217
If you know these, you will
learn faster
•Event handling
•By implementing listener interfaces
•By use of anonymous inner classes
•Hash Tables / Maps (concept + code)
•Singleton, Factory, Visitor design patterns
•Have built user interfaces in another
language/framework (incl. Swing/AWT)
•Call-backs
R. Vasa, 201218
we?
•Android - Device and Interaction
Overview
Development
•Using the Logger

R. Vasa, 201219
Android Device User
Interaction
•Android has a three key buttons
Menu
HomeBack
Apart from these
buttons, vendors can
add more buttons (if
they wish)
R. Vasa, 201220
Vendors can add additional
buttons
R. Vasa, 201221
There are variations in physical
form
But all phones have Home, Menu, & Back Buttons
R. Vasa, 201222
Home Button...
•Typically, this will take you back to the
Home Screen of the phone
•Same (default) behaviour as the iPhone /
iPad button
Home
R. Vasa, 201223
Back Button
•This will take you back to the previous
screen
•If app. has only one screen, this will exit
app.
•R. Vasa Personal Note: I miss this button the
most when I use the iPhone / iPad)
Back
R. Vasa, 201224
Menu Button
•This will show a contextual menu for a
screen (if one is available)
•Developers can write their own menu for
any screen in their app.
•Quite handy (iOS should borrow this idea)
Menu (as
open)

R. Vasa, 201225
Honeycomb (Android 3.0) is
different...
Back, Home
Where is menu button?
(Buttons need not be physical in Android)
Action Bar
R. Vasa, 201226
Menu Visibility is contextual
(Android 3.0+)
Menu
Sadly, menu position is not mandated (yuk?)
R. Vasa, 201227
Short Problem 1
•This is UX (User Experience) related
•What is the likely rationale for discarding the
‘menu’ button from being always available?
•Would you have made a similar choice?
•Menu position is not mandated (can be top-
right, bottom left etc.)
•As a developer do you prefer the freedom?
•btw. Google’s choices were intentional
R. Vasa, 201228
we?
Development
•Using the Logger
R. Vasa, 201229
Development Tools
•iOS - XCode IDE + iOS SDK (from Apple)
•Offers a robust/powerful Visual UI Builder
•Android
•Android SDK (Compiler and Emulator)
•Eclipse IDE + Android Plug-in
•Ant (Build System)
•Debugger is powerful
•Visual UI Builder (is getting better)
R. Vasa, 201230
IDE, SDK and Emulator
•IDE - Editor where we write the code
•SDK - Tools that will compile our code
•Emulator - Runs the code
•Emulator runs as a separate application
•IDE communicates to this emulator to
deploy the code
•Debugger (in IDE) also works with emulator

R. Vasa, 201231
Eclipse IDE
R. Vasa, 201232
Eclipse IDE - Graphical UI
Editor
R. Vasa, 201233
Android Emulator
Permits checking
Portrait and
Landscape views
R. Vasa, 201234
Emulator is nice .. but phone is
better
•The emulator runs the Android O/S (you can
run any version from 1.6 up)
•Emulates the phone hardware (like
VMWare)
•Emulator does not have sensors (e.g. GPS,
Gyro, Accelerometer, Cell phone etc.)
•Offers ways to simulate sensor data
R. Vasa, 201235
Emulators Vs Simulator
•iOS offers a simulator
•Android has gone down the emulator path
•Trade-offs (pros and cons),
•Simulators start-up faster, good enough
•Emulators allow checking against rel. 1.6 of
the O/S easily + closer to phone hardware
•Emulators and Simulators cannot mimic real
CPU speed, disk speed, network speed etc.
(yet!)
R. Vasa, 201236
You need a phone (for serious
work)
•Emulator + Simulators are great to learn
with
•Commercial (or serious work) - Need Phone
•Why?
•Mobile apps. are context based (& mobile)
•Best way to test them is in their natural
environment
•Sticky message: “Cannot get users to walk
around with an emulator to their head”

R. Vasa, 201237
Short Problem 2 (True Story)
•An app. to learn Japanese
•Built around Flash Card
metaphor
•Database of 145k words
•During development,
•Search was super-quick
•When tested on phone,
•Search was taking too long
•Why?
R. Vasa, 201238
Lets get our feet wet
R. Vasa, 201239
Demo 1
•Run IDE + Create Simple Hello World
•Send it to Emulator
•Watch what happens on Console View
•Send an SMS to the Emulator
R. Vasa, 201240
we?
•Configuring IDE for Additional Insight
•Using the Logger
R. Vasa, 201241
Developers need more
insight...
•You need a lot of information when
developing apps:
Views
Need these to see program behaviour
(there is no console or MS-DOS prompt)
R. Vasa, 201242
What do developers need?
•Ability to control the Emulator
•Ability to watch the messages between IDE
and Emulator (things are not always
perfect)
•Ability to inspect the processes running on
the emulator (or phone)
•Ability to watch the threads and resources
used by various apps.
•Ability to inspect “LOG” messages

R. Vasa, 201243
we?
•Using the Logger
R. Vasa, 201244
Can you program without
println?
•Guess what? We cannot do ...
• System.out.println(“I am here!”);
•Same issue in iOS and Android
•These devices do not have a console
•But, we can log messages and watch them
•In Android, we can do,
• Log.d(“TAG”, “I am here!”);
R. Vasa, 201245
Log Messages in Android
R. Vasa, 201246
Demo 2
•Logging a message in Android
•Multiple levels of logging
•Verbose (Log.v(“TAGTAG”, “MethodX Called”);
•Debug (Log.d(“BLAH”, “x should be 34” );
•Information (Log.i(“TAGBLAH”, “Socket open”);)
•We also have Warning, Error, Fatal, Silent
•You can stop log messages from showing
• http://developer.android.com/reference/android/util/Log.html
(See last few methods .. you may say
@#$)
R. Vasa, 201247
Logging
•Android has Log class, iOS has NSLog
•When shipping production/final code -- we
should remove these Log methods
•iOS -- Use a #define in the make script
•Android -- Adjust configuration of ProGuard
•What is ProGuard?
•Code optimisation/obfuscation tool (we will
discuss later...)
•Bundled as part of Android SDK
R. Vasa, 201248
Concept Recap
•Key Buttons -- Home, Back, Menu
•IDE, SDK, Emulator
•Customising IDE to show additional info.
•Logging, Emulator Control, Console
•Sending messages to emulator
•Use of the Log class

R. Vasa, 201249
we?
•Using the Logger
R. Vasa, 201250
Building a Simple App.
R. Vasa, 201251
What is involved?
•Place UI controls (Text and Image)
•Layout the controls
•Centre text
•Make text large font
•Display Image to take up all space
R. Vasa, 201252
Knowledge Needed to Build it...
•What UI Controls available?
•How do we place/layout the UI controls?
•How do we set the start screen?
•How is the UI Constructed & Destroyed
•How exactly do we start/exit the app.?
R. Vasa, 201253
Android Offers a number of UI
Controls
•Offers all standard controls and lot more...
Progress
These
are a
small
subset of
available
controls
R. Vasa, 201254
Each Screen is an Activity
•Android app. is made up of Activities
Activity

R. Vasa, 201255
Views are Android’s Key UI
Building Block
•We need two views on the Activity
TextView
ImageView
R. Vasa, 201256
Views are Placed inside a View
Group
•Different types of View Groups are provided
•Each View Group offers a different method
to layout the Views
View Group(Linear
Layout)
R. Vasa, 201257
View Groups and Layouts
•Android offers the following View Groups,
•Linear Layout (Horizontal or Vertical)
•Absolute Layout (You set X, Y for each View)
•Table Layout (Rows and Columns)
•Relative Layout (Position relative to other
Views)
•Frame Layout (Show only one view at a
time)
•Scroll View (Permits scrolling of the screen)
•View Groups can be nested
R. Vasa, 201258
Linear Layout
•Two Linear Layouts with 4 Views each
•Nested View Groups
•Activity contains,
•Linear Layout (Vertical)
•Linear Layout (Horizontal)
•Linear Layout (Vertical)
•8 Text Views
Source code:
http://developer.android.com/resources/tutorials/views/hello-linearlayout.html
R. Vasa, 201259
How do we program the
Layout?
•Layout can be written as an XML file
•Layout can be also be written in Java
•XML file is easier to start off with
Layout Definition XML File
R. Vasa, 201260
Concept Recap
•We use a View Group to place and control
where Views are shown
•An App. can have one or more Activities
Activity View Group Views
(Layout)

R. Vasa, 201261
Demo 3 - Linear Layout Control
•The layout manager offers control on how
much a View will stretch
•You can set width / height of each View
to,
•Match Parent (same width/height as parent)
•Fill Parent (cover up parent)
•Wrap Content (use only what is needed)
•You can use Gravity to position View
•You can combine using bit masking
•You can also assign weight to Views
R. Vasa, 201262
Common Layouts
•Recommended Reading:
• http://developer.android.com/guide/topics/ui/layout-objects.html
•Layouts take some time to learn
•Try different layouts and adjust options
•Change the background colour of the views
to see how the layout works
•Remember -- gravity and weight
adjustment
R. Vasa, 201263
Generated Code, Layout &
Resources
•How did Australia image get into the App.?
•How did we set the text to “Australia”?
•Recall: Convention Over Configuration
•Layout Defined in /layout/main.xml
•Resources Placed in /res/drawable-
•String values defined in
/values/strings.xml
R. Vasa, 201264
Resource Definition
•All images (and media) are placed in “res”
directory -- within subfolders
•Android SDK tools will generate R.java
which contains a reference to these
resources
R. Vasa, 201265
Resources and Generated Code
A reference to
these gets
automatically
generated by the
Android SDK tools
R. Vasa, 201266
Resources and Generated Code
Generated Code
static final int australia=0x7f020000;

R. Vasa, 201267
A Reference to Layout also
Generated
All References are Integers
R. Vasa, 201268
Concept Recap
•We use a View Group to place and control
where Views are shown
•An App. can have one or more Activities
Activity View Group Views
(Layout)
R. Vasa, 201269
How does Activity know about
layout?
Reference to the layout
This is the Activity Class
(Android Runtime will Render this Layout)
R. Vasa, 201270
Who writes the Activity code?
This block of code is created by
IDE/SDK when we create new
Android projectYou can also write you own -- more on that later in
semester
R. Vasa, 201271
Activity Creation
Method called (by the Application
Launcher) when Activity is first
created
R. Vasa, 201272
Activity Creation - Layout
Rendeing
Method call will pass the reference to
the layout that needs to be rendered
on the screen
(We will discuss the “rending model” later in the
semester)

R. Vasa, 201273
What is the “root” Activity?
•How does Android know which Activity to
create first?
Answer: Application Manifest File
R. Vasa, 201274
Application Manifest File
Activity Name
Application Icon Reference
Category
R. Vasa, 201275
Concept Recap
Activity
View Group
(Layout)
Activity Class (Java)
Layout Definition
(main.xml)
R. Vasa, 201276
Layouts and Resources
•How did the Australia image get into
layout?
Layout can refer to resources
@drawable is a special tag
R. Vasa, 201277
Layouts and String Information
•How did we set the text to “Australia”
String constant
R. Vasa, 201278
Layout and String Information
•String information can come from constant
values defined in values.xml
Context Help
shows
recommendations

R. Vasa, 201279
String Constant Values
Defined as a
resource
Refer using an @string tag
R. Vasa, 201280
What is it with the @ tag?
•Constant Resources in Android can be
referred using the “@” tag in XML layout
•Example: @drawable, @string ...
@drawable/australia
@drawable/bots
R. Vasa, 201281
Significance of hdpi/ldpi/mdpi
High-Res, 240 dpi screen
Low-Res, 120 dpi screen
Med-Res, 160 dpi screen
Different resolution images
R. Vasa, 2012
@ Tag and Multiple Screen
Resolutions
•Dealing with multiple screen resolutions
@drawable/icon
Android Runtime decides best resource to use
based on hardware capabilities
R. Vasa, 201283
Drawable at Different
Resolutions
High
Low
Medium
R. Vasa, 201284
Drawable at Multiple
Resolutions
•You should ideally provide these images
•Runtime will try to
•Scale down Highest resolution available, (or)
•But, Low may need scaling up (yuk!)
•Images at different resolution must be
called the “same name”
•SDK convention based tools will select best
option

R. Vasa, 201285
we?
•Using the Logger
R. Vasa, 201286
Building an App with Simple
Interaction
•Temperature Conversion (C -> F)
R. Vasa, 201287
What is involved?
•Place some UI controls
•Write a simple function (C -> F)
•When Button is clicked,
•Use (C->F) function
•Pass it the Celsius value
•Display the Fahrenheit Value
R. Vasa, 201288
Demo 4
•Walk through of (C->F) Conversion App.
•Recap: Activity, Layout and Views
•Event Handling
R. Vasa, 201289
Recommended Reading
•What Android Is, Tim Bray
• http://www.tbray.org/ongoing/When/201x/2010/11/14/What-Android-Is
•Android Developers Guide
• http://developer.android.com
• Common Layouts
• http://developer.android.com/guide/topics/ui/layout-objects.html

HIT3328 - Chapter02 - Foundation and Tools

More Related Content

What's hot

Viewers also liked

Similar to HIT3328 - Chapter02 - Foundation and Tools

More from Yhal Htet Aung

Recently uploaded

HIT3328 - Chapter02 - Foundation and Tools