1page.title=App Structure for Android Wear
2@jd:body
3
4<style>
5ol.inline-list {
6  margin:0 0 20px 0;
7}
8ol.inline-list li {
9display: block;
10float:left;
11width: 162px;
12margin: 0 10px 20px 20px;
13}
14</style>
15
16<p>Users are used to tapping icons to launch apps. Android Wear is different. A typical Wear app adds a card to the stream at a contextually relevant moment. It might have a button that opens a full screen view for a fast micro interaction, but it just as well might not.
17</p>
18
19<p>These are the building blocks, ordered by simplicity. You can use one of them or some of them, but we strongly recommend not building apps the user has to launch and quit before thinking really hard about how you could react to a specific location, activity, time of day, or something happening in the cloud.</p>
20
21
22<ul>
23  <li><strong>Contextual card in the stream</strong>:
24  <ul>
25    <li><a href="#Bridged"><strong>Bridged notifications</strong></a>, such as new message
26    notifications, are pushed to the wearable from the connected handheld using standard Android
27    notifications. They require very little or no Wear-specific code.</li>
28    <li><a href="#Contextual"><strong>Contextual notifications</strong></a>, such as an exercise
29    card that appears when you begin running, are generated locally on the wearable and appear at
30    contextually relevant moments. You can do more with this kind of card than with a notification
31    bridged from the handheld.</li>
32  </ul>
33  </li>
34  <li><strong>Full screen UI app</strong>:
35  <ul>
36    <li><a href="#2DPicker"><strong>2D Picker</strong></a> is a design pattern that allows the user
37    to select from a set of items, such as to select an artist then an album. We recommend using
38    this pre-built component from the SDK whenever relevant.</li>
39    <li><a href="#Custom"><strong>Custom layouts</strong></a> are also possible where apps need to
40    extend beyond the basic card/stream metaphor, such as to present a graph or map.</li>
41    <li><a href="#AlwaysOn"><strong>Keep your app always-on</strong></a> if you have information
42    that refreshes or stays relevant, without draining the battery.</li>
43  </ul>
44  </li>
45</ul>
46
47
48
49<h2 id="Bridged">Bridged Notifications</h2>
50
51<img src="{@docRoot}design/media/wear/bridgednotifications.jpg" height="147" style="float:right;margin:0 0 20px 20px" alt="">
52<img src="{@docRoot}design/media/wear/Bluebird.png" height="147" style="float:right;margin:0 0 20px 40px" alt="">
53
54<p>This is the simplest way to get on Android Wear. In fact, your app already does this if it uses notifications. You can add Wear-specific features like extra pages and voice replies by using the new notification APIs. </p>
55
56<a class="notice-developers left" style="clear:none" href="{@docRoot}training/wearables/notifications/creating.html">
57  <div>
58    <h3>Developer Docs</h3>
59    <p>Creating a Notification</p>
60  </div>
61</a>
62
63
64<h2 id="Contextual" style="clear:both">Contextual Notifications</h2>
65
66
67<img src="{@docRoot}design/media/wear/context_workout.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" />
68<img src="{@docRoot}design/media/wear/context_lights.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" />
69
70<p>This is what Android Wear does best: showing users information and functionality just when they need it.</p>
71
72<p>Here’s how it works: Your app knows when it is relevant for the user. When the appropriate event occurs, the app triggers a notification. Maybe you’re building a running app that’s relevant when the user is running. Maybe it’s a museum guide that’s relevant when the user is visiting your museum. Check out the <a href="{@docRoot}design/wear/principles.html">design principles</a> for more about how to make your app contextual. </p>
73
74<p>Getting contextual triggering right is one of the most impactful things you can do to craft a great user experience. </p>
75
76<p>The easiest way to do this is to use standard templates for Android notifications. But you can also make your own layout from scratch with an <a href="{@docRoot}guide/components/activities.html">activity</a> inside a card. If you decide to do this, we strongly recommend you take a look at the <a href="{@docRoot}design/wear/style.html">Style</a> guide to make sure you stay consistent with the rest of the device. </p>
77
78
79<a class="notice-developers" style="clear:none" href="{@docRoot}training/wearables/apps/layouts.html">
80  <div>
81    <h3>Developer Docs</h3>
82    <p>Creating Custom Layouts</p>
83  </div>
84</a>
85
86<p>Don’t forget to test your triggering thoroughly. Triggering too often can be so annoying that users might end up blocking all your notifications. </p>
87
88
89
90<h2 id="2DPicker">2D Picker</h2>
91
92<p>The 2D Picker design pattern (available as the <a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>GridViewPager</code> component</a>) is useful for showing options in a list. Google search results are a great example of this pattern in action.</p>
93
94<img src="{@docRoot}design/media/wear/1D_picker.png" alt="" width="499px" />
95<p class="img-caption">This pattern can be used to present a single vertical list, or a “1D Picker”</p>
96
97<img src="{@docRoot}design/media/wear/2D_picker.png" alt="" width="760px" />
98<p class="img-caption">It can also be used as a 2D matrix of options, as a way of presenting categorized options.</p>
99
100
101
102<h3>Actions</h3>
103<a class="notice-developers" style="clear:none" href="{@docRoot}training/wearables/ui/2d-picker.html">
104  <div>
105    <h3>Developer Docs</h3>
106    <p>Creating a 2D Picker</p>
107  </div>
108</a>
109<p>For actions on each card, use the <a href="{@docRoot}design/wear/patterns.html#Actions">Action cards pattern</a>.</p>
110
111<h3>Making it fast</h3>
112
113<div class="figure" style="width:350px">
114<img src="{@docRoot}design/media/wear/2d_picker_indicated.png" alt="" width="350" />
115<p class="img-caption">Navigation should be vertical-then-horizontal, not horizontal-then-vertical, and limit the the vertical set to about five cards.</p>
116</div>
117
118<p>Here are a few of our favorite tips about how to make the 2D picker really fast for your users:</p>
119<ul>
120<li>Minimize the number of cards</li>
121<li>Show the most popular card at the top </li>
122<li>Keep the cards extremely simple</li>
123<li>Optimize for speed over customization</li>
124</ul>
125
126
127<h3>Exiting</h3>
128<p>Your app should dismiss the 2D picker when the user makes a selection. Users should also be able to exit by swiping the first card down, or swiping left to right on a left-most card.</p>
129
130
131
132<h2 id="Custom">Breaking out of the card (with custom layouts)</h2>
133
134<a class="notice-developers" href="{@docRoot}training/wearables/apps/index.html">
135  <div>
136    <h3>Developer Docs</h3>
137    <p>Creating Wearable Apps</p>
138  </div>
139</a>
140
141<p>There are some things you can’t do on a card. Swiping in many directions on a map or controlling a game with a joystick are a couple examples. In those cases it might be good idea to <em>momentarily</em> go full screen.</p>
142
143<p>A typical user experience with a full screen app on Android Wear looks like this:</p>
144
145<img src="{@docRoot}design/media/wear/appstructuresample.png" alt="" />
146
147<ol class="inline-list">
148  <li>Your contextual card enters the stream.
149  <li>The user taps the card action.
150  <li>A full screen activity opens for a micro interaction.
151  <li style="margin-right:0">The activity quits and the user returns to the stream.
152</ol>
153
154<h3>When to go full screen</h3>
155<p>We highly recommend going full screen only when you can’t do what you want on a card, and quickly exit back to the stream the moment the user is done with the micro interaction. This will make your app will feel like an integrated part of the system. Android Wear itself uses full screen for voice replies and the stopwatch.</p>
156
157<h3>Making it distinct</h3>
158
159<p>Your full screen design shouldn’t look too much like the card stream as it could confuse users. If you do need a card-like UI, the <a
160href="#2DPicker">2D picker</a> is always available.</p>
161
162<h3>Automatically exiting</h3>
163
164<p>Many devices don’t have back or home buttons, so exiting is something you have to think about. Here are a few examples of natural ways to exit:</p>
165<ul>
166  <li>A map that asks the user to drop a pin should exit when the pin is dropped.</li>
167  <li>A short game can exit when the game finishes.</li>
168  <li>A drawing app can finish after 5 seconds of inactivity.</li>
169
170  <p class="note">An app generally should not exit in {@link android.app.Activity#onPause onPause()}.  This is because events such as <a href="{@docRoot}guide/topics/ui/notifiers/notifications.html#Heads-up">Heads-up Notifications</a> can trigger the {@link android.app.Activity#onPause() onPause()} callback.</p>
171</ul>
172
173
174<h3>Manually exiting</h3>
175
176<p>Even with logical exit points like these, some cases may exist where the user may want to
177immediately exit. This may be common in apps that are used for a longer while. In all cases, you
178should treat long-press as the user's intent to exit, using
179<a href="{@docRoot}training/wearables/ui/exit.html"><code>DismissOverlayView</code></a>.</p>
180
181
182<h2 id="AlwaysOn">Keeping the app always-on</h2>
183
184<a class="notice-developers" href="{@docRoot}training/wearables/apps/alwayson.html">
185  <div>
186    <h3>Developer Docs</h3>
187    <p>Keeping Your App Always-On</p>
188  </div>
189</a>
190
191<p>An Android Wear device has two modes:</p>
192
193<dl>
194<dt><strong>Interactive mode</strong></dt>
195<dd>A full-color mode where the user can interact with your app.</dd>
196<dt><strong>Ambient mode</strong></dt>
197<dd>A low-power mode where the screen is rendered in black and white, with
198minimal grayscale graphics.</dd>
199</dl>
200
201<p>Interactive activities provide real-time information and feedback to the user, but it can quickly
202drain the device's battery. To reduce battery usage and still present useful information, apps can
203transition into an ambient mode called <i>always-on</i>.
204</p>
205
206<p>Your app can display dynamic data on the device, even when the app is in ambient mode. This
207approach is useful if your app displays information that is continuously updated, like a running
208tracker app, or when it presents information the user needs for reference, like a grocery app.</p>
209
210<p>Typical user experiences with apps that switch into ambient mode on Android Wear look like
211this:</p>
212
213<img src="{@docRoot}design/media/wear/interactive_run.png" height="147" width="147"
214     srcset="{@docRoot}design/media/wear/interactive_run@2x.png 2x" style="float:left;margin:0 0 20px 40px" alt="">
215<img src="{@docRoot}design/media/wear/ambient_run.png" height="147" width="147"
216     srcset="{@docRoot}design/media/wear/ambient_run@2x.png 2x" style="float:left;margin:0 0 20px 40px" alt="">
217<img src="{@docRoot}design/media/wear/interactive_list.png" height="147" width="147"
218     srcset="{@docRoot}design/media/wear/interactive_list@2x.png 2x" style="float:left;margin:0 0 20px 40px" alt="">
219<img src="{@docRoot}design/media/wear/ambient_list.png" height="147" width="147"
220     srcset="{@docRoot}design/media/wear/ambient_list@2x.png 2x" style="float:left;margin:0 0 20px 40px" alt="">
221<p class="img-caption">When the app switches to ambient mode, remove all elements that invite
222touch or indicate the elements are disabled. In addition, consider showing the current time.</p>
223
224<h3>Update frequency</h3>
225
226<p>You should only update the display once per minute, to preserve battery life of the wearable
227device. You can update the display every 10 seconds, but make sure you only update when absolutely
228necessary. Every update depletes the device's battery.
229</p>
230
231<h3>Interactive elements</h3>
232
233<p>Don’t present any buttons or other interactive elements when the app is in ambient mode. This
234approach could mislead the user into thinking the app is in interactive mode.</p>
235
236<h3>Colors and brightness</h3>
237
238<p>Use grayscale colors to help signal that the user must wake up the device before they can
239interact with it. Also note that any pixel that is not black will be noticeably bright for users in
240dimly lit rooms. We strongly recommend keeping the background black whenever possible.</p>
241
242<h3>Privacy</h3>
243
244<p>Consider the user’s privacy when designing and developing an app that displays data in ambient
245mode. For example, while keeping a messaging app on the screen could be convenient for a user who is
246in an ongoing conversation, displaying personal messages on the screen for an extended period of
247time while the app is in ambient mode may bother some users. Consider removing potentially private
248data after a short period of inactivity or refrain from showing sensitive data in ambient mode.
249</p>
250