Developing Native Android Apps with Titanium

1http://www.appcelerator.com | @appcelerator

Native Android Applications Native Android Applications with Titaniumwith Titanium

Marshall Culpepper (@marshall_law)

Kevin Whinnery (@kevinwhinnery)

2http://www.appcelerator.com | @appcelerator

Agenda• Native Android Concepts and Terms• Using Titanium APIs to participate in the native Android ecosystem• Cross-platform JavaScript tips and techniques• Code structure for cross-platform apps• Questions and Answers

3http://www.appcelerator.com | @appcelerator

Concepts• Application– http://developer.android.com/reference/android/app/Application.html– 1..n Activities• Selected by OS w/ Intent filters

– SDK version compatibility

• Intent– http://developer.android.com/reference/android/content/Intent.html– Various fields/options• Action (VIEW, EDIT, SEND, etc), Data (URI)• Category (CATEGORY_LAUNCHER etc)• Mime type (i.e. vnd.android.cursor.item/phone)• Class name (i.e. com.mycompany.Activity)• Custom key/value pairs

– Fully serializable data, used between Activities

4http://www.appcelerator.com | @appcelerator

Concepts

• Activity– http://developer.android.com/reference/android/app/Activity.

html– Task Stack• Inter-app + screen navigation

– App entry point– Handle system+custom intents• Can return values to other activities

• Service– http://developer.android.com/reference/android/app/Service.

html– Long running background processes– Part of an Application

5http://www.appcelerator.com | @appcelerator

Concepts

• PendingIntent– http://developer.android.com/reference/android/app/PendingI

ntent.html– Holds an Intent that will be executed at a later time by the

system or another Activity

• NotificationManager– http://developer.android.com/reference/android/app/Notificat

ionManager.html– http://developer.android.com/reference/android/app/Notificat

ion.html– API for showing a system notification, i.e. status bar icon,

sound, etc– our API is currently undocumented, but will be coming

shortly

6http://www.appcelerator.com | @appcelerator

App/Activity Life Cycle

• User launches app–Intent is fired to app with:• category: CATEGORY_LAUNCHER•action: MAIN

7http://www.appcelerator.com | @appcelerator

How do I do that with Ti?• Custom JS Activities/Services– JS Activities can be simple (launched via URL) or complex (launched

via intent filter from the system)– JS Services currently only run when the app starts

• Doesn’t support full functionality of Android Services (yet)• See http://developer.appcelerator.com/doc/mobile/android-simple-services

– Configured via tiapp.xml

• Everything else (mostly) follows a 1:1 mapping w/ official Android API– All constants / create* methods live in Ti.Android– i.e. Ti.Android.createIntent– Access current activity with Ti.Android.currentActivity– Activity.startActivityForResult supports a function callback for

convenience– See Documentation for Ti.Android

• http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Android-module

8http://www.appcelerator.com | @appcelerator

tiapp.xml examples

9http://www.appcelerator.com | @appcelerator

JS Examples

10

http://www.appcelerator.com | @appcelerator

Titanium+Android Demos

11

http://www.appcelerator.com | @appcelerator

Cross-platform Strategy

• If possible, build and test your application for multiple platforms from the start• Understand the cost of using platform-specific native UI elements• Separate business logic and UI construction• Smaller UI components are easier to maintain across platforms than large ones• Test on many devices and resolutions

12

http://www.appcelerator.com | @appcelerator

Some Tools of the Trade

13

http://www.appcelerator.com | @appcelerator

Ti.Platform.osname

A little extra sugar for branching based on OS...

14

http://www.appcelerator.com | @appcelerator

Usage...

use as a convenient way to branch logicbased on operating system, or...

...a convenient way to choose a value based on operating system

15

http://www.appcelerator.com | @appcelerator

Platform Resources

Code files, images, or any other resource can be swapped out on a per-platform basis

16

http://www.appcelerator.com | @appcelerator

Platform JSS

17

http://www.appcelerator.com | @appcelerator

Dealing with multiple resolutions and densities

18

http://www.appcelerator.com | @appcelerator

Terms and Concepts

• Resolution: The total number of physical pixels on a screen

• Density: the spread of pixels across an inch of the actual screen (DPI)

When defining Android user interfaces, the top/bottom/left/right/height/width/font etc. values you use are based on RESOLUTION. SCREEN DENSITY can be used to determine density-appropriate visual

assets to use.

19

http://www.appcelerator.com | @appcelerator

Example

Same Physical Size

Resolution: 320x480 Resolution: 480x800

Medium Density (160dpi)High Density (240dpi)

Smaller Physical Size

Resolution: 240x320

Low Density (120dpi)

20

http://www.appcelerator.com | @appcelerator

Many Screen Types

http://developer.android.com/guide/practices/screens_support.html

21

http://www.appcelerator.com | @appcelerator

Contrast with iOS

• iPhone layout is always based on a 320x480 point system, regardless of screen density/pixels• Retina display devices (high density display) require high-res images (@2x)

320 “points”

480 “points”

22

http://www.appcelerator.com | @appcelerator

Ignoring Densities

• Android property anyDensity=false will cause medium res images to be used, and will scale UI layout to match a 160dpi screen• This is the default behavior in 1.5• Not always desirable - configurable in tiapp.xml

23

http://www.appcelerator.com | @appcelerator

Multiple Resolutions

• Ti.Platform.displayCaps– platformWidth– platformHeight

• Based on available screen real estate, you may change the size or layout of your UI• Use the available emulator skins and devices to test layouts on multiple resolutions• Use top/bottom/left/right for sizing where possible

24

http://www.appcelerator.com | @appcelerator

Multiple Densities

• Even if the available screen resolution is the same, higher density screens call for higher resolution assets• Provide density-specific images in the ‘android/images’ resource directory

25

http://www.appcelerator.com | @appcelerator

Structuring your Titanium application for cross-platform

26

http://www.appcelerator.com | @appcelerator

Rich client applications (like Ti Mobile apps) should strive

to be:

event-driven and

component-oriented

27

http://www.appcelerator.com | @appcelerator

Interaction Events

• Interaction events you know:– click– swipe– change– focus– blur

28

http://www.appcelerator.com | @appcelerator

Custom Events

• Custom events you might not use (but should!)• Custom events can be app wide• Custom events can be specific to your app’s components (business events)

29

http://www.appcelerator.com | @appcelerator

Being component-oriented helps us build cross-platform

more easily.

30

http://www.appcelerator.com | @appcelerator

Component-Oriented

• Your application is composed of a library of application-specific components you create• The smaller the component, the easier it is to make each components work across platforms• Encourages the encapsulation and reuse of UI components

31

http://www.appcelerator.com | @appcelerator

Walkthrough: Tweetanium

• Component oriented construction• Composed from a custom-built UI library, following the Titanium.UI component factory style• Utilizes new features for localization, strategies for externalizing UI configuration• Under construction, code posted next week• Desktop version available as well

32

http://www.appcelerator.com | @appcelerator

Questions?