Konstantinos Polychronis - Pinapps @ 18o Techblog Workshop / Athens 30-06-2013

1. Android 4.0 UI Design Tips
Justin Lee

3. Evolution of Android
Gingerbread Ice Cream SandwichHoneycomb
Android 2.3 Android 3.0 Android 4.0

4. One OS for Smartphones & Tablets

5. Topics
Major UI Changes
Design Patterns
Do and Don’t

6. Major UI Changes

7. Fight for Fragmentation

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

9. Inconsistent hardware buttons
is a big problem

10. ICS drop hardware buttons
Gingerbread ICS
screen

11. Software Buttons are dynamic
Landscape Left
Landscape Right

12. Back Home Recents

13. What’s missing?

14. Menu Button

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

16. Quiz: How to goto settings page?

17. Not to many people can get it by
themselves

18. ICS make the menu much
more easy to find

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

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

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

22. Split action bar for contextual
actions
Old New

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

24. Back Button

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

26. In app navigation is much more
predictable

27. Home Button

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

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

30. How to goto a recent app?

31. Recents Button

32. Tap recents button to show
recent app list

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

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

35. App UI Design Patterns

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

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

38. 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

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

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

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

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

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

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

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

46. Do and Don’t

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

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

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

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

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

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 mimic UI elements
from other platforms
http://developer.android.com/design/patterns/pure-android.html
Android
iOS
Windows Phone 7

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

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

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

57. Question?

58. Thank You!