1.
Android 4.0 UI Design TipsJustin Lee

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

3.
One OS for Smartphones & Tablets

4.
TopicsMajor UI ChangesDesign PatternsDo and Don’t

5.
Major UI Changes

6.
Fight for Fragmentation

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

8.
Inconsistent hardware buttonsis 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 aprimary button Gingerbread ICS

15.
Quiz: How to goto settings page?

16.
Not to many people can get it bythemselves

17.
ICS make the menu muchmore easy to find

18.
The menu button in legacyapp still available on ICS

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

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

21.
Split action bar for contextualactions Old New

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

23.
Back Button

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

25.
In app navigation is much morepredictable

26.
Home Button

27.
Home button perform too manyfunctions before ICS tap tap long press

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

29.
How to goto a recent app?

30.
Recents Button

31.
Tap recents button to showrecent app list

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

33.
Long press gesture changed Old NewOpen 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 Barhttp://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 navigationhttp://developer.android.com/design/patterns/navigation.html

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

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

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

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

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

44.
Notificationshttp://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-tipshttp://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 screenshttp://developer.android.com/design/style/devices-displays.html

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

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

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

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

53.
Dont use bottom tab barshttp://developer.android.com/design/patterns/pure-android.html

54.
Dont use labeled back buttons on action barshttp://developer.android.com/design/patterns/pure-android.html

55.
Dont use right-pointing carets on line itemshttp://developer.android.com/design/patterns/pure-android.html

56.
Question?

57.
Thank You!