Home | History | Annotate | Download | only in wear
      1 page.title=Context Awareness on Android Wear
      2 @jd:body
      3 
      4 <style>
      5 .slide-wrapper {
      6   width:780px;
      7   overflow:visible;
      8 }
      9 .slide {
     10   width:370px;
     11   float:left;
     12   margin:0 20px 0 0;
     13 }
     14 .slide p {
     15   height:40px;
     16 }
     17 .slide img {
     18   height: 208px;
     19 }
     20 </style>
     21 
     22 
     23 <p>Some of the most powerful user experiences with Android Wear are based on context-aware
     24 notifications and actions. By using device sensors and other contextual cues, your app can reveal
     25 information and functionality precisely when the user needs it, at a glance.</p>
     26 
     27 <p>For example, if youre building a social app for restaurants, you can recommend popular menu
     28 items when your app recognizes that the user is at a restaurant. More examples below provide basic
     29 ideas about what you can do with a notification and action confirmation in your Android Wear
     30 app.</p>
     31 
     32 
     33 <div class="slide-wrapper">
     34 
     35 <div class="slide">
     36 <h2>Pinterest</h2>
     37 <p>Displays a notification when one of your geo-tagged pins is within walking distance.</p>
     38 <img src="{@docRoot}design/media/wear/ContextualExample.005.png" alt=""
     39      srcset="{@docRoot}design/media/wear/ContextualExample.005.png 1x,
     40              {@docRoot}design/media/wear/ContextualExample.005_2x.png 2x" />
     41 </div>
     42 
     43 <div class="slide">
     44 <h2>Trulia</h2>
     45 <p>Displays property details and contact options when you are near a new home.</p>
     46 <img src="{@docRoot}design/media/wear/ContextualExample.006.png" alt=""
     47      srcset="{@docRoot}design/media/wear/ContextualExample.006.png 1x,
     48              {@docRoot}design/media/wear/ContextualExample.006_2x.png 2x" />
     49 </div>
     50 
     51 
     52 
     53 <div class="slide">
     54 <h2>Ski Conditions</h2>
     55 <p>Displays lift status and slope conditions when you arrive at a ski resort.</p>
     56 <img src="{@docRoot}design/media/wear/ContextualExample.008.png" alt=""
     57      srcset="{@docRoot}design/media/wear/ContextualExample.008.png 1x,
     58              {@docRoot}design/media/wear/ContextualExample.008_2x.png 2x" />
     59 </div>
     60 
     61 <div class="slide">
     62 <h2>Thermostat</h2>
     63 <p>Controls automatically appear when you are at home.
     64 </p>
     65 <img src="{@docRoot}design/media/wear/ContextualExample.007.png" alt=""
     66      srcset="{@docRoot}design/media/wear/ContextualExample.007.png 1x,
     67              {@docRoot}design/media/wear/ContextualExample.007_2x.png 2x" />
     68 </div>
     69 
     70 
     71 
     72 <div class="slide">
     73 <h2>Airport</h2>
     74 <p>Displays air miles while you are waiting at the gate.
     75 </p>
     76 <img src="{@docRoot}design/media/wear/ContextualExample.009.png" alt=""
     77      srcset="{@docRoot}design/media/wear/ContextualExample.009.png 1x,
     78              {@docRoot}design/media/wear/ContextualExample.009_2x.png 2x" />
     79 </div>
     80 
     81 <div class="slide">
     82 <h2>Hotel</h2>
     83 <p>Displays late check out option on the morning of your departure.
     84 </p>
     85 <img src="{@docRoot}design/media/wear/ContextualExample.010.png" alt=""
     86      srcset="{@docRoot}design/media/wear/ContextualExample.010.png 1x,
     87              {@docRoot}design/media/wear/ContextualExample.010_2x.png 2x" />
     88 </div>
     89 
     90 
     91 
     92 <div class="slide">
     93 <h2>Conference</h2>
     94 <p>Shows which of your friends are also attending the conference.
     95 </p>
     96 <img src="{@docRoot}design/media/wear/ContextualExample.011.png" alt=""
     97      srcset="{@docRoot}design/media/wear/ContextualExample.011.png 1x,
     98              {@docRoot}design/media/wear/ContextualExample.011_2x.png 2x" />
     99 </div>
    100 
    101 <div class="slide">
    102 <h2>Restaurant</h2>
    103 <p>Provides suggestions for the healthiest items on the menu when in a restaurant.
    104 </p>
    105 <img src="{@docRoot}design/media/wear/ContextualExample.012.png" alt=""
    106      srcset="{@docRoot}design/media/wear/ContextualExample.012.png 1x,
    107              {@docRoot}design/media/wear/ContextualExample.012_2x.png 2x" />
    108 </div>
    109 
    110 
    111 
    112 <div class="slide">
    113 <h2>Oil Change</h2>
    114 <p>Offers to set a reminder to change the oil again in six months while waiting at the garage.
    115 </p>
    116 <img src="{@docRoot}design/media/wear/ContextualExample.013.png" alt=""
    117      srcset="{@docRoot}design/media/wear/ContextualExample.013.png 1x,
    118              {@docRoot}design/media/wear/ContextualExample.013_2x.png 2x" />
    119 </div>
    120 
    121 <div class="slide">
    122 <h2>Car Sharing</h2>
    123 <p>Unlocks the car as you approach it.
    124 </p>
    125 <img src="{@docRoot}design/media/wear/ContextualExample.016.png" alt=""
    126      srcset="{@docRoot}design/media/wear/ContextualExample.016.png 1x,
    127              {@docRoot}design/media/wear/ContextualExample.016_2x.png 2x" />
    128 </div>
    129 
    130 
    131 
    132 <div class="slide">
    133 <h2>Zoo</h2>
    134 <p>Notifies visitors when the penguins are going to be fed.
    135 </p>
    136 <img src="{@docRoot}design/media/wear/ContextualExample.014.png" alt=""
    137      srcset="{@docRoot}design/media/wear/ContextualExample.014.png 1x,
    138              {@docRoot}design/media/wear/ContextualExample.014_2x.png 2x" />
    139 </div>
    140 
    141 <div class="slide">
    142 <h2>Location-based Query</h2>
    143 <p>Ask questions like, "Are there any picnic tables free at the park?" and get answers in real-time
    144 from people in the area.</p>
    145 <img src="{@docRoot}design/media/wear/ContextualExample.015.png" alt=""
    146      srcset="{@docRoot}design/media/wear/ContextualExample.015.png 1x,
    147              {@docRoot}design/media/wear/ContextualExample.015_2x.png 2x" />
    148 </div>
    149 
    150 
    151 
    152 </div>
    153 
    154 <p style="clear:both;height:0">&nbsp;</p>