Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / frameworks / base / 50d7dc99e507082c81476ea1474de9970589dee5 / . / docs / html / wear / index.html
blob: 5ea793b6d7789369553f44ed65857c3f7e2d4947 [file] [log] [blame]
Scott Main50d7dc92014-03-18 05:13:12 -0700[diff] [blame^]1<!DOCTYPE html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92<html>
93<head>
94
95
96<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
97<meta name="viewport" content="width=device-width" />
98
99<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
100<title>Android Wear | Android Developers</title>
101
102<!-- STYLESHEETS -->
103<link rel="stylesheet"
104href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
105<link href="/assets/css/default.css" rel="stylesheet" type="text/css">
106
107
108
109<!-- JAVASCRIPT -->
110<script src="//www.google.com/jsapi" type="text/javascript"></script>
111<script src="/assets/js/android_3p-bundle.js" type="text/javascript"></script>
112<link rel="stylesheet" type="text/css" href="/wear/css/wear.css">
113<script type="text/javascript">
114 var toRoot = "/";
115 var metaTags = [];
116 var devsite = false;
117</script>
118<script src="/assets/js/docs.js" type="text/javascript"></script>
119
120<script type="text/javascript">
121 var _gaq = _gaq || [];
122 _gaq.push(['_setAccount', 'UA-5831155-1']);
123 _gaq.push(['_trackPageview']);
124
125 (function() {
126 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
127 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
128 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
129 })();
130</script>
131</head>
132
133<body class="gc-documentation
134 " itemscope itemtype="http://schema.org/Article">
135
136
137
138<a name="top"></a>
139
140 <!-- Header -->
141 <div id="header">
142 <div class="wrap" id="header-wrap">
143 <div class="col-3 logo-wear">
144 <a href="/wear/index.html">
145 <img src="/wear/images/android-wear.png" height="16" alt="Android Wear" />
146 </a>
147 </div>
148
149
150 <div class="col-8" style="margin:0"><h1 style="margin:1px 0 0 20px;padding:0;line-height:16px;
151 color:#666;font-weight:100;font-size:24px;">Developer Preview</h1></div>
152
153
154 <!-- New Search -->
155 <div class="menu-container">
156 <div class="moremenu">
157 <div id="more-btn"></div>
158 </div>
159 <div class="morehover" id="moremenu">
160 <div class="top"></div>
161 <div class="mid">
162 <div class="header">Links</div>
163 <ul>
164 <li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li>
165 <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
166 <li><a href="/about/index.html">About Android</a></li>
167 </ul>
168 <div class="header">Android Sites</div>
169 <ul>
170 <li><a href="http://www.android.com">Android.com</a></li>
171 <li class="active"><a>Android Developers</a></li>
172 <li><a href="http://source.android.com">Android Open Source Project</a></li>
173 </ul>
174
175
176
177 <div class="header">Language</div>
178 <div id="language" class="locales">
179 <select name="language" onChange="changeLangPref(this.value, true)">
180 <option value="en">English</option>
181 <option value="es">Español</option>
182 <option value="ja">日本語</option>
183 <option value="ko">한국어</option>
184 <option value="ru">Русский</option>
185 <option value="zh-cn">中文 (中国)</option>
186 <option value="zh-tw">中文 (台灣)</option>
187 </select>
188 </div>
189 <script type="text/javascript">
190 <!--
191 loadLangPref();
192 //-->
193 </script>
194
195
196
197
198 <br class="clearfix" />
199 </div><!-- end mid -->
200 <div class="bottom"></div>
201 </div><!-- end morehover -->
202
203 <div class="search" id="search-container">
204 <div class="search-inner">
205 <div id="search-btn"></div>
206 <div class="left"></div>
207 <form onsubmit="return submit_search()">
208 <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
209onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
210onkeydown="return search_changed(event, true, '/')"
211onkeyup="return search_changed(event, false, '/')" />
212 </form>
213 <div class="right"></div>
214 <a class="close hide">close</a>
215 <div class="left"></div>
216 <div class="right"></div>
217 </div>
218 </div><!-- end search -->
219
220 <div class="search_filtered_wrapper reference">
221 <div class="suggest-card reference no-display">
222 <ul class="search_filtered">
223 </ul>
224 </div>
225 </div>
226
227 <div class="search_filtered_wrapper docs">
228 <div class="suggest-card dummy no-display">&nbsp;</div>
229 <div class="suggest-card develop no-display">
230 <ul class="search_filtered">
231 </ul>
232 <div class="child-card guides no-display">
233 </div>
234 <div class="child-card training no-display">
235 </div>
236 <div class="child-card samples no-display">
237 </div>
238 </div>
239 <div class="suggest-card design no-display">
240 <ul class="search_filtered">
241 </ul>
242 </div>
243 <div class="suggest-card distribute no-display">
244 <ul class="search_filtered">
245 </ul>
246 </div>
247 </div><!-- end search_filtered_wrapper -->
248
249 </div>
250 <!-- end menu_container -->
251
252
253 </div><!-- end header-wrap -->
254 </div>
255 <!-- /Header -->
256
257
258 <div id="searchResults" class="wrap" style="display:none;">
259 <h2 id="searchTitle">Results</h2>
260 <div id="leftSearchControl" class="search-control">Loading...</div>
261 </div>
262
263
264
265
266
267 <div id="body-content">
268
269
270
271
272<div class="fullpage" >
273
274
275
276
277
278
279 <div id="jd-content">
280
281
282 <div class="jd-descr" itemprop="articleBody">
283 <div id="video-container">
284 <div id="video-frame">
285 <div class="video-close">
286 <span id="icon-video-close">&nbsp;</span>
287 </div>
288 <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
289 <div id="ytapiplayer">
290 <a href="http://www.youtube.com/watch?v=i2uvYI6blEE"><img width=600
291 src="https://i1.ytimg.com/vi/i2uvYI6blEE/maxresdefault.jpg"></a><!--You need Flash player 8+ and JavaScript enabled to view this video. -->
292 </div>
293 </div>
294</div>
295
296
297<div class="wear-body-content">
298 <div class="wear-hero-container">
299 <div class="wear-section wear-hero">
300 <div class="wear-hero-scrim"></div>
301 <div class="wear-hero-wrap">
302 <div class="vertical-center-outer">
303 <div class="vertical-center-inner">
304
305 <div class="col-10">
306 <div class="wear-section-header">
307 <div class="wear-h1 hero">Android Wear</div>
308 <div class="wear-subhead hero">Information that moves with you</div>
309 </div>
310 <div class="wear-hero-description">
311 <p>Small, powerful devices, worn on the body.
312 Useful information when you need it most.
313 Intelligent answers to spoken questions.
314 Tools to help reach fitness goals.
315 Your key to a multiscreen world.</p>
316 </div>
317
318 <div class="wear-body">
319 <a href="/wear/preview/start.html" class="wear-button wear-primary" style="margin-top: 40px;">
320 Get the Developer Preview
321 </a>
322 <a id="watchVideo" href="https://youtube.googleapis.com/v/i2uvYI6blEE">
323 <div class="wear-video-link">Watch the video</div>
324 </a>
325<script>
326$("#watchVideo").on("click", function(e) {
327 $("#video-container").fadeIn(400, function(){$("#video-frame").show()});
328
329 var params = { allowScriptAccess: "always"};
330 var atts = { id: "ytapiplayer" };
331 swfobject.embedSWF("//www.youtube.com/v/i2uvYI6blEE?enablejsapi=1&playerapiid=ytplayer&version=3&HD=1;rel=0;showinfo=0;modestbranding;origin=developer.android.com;autohide=1;autoplay=1",
332 "ytapiplayer", "940", "526.4", "8", null, null, params, atts);
333
334 e.preventDefault();
335});
336$("#icon-video-close").on("click", function() {
337 ytplayer = document.getElementById("ytapiplayer");
338 ytplayer.stopVideo();
339 $(ytplayer).hide();
340 $("#video-container").fadeOut(400);
341});
342</script>
343 </div>
344 </div>
345
346 </div>
347 </div>
348 </div> <!-- end .wrap -->
349 <div class="wear-scroll-down-affordance">
350 <a class="wear-down-arrow" href="#extending-android-to-wearables">
351 <img src="/wear/images/carrot.png" alt="Scroll down to read more">
352 </a>
353 </div>
354 </div> <!-- end .wear-section .wear-hero -->
355 </div> <!-- end .wear-hero-container -->
356
357 <div class="wear-rest-of-page">
358 <div class="wear-section" id="extending-android-to-wearables">
359 <div class="wrap">
360 <div class="wear-section-header">
361 <div class="wear-h1">Extending Android to Wearables</div>
362 <div class="wear-subhead">
363 Android Wear extends the Android platform to a new generation of wearable devices. <br>
364 The user experience is designed specifically for wearables.
365 </div>
366 </div>
367
368 <div class="wear-body">
369 <div class="wear-breakout cols">
370 <div class="col-3-wide">
371
372 <div class="wear-inset-video-container">
373 <img class="wear-bezel-only" src="/wear/images/screens/bezel.png" alt="">
374 <img class="gif" src="/wear/images/screens/reservation_animated.gif">
375 </div>
376
377 <p class="wear-small">
378 Say “Ok Google” to ask questions and get stuff done.
379 </p>
380 </div>
381 <div class="col-3-wide">
382 <img src="/wear/images/screens/circle_message2.png" alt="Image of a Hangouts message">
383 <p class="wear-small">
384 Get glanceable, actionable information at just the right time throughout the day.
385 </p>
386 </div>
387 <div class="col-3-wide">
388 <img src="/wear/images/screens/fitness-24.png" alt="Image showing ">
389 <p class="wear-small">
390 A wide range of sensors is available to your applications, from accelerometers to heart rate monitors.
391 </p>
392 </div>
393 </div>
394
395 <p>
396 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.
397 </p>
398
399 <p>
400 Later this year, we’ll be launching the Android Wear SDK, enabling even more customized experiences.
401 </p>
402 </div>
403 </div> <!-- end .wrap -->
404 </div> <!-- end .wear-section -->
405
406 <div class="wear-section wear-gray-background">
407 <div class="wrap">
408 <div class="wear-section-header">
409 <div class="wear-h1">Developer Preview</div>
410 <div class="wear-subhead">
411 Your app’s notifications will already appear on Android wearables. <br>
412 With the new Android Wear APIs you can customize and extend those notifications.
413 </div>
414 </div>
415
416
417 <div class="wear-body">
418 <div class="wear-breakout cols">
419 <div class="col-3-wide">
420 <img src="images/screens/14_circle_voicereply.png" alt="">
421 <p>Receive Voice Replies</p>
422 <p class="wear-small">
423 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.
424 </p>
425 <p class="wear-small">
426 <a href="/wear/notifications/remote-input.html">Learn about input actions</a>
427 </p>
428 </div>
429 <div class="col-3-wide">
430
431
432 <div class="wear-inset-video-container">
433 <img class="wear-bezel-only" src="/wear/images/screens/bezel.png" alt="">
434 <img class="gif" src="/wear/images/screens/pages_animated.gif">
435 </div>
436
437 <p>Add Notification Pages</p>
438 <p class="wear-small">
439 Add additional pages to your notification that are visible on the wearable device to provide detailed information on the wrist.
440 </p>
441 <p class="wear-small">
442 <a href="/wear/notifications/pages.html">Learn about pages</a>
443 </p>
444 </div>
445 <div class="col-3-wide">
446 <img src="images/screens/11_stack_B.png" alt="">
447 <p>Stack Multiple Notifications</p>
448 <p class="wear-small">
449 Your app should consolidate similar notifications. On a wearable, you can stack them together so the details for each are immediately available.
450 </p>
451 <p class="wear-small">
452 <a href="/wear/notifications/stacks.html">Learn about stacks</a>
453 </p>
454 </div>
455 </div>
456
457 <p>
458 You can also trigger your notifications contextually using existing Android APIs. For example, use <a href="/training/location/geofencing.html">geofences</a> to provide glanceable information to your users when they are at home, or use the <a href="/training/location/activity-recognition.html">activity detection APIs</a> to send messages to your users’ wrists while they are bicycling.
459 </p>
460
461 <p>See the <a href="/wear/design/index.html">Android Wear Developer Preview Design Principles</a> for more suggestions on creating great wearable experiences.</p>
462
463 </div>
464 </div> <!-- end .wrap -->
465 </div> <!-- end .wear-section -->
466
467 <div class="wear-section" style="background-color:#f5f5f5">
468 <div class="wrap">
469 <div class="wear-section-header">
470 <div class="wear-pre-h1">Coming soon</div>
471 <div class="wear-h1">The Android Wear SDK</div>
472 <div class="wear-subhead">
473 The Developer Preview is just the beginning for Android Wear.
474 </div>
475 </div>
476
477 <div class="wear-body">
478 <p>
479 In the coming months we’ll be launching new APIs and features for Android wearables to create even more unique experiences for the wrist:
480 </p>
481
482 <div class="wear-breakout cols">
483 <div class="col-4">
484 <img src="/wear/images/features/ts1.png" alt="">
485 <p>Build Custom UI</p>
486 <p class="wear-small">
487 Create custom card layouts and run activities directly on wearables.
488 </p>
489 </div>
490 <div class="col-4">
491 <img src="/wear/images/features/ts2.png" alt="">
492 <p>Send Data</p>
493 <p class="wear-small">
494 Send data and actions between a phone and a wearable with a data replication APIs and RPCs.
495 </p>
496 </div>
497 <div class="col-4">
498 <img src="/wear/images/features/ts3.png" alt="">
499 <p>Control Sensors</p>
500 <p class="wear-small">
501 Gather sensor data and display it in real-time on Android wearables.
502 </p>
503 </div>
504 <div class="col-4">
505 <img src="/wear/images/features/ts4.png" alt="">
506 <p>Voice Actions</p>
507 <p class="wear-small">
508 Register your app to handle voice actions, like "Ok Google, take a note.""
509 </p>
510 </div>
511 </div>
512
513 </div>
514 </div> <!-- end .wrap -->
515 </div> <!-- end .wear-section -->
516
517 <div class="wear-section wear-white-background">
518 <div class="wrap">
519 <div class="wear-section-header">
520 <div class="wear-h2">Building an Ecosystem</div>
521 <div class="wear-body wear-align-center">
522 <p class="wear-small">
523 We’re working with several partners to bring you watches powered by Android Wear later this year!
524 </p>
525 </div>
526 </div>
527
528 <div class="wear-partners cols">
529 <div class="col-4">
530 <img src="/wear/images/partners/asus.png" alt="Asus">
531 </div>
532 <div class="col-4">
533 <img src="/wear/images/partners/broadcom.png" alt="Broadcom">
534 </div>
535 <div class="col-4">
536 <img src="/wear/images/partners/fossil.png" alt="Fossil">
537 </div>
538 <div class="col-4">
539 <img src="/wear/images/partners/htc.png" alt="HTC">
540 </div>
541 <div class="col-4">
542 <img src="/wear/images/partners/intel.png" alt="Intel">
543 </div>
544 <div class="col-4">
545 <img src="/wear/images/partners/lg.png" alt="LG">
546 </div>
547 <div class="col-4">
548 <img src="/wear/images/partners/mediatek.png" alt="Mediatek">
549 </div>
550 <div class="col-4">
551 <img src="/wear/images/partners/mips.png" alt="MIPS">
552 </div>
553 <div class="col-4">
554 <img src="/wear/images/partners/motorola.png" alt="Motorola">
555 </div>
556 <div class="col-4">
557 <img src="/wear/images/partners/qualcomm.png" alt="Qualcomm">
558 </div>
559 <div class="col-4">
560 <img src="/wear/images/partners/samsung.png" alt="Samsung">
561 </div>
562 </div>
563 </div> <!-- end .wrap -->
564 </div> <!-- end .wear-section -->
565
566 <div class="wear-section wear-red-background">
567 <div class="wrap">
568 <div class="wear-section-header">
569 <div class="wear-h1 wear-align-left">Start working with Android Wear</div>
570 <div class="wear-subhead wear-subhead-red">
571 <p>
572 Your app’s notifications will already appear on Android wearables. <br>
573 With the new Android Wear APIs, you can customize and extend those notifications.
574 </p>
575 <p>
576 We’re excited about wearables and the experiences developers can create with them. <br>
577 We can’t wait to see what you do next.</p>
578 </div>
579 </div>
580 <div class="wear-body">
581 <a href="/wear/preview/start.html" class="wear-button wear-secondary" style="margin-top: 20px;">
582 Get the Developer Preview
583 </a>
584 </div>
585 </div>
586 </div>
587
588 <div class="wear-section">
589 <div class="wrap">
590 <div class="cols">
591 <div class="wear-body">
592 <div class="col-3-wide">
593 <a href="/TODO">
594 <img class="wear-social-image" src="//www.google.com/images/icons/product/youtube-128.png" alt="">
595 </a>
596 <div class="wear-social-copy">
597 <p>DevBytes</p>
598 <p class="wear-small">
599 Learn how to optimize your app notifications for wearable devices in this <a href="/TODO">DevBytes video</a> using the Android Wear Developer Preview.
600 </p>
601 </div>
602 </div>
603 <div class="col-3-wide">
604 <a href="http://android-developers.blogspot.com/">
605 <img class="wear-social-image" src="/wear/images/blogger.png" alt="">
606 </a>
607 <div class="wear-social-copy">
608 <p>Blog Post</p>
609 <p class="wear-small">
610 Read more about the Android Wear Developer Preview announcement
611 at the <a href="http://android-developers.blogspot.com/">Android Developers Blog</a>.
612 </p>
613 </div>
614 </div>
615 <div class="col-3-wide">
616 <a href="http://g.co/androidweardev">
617 <img class="wear-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Wear Developers">
618 </a>
619 <div class="wear-social-copy">
620 <p>G+ Community</p>
621 <p class="wear-small">
622 Follow us on Google+ to stay up-to-date on Android Wear development and join the discussion!
623 </p>
624 <p class="wear-small">
625 <a href="http://g.co/androidweardev">+Android Wear Developers</a>
626 </p>
627 </div>
628 </div>
629 </div>
630 </div>
631 </div> <!-- end .wrap -->
632 </div> <!-- end .wear-section -->
633 </div> <!-- end .wear-rest-of-page -->
634 </div> <!-- end wear-body-content -->
635
636 <script>
637 $("a.wear-down-arrow").on("click", function(e) {
638 $("body").animate({
639 scrollTop: $(".wear-hero").height() + 76
640 }, 1000, "easeOutQuint");
641 e.preventDefault();
642 });
643 </script>
644 </div>
645
646 <div class="content-footer wrap"
647 itemscope itemtype="http://schema.org/SiteNavigationElement">
648 <div class="layout-content-col col-16" style="padding-top:4px">
649 <style>#___plusone_0 {float:right !important;}</style>
650 <div class="g-plusone" data-size="medium"></div>
651
652 </div>
653
654 <div class="paging-links layout-content-col col-4">
655
656 </div>
657
658 </div>
659
660
661
662
663 </div> <!-- end jd-content -->
664
665<div id="footer" class="wrap" style="width:940px">
666
667
668 <div id="copyright">
669
670 Except as noted, this content is
671 licensed under <a href="http://creativecommons.org/licenses/by/2.5/">
672 Creative Commons Attribution 2.5</a>. For details and
673 restrictions, see the <a href="/license.html">Content
674 License</a>.
675 </div>
676
677
678</div> <!-- end footer -->
679</div><!-- end doc-content -->
680
681</div> <!-- end body-content -->
682
683
684
685
686
687
688<!-- Start of Tag -->
689<script type="text/javascript">
690var axel = Math.random() + "";
691var a = axel * 10000000000000;
692document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
693</script>
694<noscript>
695<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
696</noscript>
697<!-- End of Tag -->
698</body>
699</html>
700
701
702