Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Android Wear & Wear UI Patterns

2c9f04076de133db434c7d9966ac6f6b?s=47 Paresh Mayani
December 14, 2014

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.

2c9f04076de133db434c7d9966ac6f6b?s=128

Paresh Mayani

December 14, 2014
Tweet

More Decks by Paresh Mayani

Other Decks in Technology

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  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

  28. None
  29. Launched automatically

  30. Glanceable

  31. Suggest and demand

  32. Zero or low interaction

  33. None
  34. Interactions

  35. Notifications

  36. None
  37. None
  38. NO WORK REQUIRED

  39. None
  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