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
   

   View Slide

2. Sr. Software Engineer @ InfoStretch
   Manager, GDG Ahmedabad
   @pareshmayani
   Google.com/+PareshMayani
   

   View Slide

3. Mobile Enablement
   +
   Mobile Quality
   +
   Mobile Optimization
   =
   InfoStretch.com
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. you talk to the
    wearable
    

    View Slide

15. actions
    

    View Slide

16. actions
    

    View Slide

17. the wearable
    talks to you
    actions
    

    View Slide

18. actions
    context
    

    View Slide

19. actions
    context
    

    View Slide

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
    

    View Slide

21. Android Wear ecosystem
    

    View Slide

22. No Play Store
    on Android Wear
    

    View Slide

23. Combined APKs
    Package wearable app inside a
    handheld app
    

    View Slide

24. Packaged APK
    

    View Slide

25. Packaged APK
    Installs handheld APK
    

    View Slide

26. Packaged APK
    Installs handheld APK
    Pushes Wearable app
    

    View Slide

27. Creative Vision
    

    View Slide

28. View Slide

29. Launched automatically
    

    View Slide

30. Glanceable
    

    View Slide

31. Suggest and demand
    

    View Slide

32. Zero or low interaction
    

    View Slide

33. View Slide

34. Interactions
    

    View Slide

35. Notifications
    

    View Slide

36. View Slide

37. View Slide

38. NO WORK REQUIRED
    

    View Slide

39. View Slide

40. NO WORK REQUIRED
    

    View Slide

41. Replies
    Pages
    Stacks
    

    View Slide

42. UI Patterns
    

    View Slide

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
    

    View Slide

44. Card stacks group related cards together and allow them
    to be progressively expanded vertically in the stream.
    Card Stacks
    

    View Slide

45. Pages
    Supplementary information should be displayed on
    additional cards to the right of a main Context Stream
    card.
    

    View Slide

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
    

    View Slide

47. Where the user may need to take action on the information
    shown in a notification, you can provide action buttons.
    Action Buttons
    

    View Slide

48. Where tapping on an action button results in an action
    being executed
    Action countdown and confirmation
    

    View Slide

49. Some cards may benefit from having tappable actions
    directly on a card.
    Action on Cards
    

    View Slide

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
    

    View Slide

51. It is possible for apps to take action in response to Android
    voice commands that invoke intents.
    Voice Commands
    

    View Slide

52. Choosing an item from a list is a common interaction.
    Selection List
    

    View Slide

53. Let’s talk about
    Wear Programming
    

    View Slide

54. dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.google.android.support:wearable:+'
    compile 'com.google.android.gms:play-services-wearable:+'
    }
    build.gradle
    

    View Slide

55. ● BoxInsetLayout
    ● Card Fragment
    ● CircledImageView
    ● ConfirmationActivity
    ● DismissOverlayView
    ● GridViewPager
    ● GridPagerAdapter
    ● FragmentGridPagerAdapter
    ● WatchViewStub
    Some of the major classes...
    

    View Slide

56. ● BoxInsetLayout
    ● Card Fragment
    ● CircledImageView
    ● ConfirmationActivity
    ● DismissOverlayView
    ● GridViewPager
    ● GridPagerAdapter
    ● FragmentGridPagerAdapter
    ● WatchViewStub
    Some of the major classes...
    

    View Slide

57. ● BoxInsetLayout
    ● Card Fragment
    ● CircledImageView
    ● ConfirmationActivity
    ● DismissOverlayView
    ● GridViewPager
    ● GridPagerAdapter
    ● FragmentGridPagerAdapter
    ● WatchViewStub
    Some of the major classes...
    

    View Slide

58. ● BoxInsetLayout
    ● Card Fragment
    ● CircledImageView
    ● ConfirmationActivity
    ● DismissOverlayView
    ● GridViewPager
    ● GridPagerAdapter
    ● FragmentGridPagerAdapter
    ● WatchViewStub
    Some of the major classes...
    

    View Slide

59. ● Google Developer Groups
    ● http://developer.android.com/design/wear/index.html
    ● https://developer.android.com/wear/index.html
    Sources
    

    View Slide

60. Thank You!
    TechnoTalkative.com
    @pareshmayani
    http://google.com/+PareshMayani
    

    View Slide