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


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


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





•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






•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, 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






•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





•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






•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






•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 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






•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

Technology

rajesh vasa

vasa personal note

android device

honeycomb android

menu position

menu buttonthis

menu visibility

contextual menu