Introduction to Android Wear & Wear UI Patterns

Talk delivered in DevFest Ahmedabad 2014. This talk contains introduction of android wear, android wear ecosystem, difference mobile and wear paradigms, voice commands, creative vision and wear UI patterns.

Transcript

1. Introduction to Android Wear And Wear UI Patterns
2. Sr. Software Engineer @ InfoStretch Manager, GDG Ahmedabad @pareshmayani Google.com/+PareshMayani
3. Mobile Enablement + Mobile Quality + Mobile Optimization = InfoStretch.com
14. you talk to the wearable
15. actions
16. actions
17. the wearable talks to you actions
18. actions context
19. actions context
20. • Call a car/taxi • Take a note • Set alarm • Set timer • Start/Stop a bike ride • Start/Stop a run • Start/Stop a workout • Show heart rate • Show step count Voice Commands
21. Android Wear ecosystem
22. No Play Store on Android Wear
23. Combined APKs Package wearable app inside a handheld app
24. Packaged APK
25. Packaged APK Installs handheld APK
26. Packaged APK Installs handheld APK Pushes Wearable app
27. Creative Vision
29. Launched automatically
30. Glanceable
31. Suggest and demand
32. Zero or low interaction
34. Interactions
35. Notifications
38. NO WORK REQUIRED
40. NO WORK REQUIRED
41. Replies Pages Stacks
42. UI Patterns
43. Standard cards Single-action controls (such as a play/pause toggle) Expandable stack of cards (for grouping a set of related notifications together) Cards
44. Card stacks group related cards together and allow them to be progressively expanded vertically in the stream. Card Stacks
45. Pages Supplementary information should be displayed on additional cards to the right of a main Context Stream card.
46. In cases where the phone must be used, a generic animation should be played once the action button has been tapped and the corresponding Android app will open on the phone. Continuing activities on phone
47. Where the user may need to take action on the information shown in a notification, you can provide action buttons. Action Buttons
48. Where tapping on an action button results in an action being executed Action countdown and confirmation
49. Some cards may benefit from having tappable actions directly on a card. Action on Cards
50. It allows users to choose from a list of items, and optionally select an attribute of each item. For example, for a social check-in app, you could show a 2D Picker with a vertical list of places to check-in to. 2D Picker
51. It is possible for apps to take action in response to Android voice commands that invoke intents. Voice Commands
52. Choosing an item from a list is a common interaction. Selection List
53. Let’s talk about Wear Programming
54. dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.google.android.support:wearable:+' compile 'com.google.android.gms:play-services-wearable:+' } build.gradle
55. • BoxInsetLayout • Card Fragment • CircledImageView • ConfirmationActivity • DismissOverlayView • GridViewPager • GridPagerAdapter • FragmentGridPagerAdapter • WatchViewStub Some of the major classes...
56. • BoxInsetLayout • Card Fragment • CircledImageView • ConfirmationActivity • DismissOverlayView • GridViewPager • GridPagerAdapter • FragmentGridPagerAdapter • WatchViewStub Some of the major classes...
57. • BoxInsetLayout • Card Fragment • CircledImageView • ConfirmationActivity • DismissOverlayView • GridViewPager • GridPagerAdapter • FragmentGridPagerAdapter • WatchViewStub Some of the major classes...
58. • BoxInsetLayout • Card Fragment • CircledImageView • ConfirmationActivity • DismissOverlayView • GridViewPager • GridPagerAdapter • FragmentGridPagerAdapter • WatchViewStub Some of the major classes...
59. • Google Developer Groups • http://developer.android.com/design/wear/index.html • https://developer.android.com/wear/index.html Sources
60. Thank You! TechnoTalkative.com @pareshmayani http://google.com/+PareshMayani