HIT3328 - Chapter02 - Foundation and Tools
-
Upload
yhal-htet-aung -
Category
Technology
-
view
107 -
download
0
description
Transcript of HIT3328 - Chapter02 - Foundation and Tools
HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2012
Twitter: @rvasa Blog: http://rvasa.blogspot.com
1
Lecture 02Foundation 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
PrograProgramm
Operating Operating SystemsSystems
HardwareHardware
R. Vasa, 20124
We program to an API
•Programs use services from O/S (via API)
PrograProgramm
Operating Operating 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)
PrograProgramm
Operating Operating SystemsSystems
AndroidiOS
FrameworFrameworksks
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?•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, 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
Lecture Overview - Where are we?•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, 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, HomeWhere 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
Lecture Overview - Where are we?•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, 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
Lecture Overview - Where are we?•Programs and Operating Systems
•What is Android (for a programmer)?
•Android - Device and Interaction Overview
•Development Tools
•Configuring IDE for Additional Insight
•Using the Logger
•Building a Simple App.
•Building an Interactive App.
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
Lecture Overview - Where are we?•Programs and Operating Systems
•What is Android (for a programmer)?
•Android - Device and Interaction Overview
•Development Tools
•Configuring IDE for Additional Insight
•Using the Logger
•Building a Simple App.
•Building an Interactive App.
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
Lecture Overview - Where are we?•Programs and Operating Systems
•What is Android (for a programmer)?
•Android - Device and Interaction Overview
•Development Tools
•Configuring IDE for Additional Insight
•Using the Logger
•Building a Simple App.
•Building an Interactive App.
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 withLayout 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 RecapActivity
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 ValuesDefined 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
Lecture Overview - Where are we?•Programs and Operating Systems
•What is Android (for a programmer)?
•Android - Device and Interaction Overview
•Development Tools
•Configuring IDE for Additional Insight
•Using the Logger
•Building a Simple App.
•Building an Interactive App.
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