$30 off During Our Annual Pro Sale. View Details »

Introduction to Android Wear & Wear UI Patterns

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.

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

    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