blob: 659e9f20b12ca912ad2bc719e94015cb7ecc366c [file] [log] [blame]
Scott Main039d4412014-03-26 19:16:27 -07001page.title=Android Wear
Scott Mainbbaf11f2014-03-27 13:01:56 -07002page.viewport_width=970
Scott Main039d4412014-03-26 19:16:27 -07003fullpage=true
4no_footer_links=true
5page.customHeadTag=<link rel="stylesheet" type="text/css" href="/wear/css/wear.css">
Scott Main50d7dc92014-03-18 05:13:12 -07006
Scott Main039d4412014-03-26 19:16:27 -07007@jd:body
Scott Main50d7dc92014-03-18 05:13:12 -07008
Scott Main039d4412014-03-26 19:16:27 -07009<style>
Scott Maina32c4372014-03-19 11:51:05 -070010.fullpage>#footer,
11#jd-content>.content-footer.wrap {
12 display:none;
13}
14</style>
15
16
17
18
19<div id="video-container">
Scott Main50d7dc92014-03-18 05:13:12 -070020 <div id="video-frame">
21 <div class="video-close">
22 <span id="icon-video-close">&nbsp;</span>
23 </div>
24 <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
25 <div id="ytapiplayer">
Scott Main52f449f2014-03-24 23:23:22 -070026 <a href="http://www.youtube.com/watch?v=0xQ3y902DEQ"><img width=940
Scott Main779174e2014-03-24 13:53:24 -070027 src="https://i1.ytimg.com/vi/0xQ3y902DEQ/maxresdefault.jpg"></a><!--You need Flash player 8+ and JavaScript enabled to view this video. -->
Scott Main50d7dc92014-03-18 05:13:12 -070028 </div>
29 </div>
30</div>
31
32
Scott Maina32c4372014-03-19 11:51:05 -070033
Scott Main50d7dc92014-03-18 05:13:12 -070034<div class="wear-body-content">
35 <div class="wear-hero-container">
36 <div class="wear-section wear-hero">
37 <div class="wear-hero-scrim"></div>
38 <div class="wear-hero-wrap">
39 <div class="vertical-center-outer">
40 <div class="vertical-center-inner">
41
42 <div class="col-10">
43 <div class="wear-section-header">
44 <div class="wear-h1 hero">Android Wear</div>
45 <div class="wear-subhead hero">Information that moves with you</div>
46 </div>
47 <div class="wear-hero-description">
48 <p>Small, powerful devices, worn on the body.
49 Useful information when you need it most.
50 Intelligent answers to spoken questions.
51 Tools to help reach fitness goals.
52 Your key to a multiscreen world.</p>
53 </div>
54
55 <div class="wear-body">
56 <a href="/wear/preview/start.html" class="wear-button wear-primary" style="margin-top: 40px;">
57 Get the Developer Preview
58 </a>
Scott Maina32c4372014-03-19 11:51:05 -070059 <a id="watchVideo" href="https://youtube.googleapis.com/v/0xQ3y902DEQ">
Scott Main50d7dc92014-03-18 05:13:12 -070060 <div class="wear-video-link">Watch the video</div>
61 </a>
62<script>
63$("#watchVideo").on("click", function(e) {
64 $("#video-container").fadeIn(400, function(){$("#video-frame").show()});
65
66 var params = { allowScriptAccess: "always"};
67 var atts = { id: "ytapiplayer" };
Scott Maina32c4372014-03-19 11:51:05 -070068 swfobject.embedSWF("//www.youtube.com/v/0xQ3y902DEQ?enablejsapi=1&playerapiid=ytplayer&version=3&HD=1;rel=0;showinfo=0;modestbranding;origin=developer.android.com;autohide=1;autoplay=1",
Scott Main50d7dc92014-03-18 05:13:12 -070069 "ytapiplayer", "940", "526.4", "8", null, null, params, atts);
70
71 e.preventDefault();
72});
73$("#icon-video-close").on("click", function() {
74 ytplayer = document.getElementById("ytapiplayer");
Scott Main52f449f2014-03-24 23:23:22 -070075 try {
76 ytplayer.stopVideo();
77 $(ytplayer).hide();
78 $("#video-container").fadeOut(400);
79 } catch(e) {
80 console.log('Video not available');
81 $("#video-container").fadeOut(400);
82 }
Scott Main50d7dc92014-03-18 05:13:12 -070083});
84</script>
85 </div>
86 </div>
87
88 </div>
89 </div>
90 </div> <!-- end .wrap -->
91 <div class="wear-scroll-down-affordance">
92 <a class="wear-down-arrow" href="#extending-android-to-wearables">
93 <img src="/wear/images/carrot.png" alt="Scroll down to read more">
94 </a>
95 </div>
96 </div> <!-- end .wear-section .wear-hero -->
97 </div> <!-- end .wear-hero-container -->
98
99 <div class="wear-rest-of-page">
100 <div class="wear-section" id="extending-android-to-wearables">
101 <div class="wrap">
102 <div class="wear-section-header">
103 <div class="wear-h1">Extending Android to Wearables</div>
104 <div class="wear-subhead">
105 Android Wear extends the Android platform to a new generation of wearable devices. <br>
106 The user experience is designed specifically for wearables.
107 </div>
108 </div>
109
110 <div class="wear-body">
111 <div class="wear-breakout cols">
112 <div class="col-3-wide">
113
114 <div class="wear-inset-video-container">
115 <img class="wear-bezel-only" src="/wear/images/screens/bezel.png" alt="">
116 <img class="gif" src="/wear/images/screens/reservation_animated.gif">
117 </div>
118
119 <p class="wear-small">
120 Say Ok Google to ask questions and get stuff done.
121 </p>
122 </div>
123 <div class="col-3-wide">
Scott Maine26817d2014-04-16 16:57:21 -0700124 <img src="/wear/images/screens/circle_message2.png" itemprop="image" alt="" >
Scott Main50d7dc92014-03-18 05:13:12 -0700125 <p class="wear-small">
126 Get glanceable, actionable information at just the right time throughout the day.
127 </p>
128 </div>
129 <div class="col-3-wide">
Scott Maine26817d2014-04-16 16:57:21 -0700130 <img src="/wear/images/screens/fitness-24.png" alt="">
Scott Main50d7dc92014-03-18 05:13:12 -0700131 <p class="wear-small">
132 A wide range of sensors is available to your applications, from accelerometers to heart rate monitors.
133 </p>
134 </div>
135 </div>
136
137 <p>
138 The Android Wear Developer Preview lets you create wearable experiences for your existing Android apps and see how they will appear on square and round Android wearables.
139 </p>
140
141 <p>
142 Later this year, well be launching the Android Wear SDK, enabling even more customized experiences.
143 </p>
144 </div>
145 </div> <!-- end .wrap -->
146 </div> <!-- end .wear-section -->
147
148 <div class="wear-section wear-gray-background">
149 <div class="wrap">
150 <div class="wear-section-header">
151 <div class="wear-h1">Developer Preview</div>
152 <div class="wear-subhead">
153 Your apps notifications will already appear on Android wearables. <br>
154 With the new Android Wear APIs you can customize and extend those notifications.
155 </div>
156 </div>
157
158
159 <div class="wear-body">
160 <div class="wear-breakout cols">
161 <div class="col-3-wide">
162 <img src="images/screens/14_circle_voicereply.png" alt="">
163 <p>Receive Voice Replies</p>
164 <p class="wear-small">
165 Add actions to your notifications to allow users to reply by voice or touch. The system delivers the text to your app on the phone.
166 </p>
167 <p class="wear-small">
168 <a href="/wear/notifications/remote-input.html">Learn about input actions</a>
169 </p>
170 </div>
171 <div class="col-3-wide">
172
173
174 <div class="wear-inset-video-container">
175 <img class="wear-bezel-only" src="/wear/images/screens/bezel.png" alt="">
176 <img class="gif" src="/wear/images/screens/pages_animated.gif">
177 </div>
178
179 <p>Add Notification Pages</p>
180 <p class="wear-small">
181 Add additional pages to your notification that are visible on the wearable device to provide detailed information on the wrist.
182 </p>
183 <p class="wear-small">
184 <a href="/wear/notifications/pages.html">Learn about pages</a>
185 </p>
186 </div>
187 <div class="col-3-wide">
188 <img src="images/screens/11_stack_B.png" alt="">
189 <p>Stack Multiple Notifications</p>
190 <p class="wear-small">
191 Your app should consolidate similar notifications. On a wearable, you can stack them together so the details for each are immediately available.
192 </p>
193 <p class="wear-small">
194 <a href="/wear/notifications/stacks.html">Learn about stacks</a>
195 </p>
196 </div>
197 </div>
198
199 <p>
Scott Main039d4412014-03-26 19:16:27 -0700200 You can also trigger your notifications contextually using existing Android APIs. For example, use <a href="{@docRoot}training/location/geofencing.html">geofences</a> to provide glanceable information to your users when they are at home, or use the <a href="{@docRoot}training/location/activity-recognition.html">activity detection APIs</a> to send messages to your users’ wrists while they are bicycling.
Scott Main50d7dc92014-03-18 05:13:12 -0700201 </p>
202
Scott Main039d4412014-03-26 19:16:27 -0700203 <p>See the <a href="{@docRoot}wear/design/index.html">Android Wear Developer Preview Design Principles</a> for more suggestions on creating great wearable experiences.</p>
Scott Main50d7dc92014-03-18 05:13:12 -0700204
205 </div>
206 </div> <!-- end .wrap -->
207 </div> <!-- end .wear-section -->
208
209 <div class="wear-section" style="background-color:#f5f5f5">
210 <div class="wrap">
211 <div class="wear-section-header">
212 <div class="wear-pre-h1">Coming soon</div>
213 <div class="wear-h1">The Android Wear SDK</div>
214 <div class="wear-subhead">
215 The Developer Preview is just the beginning for Android Wear.
216 </div>
217 </div>
218
219 <div class="wear-body">
220 <p>
221 In the coming months we’ll be launching new APIs and features for Android wearables to create even more unique experiences for the wrist:
222 </p>
223
224 <div class="wear-breakout cols">
225 <div class="col-4">
226 <img src="/wear/images/features/ts1.png" alt="">
227 <p>Build Custom UI</p>
228 <p class="wear-small">
229 Create custom card layouts and run activities directly on wearables.
230 </p>
231 </div>
232 <div class="col-4">
233 <img src="/wear/images/features/ts2.png" alt="">
234 <p>Send Data</p>
235 <p class="wear-small">
Scott Maina32c4372014-03-19 11:51:05 -0700236 Send data and actions between a phone and a wearable with data replication APIs and RPCs.
Scott Main50d7dc92014-03-18 05:13:12 -0700237 </p>
238 </div>
239 <div class="col-4">
240 <img src="/wear/images/features/ts3.png" alt="">
241 <p>Control Sensors</p>
242 <p class="wear-small">
243 Gather sensor data and display it in real-time on Android wearables.
244 </p>
245 </div>
246 <div class="col-4">
247 <img src="/wear/images/features/ts4.png" alt="">
248 <p>Voice Actions</p>
249 <p class="wear-small">
Scott Maina32c4372014-03-19 11:51:05 -0700250 Register your app to handle voice actions, like "Ok Google, take a note."
Scott Main50d7dc92014-03-18 05:13:12 -0700251 </p>
252 </div>
253 </div>
254
255 </div>
256 </div> <!-- end .wrap -->
257 </div> <!-- end .wear-section -->
258
259 <div class="wear-section wear-white-background">
260 <div class="wrap">
261 <div class="wear-section-header">
262 <div class="wear-h2">Building an Ecosystem</div>
263 <div class="wear-body wear-align-center">
264 <p class="wear-small">
265 We’re working with several partners to bring you watches powered by Android Wear later this year!
266 </p>
267 </div>
268 </div>
269
270 <div class="wear-partners cols">
271 <div class="col-4">
272 <img src="/wear/images/partners/asus.png" alt="Asus">
273 </div>
274 <div class="col-4">
275 <img src="/wear/images/partners/broadcom.png" alt="Broadcom">
276 </div>
277 <div class="col-4">
278 <img src="/wear/images/partners/fossil.png" alt="Fossil">
279 </div>
280 <div class="col-4">
281 <img src="/wear/images/partners/htc.png" alt="HTC">
282 </div>
283 <div class="col-4">
284 <img src="/wear/images/partners/intel.png" alt="Intel">
285 </div>
286 <div class="col-4">
287 <img src="/wear/images/partners/lg.png" alt="LG">
288 </div>
289 <div class="col-4">
290 <img src="/wear/images/partners/mediatek.png" alt="Mediatek">
291 </div>
292 <div class="col-4">
293 <img src="/wear/images/partners/mips.png" alt="MIPS">
294 </div>
295 <div class="col-4">
296 <img src="/wear/images/partners/motorola.png" alt="Motorola">
297 </div>
298 <div class="col-4">
299 <img src="/wear/images/partners/qualcomm.png" alt="Qualcomm">
300 </div>
301 <div class="col-4">
302 <img src="/wear/images/partners/samsung.png" alt="Samsung">
303 </div>
304 </div>
305 </div> <!-- end .wrap -->
306 </div> <!-- end .wear-section -->
307
308 <div class="wear-section wear-red-background">
309 <div class="wrap">
310 <div class="wear-section-header">
311 <div class="wear-h1 wear-align-left">Start working with Android Wear</div>
312 <div class="wear-subhead wear-subhead-red">
313 <p>
314 Your app’s notifications will already appear on Android wearables. <br>
315 With the new Android Wear APIs, you can customize and extend those notifications.
316 </p>
317 <p>
318 We’re excited about wearables and the experiences developers can create with them. <br>
319 We can’t wait to see what you do next.</p>
320 </div>
321 </div>
322 <div class="wear-body">
323 <a href="/wear/preview/start.html" class="wear-button wear-secondary" style="margin-top: 20px;">
324 Get the Developer Preview
325 </a>
326 </div>
327 </div>
328 </div>
329
330 <div class="wear-section">
331 <div class="wrap">
332 <div class="cols">
333 <div class="wear-body">
334 <div class="col-3-wide">
Scott Maina32c4372014-03-19 11:51:05 -0700335 <a target="_blank" href="https://www.youtube.com/playlist?list=PLWz5rJ2EKKc-kIrPiq098QH9dOle-fLef">
Scott Main50d7dc92014-03-18 05:13:12 -0700336 <img class="wear-social-image" src="//www.google.com/images/icons/product/youtube-128.png" alt="">
337 </a>
338 <div class="wear-social-copy">
339 <p>DevBytes</p>
340 <p class="wear-small">
Scott Maina32c4372014-03-19 11:51:05 -0700341 Learn how to optimize your app notifications for wearable devices in this <a target="_blank" href="https://www.youtube.com/playlist?list=PLWz5rJ2EKKc-kIrPiq098QH9dOle-fLef">DevBytes video</a> using the Android Wear Developer Preview.
Scott Main50d7dc92014-03-18 05:13:12 -0700342 </p>
343 </div>
344 </div>
345 <div class="col-3-wide">
Scott Maina32c4372014-03-19 11:51:05 -0700346 <a target="_blank" href="http://android-developers.blogspot.com/2014/03/android-wear-developer-preview.html">
Scott Main50d7dc92014-03-18 05:13:12 -0700347 <img class="wear-social-image" src="/wear/images/blogger.png" alt="">
348 </a>
349 <div class="wear-social-copy">
350 <p>Blog Post</p>
351 <p class="wear-small">
352 Read more about the Android Wear Developer Preview announcement
Scott Maina32c4372014-03-19 11:51:05 -0700353 at the <a target="_blank" href="http://android-developers.blogspot.com/2014/03/android-wear-developer-preview.html">Android Developers Blog</a>.
Scott Main50d7dc92014-03-18 05:13:12 -0700354 </p>
355 </div>
356 </div>
357 <div class="col-3-wide">
Scott Maina32c4372014-03-19 11:51:05 -0700358 <a target="_blank" href="http://g.co/androidweardev">
Scott Main50d7dc92014-03-18 05:13:12 -0700359 <img class="wear-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Wear Developers">
360 </a>
361 <div class="wear-social-copy">
362 <p>G+ Community</p>
363 <p class="wear-small">
364 Follow us on Google+ to stay up-to-date on Android Wear development and join the discussion!
365 </p>
366 <p class="wear-small">
Scott Maina32c4372014-03-19 11:51:05 -0700367 <a target="_blank" href="http://g.co/androidweardev">+Android Wear Developers</a>
Scott Main50d7dc92014-03-18 05:13:12 -0700368 </p>
369 </div>
370 </div>
371 </div>
372 </div>
373 </div> <!-- end .wrap -->
374 </div> <!-- end .wear-section -->
375 </div> <!-- end .wear-rest-of-page -->
Scott Maina32c4372014-03-19 11:51:05 -0700376
377
378 <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
379 <div class="layout-content-col col-16" style="padding-top:4px">
380 <style>#___plusone_0 {float:right !important;}</style>
381 <div class="g-plusone" data-size="medium"></div>
382 </div>
383 </div>
Scott Main779174e2014-03-24 13:53:24 -0700384 <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1">
Scott Maina32c4372014-03-19 11:51:05 -0700385 <div id="copyright">
386 Except as noted, this content is
387 licensed under <a href="http://creativecommons.org/licenses/by/2.5/">
388 Creative Commons Attribution 2.5</a>. For details and
389 restrictions, see the <a href="/license.html">Content
390 License</a>.
391 </div>
392 </div>
393
394
Scott Main50d7dc92014-03-18 05:13:12 -0700395 </div> <!-- end wear-body-content -->
396
397 <script>
398 $("a.wear-down-arrow").on("click", function(e) {
399 $("body").animate({
400 scrollTop: $(".wear-hero").height() + 76
401 }, 1000, "easeOutQuint");
402 e.preventDefault();
403 });
404 </script>
Scott Maina32c4372014-03-19 11:51:05 -0700405