1.
Android 4.0 UI Design Tips
Justin Lee

2.
Evolution of Android
Android 2.3 Android 3.0 Android 4.0
Gingerbread Honeycomb Ice Cream Sandwich

3.
One OS for Smartphones & Tablets

4.
Topics
Major UI Changes
Design Patterns
Do and Don’t
ICS widgets in Titanium Mobile

5.
Major UI Changes

6.
Fight for Fragmentation

7.
Android is not easy to learn
http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up

8.
Inconsistent hardware buttons
is a big problem

9.
ICS drop hardware buttons
screen
Gingerbread ICS

10.
Software Buttons are dynamic
Landscape Left
Landscape Right

11.
Back Home Recents

12.
What’s missing?

13.
Menu Button

14.
Menu button is NOT longer a
primary button
Gingerbread ICS

15.
Quiz: How to goto settings page?

16.
Not to many people can get it by
themselves

17.
ICS make the menu much
more easy to find

18.
The menu button in legacy
app still available on ICS

19.
But it’s time to say goodbye
http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html

20.
Migrate the global actions to the
action bar & action overflow
Old New

21.
Split action bar for contextual
actions
Old New

22.
Backwards compatibility
Legacy hardware
Legacy software
http://developer.android.com/design/patterns/compatibility.html

23.
Back Button

24.
The behavior of back button
is inconsistent from user’s POV
?

25.
In app navigation is much more
predictable

26.
Home Button

27.
Home button perform too many
functions before ICS
tap
tap
long press

28.
The only function of home
button on ICS is going home

29.
How to goto a recent app?

30.
Recents Button

31.
Tap recents button to show
recent app list

32.
The new recents screen
tap to switch
swipe to remove

33.
Long press gesture changed
Old New
Open contextual menu Select the item

34.
App UI Design Patterns

35.
Common App UI
1.Main Action Bar
2.View Control
3.Content Area
4.Split Action Bar
http://developer.android.com/design/get-started/ui-overview.html

36.
General App Structure
Top level views
Category views
Detail/edit view

37.
New in ICS
1.Navigation Bar
2.Action Bar
3.Multi-pane layouts
4.Selection
http://developer.android.com/design/patterns/new-4-0.html

38.
Navigation
Back Up
system & in-app
In-app navigation
navigation
http://developer.android.com/design/patterns/navigation.html

39.
Swipe Views
Swiping
Between
Detail Views
Swiping
Between
Tabs
http://developer.android.com/design/patterns/swipe-views.html

40.
Action Bar
1.App icon
2.View Control
3.Action Buttons
4.Action overflow
http://developer.android.com/design/patterns/actionbar.html

41.
Split Action Bars
1.Main action bar
2.Top bar
3.Bottom Bar
http://developer.android.com/design/patterns/actionbar.html

42.
Multi-pane layouts
Smartphone Tablet
http://developer.android.com/design/patterns/multi-pane-layouts.html

43.
Selection
Contextual action bar
Long press on an item in list to select Dynamically adjust CAB actions
http://developer.android.com/design/patterns/selection.html

44.
Notifications
http://developer.android.com/design/patterns/notifications.html

45.
Do and Don’t

46.
Do make the large, obvious
tap targets
Touchable UI components are generally laid out along 48dp units.
http://www.slideshare.net/AndroidDev/android-ui-design-tips
http://developer.android.com/design/style/metrics-grids.html

47.
Do use screen density
independent units (dp)
not density independent (px)
density independent (dp)
http://developer.android.com/guide/practices/screens_support.html

48.
Do create versions of all resources
for high density screens
http://developer.android.com/design/style/devices-displays.html

49.
Do properly handle orientation changes
Stretch/compress Expand/collapse
Stack Show/hide
http://developer.android.com/design/style/devices-displays.html

50.
Do follow Android icon guideline
Launcher
Launcher
Action Bar
http://developer.android.com/design/style/iconography.html

51.
Don't mimic UI elements
from other platforms
Android
iOS
Windows Phone 7
http://developer.android.com/design/patterns/pure-android.html

52.
Don't mimic UI elements
from other platforms
Android
iOS
Windows Phone 7
http://developer.android.com/design/patterns/pure-android.html

53.
Don't use bottom tab bars
http://developer.android.com/design/patterns/pure-android.html

54.
Don't use labeled back
buttons on action bars
http://developer.android.com/design/patterns/pure-android.html

55.
Don't use right-pointing
carets on line items
http://developer.android.com/design/patterns/pure-android.html

56.
ICS widgets in Titanium Mobile

57.
There is no action bar yet
https://jira.appcelerator.org/browse/TIMOB-2371

58.
what to do?
Simulate it Extend the API
Javascript Module Native Module
Javascript Java + Javascript

59.
Common JS Module
exports - a free variable within a module, to which multiple properties
may be added to create a public interface
module.exports - an object within a module, which may be
REPLACED by an object representing the public interface to the
module

60.
Preparing for asset
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

61.
Question?

62.
Thank You!