1page.title=Designing Watch Faces 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>This lesson teaches you to</h2> 8<ol> 9 <li><a href="#DesignGuidelines">Conform to the Design Guidelines</a></li> 10 <li><a href="#ImplementationStrategy">Create an Implementation Strategy</a></li> 11</ol> 12<h2>You should also read</h2> 13<ul> 14 <li><a href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a></li> 15</ul> 16</div> 17</div> 18 19<!-- design guide box --> 20<a class="notice-designers wide" href="{@docRoot}design/wear/watchfaces.html"> 21 <div> 22 <h3>Design Guide</h3> 23 <p>Watch Faces</p> 24 </div> 25</a> 26 27<p>Similar to the process of designing a traditional watch face, creating one for 28Android Wear is an exercise in visualizing time clearly. Android Wear devices 29provide advanced capabilities for watch faces that you can leverage in your designs, such as 30vibrant colors, dynamic backgrounds, animations, and data integration. However, there are 31also many design considerations that you must take into account.</p> 32 33<p>This lesson provides a summary of the design considerations for watch faces and general 34guidelines to get started implementing a design. For more information, read the <a 35href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a> design guide.</p> 36 37 38 39<h2 id="DesignGuidelines">Conform to the Design Guidelines</h2> 40 41<p>As you plan the look of your watch face and what kind of information it should present 42to users, consider these design guidelines:</p> 43 44<div style="float:right;margin-top:-5px;margin-left:20px"> 45 <img src="{@docRoot}training/wearables/watch-faces/images/Render_Next.png" 46 width="200" height="195" alt="" style="margin-right:5px"/><br> 47 <img src="{@docRoot}training/wearables/watch-faces/images/Render_Interactive.png" 48 width="200" height="195" alt="" style="margin-right:5px"/> 49 <p class="img-caption" style="margin-top:0px;margin-left:10px"> 50 <strong>Figure 1.</strong> Example watch faces.</p> 51</div> 52 53<dl> 54<dt><em>Plan for square and round devices</em></dt> 55<dd>Your design should work for both square and round Android Wear devices, including devices with 56<a href="{@docRoot}training/wearables/ui/layouts.html#same-layout">insets on the bottom of the 57screen</a>.</dd> 58 59<dt><em>Support all display modes</em></dt> 60<dd>Your watch face should support ambient mode with limited color and interactive mode with 61full color and animations.</dd> 62 63<dt><em>Optimize for special screen technologies</em></dt> 64<dd>In ambient mode, your watch face should keep most pixels black. Depending on the screen 65technology, you may need to avoid large blocks of white pixels, use only black and white, and 66disable anti-aliasing.</dd> 67 68<dt><em>Accommodate system UI elements</em></dt> 69<dd>Your design should ensure that system indicators remain visible and that users can still 70read the time when notification cards appear on the screen.</dd> 71 72<dt><em>Integrate data</em></dt> 73<dd>Your watch face can leverage sensors and cellular connectivity on the companion mobile 74device to show user data relevant to the context, such as the weather for the day or their next 75calendar event.</dd> 76 77<dt><em>Provide configuration options</em></dt> 78<dd>You can let users configure some aspects of your design (like colors and sizes) on the 79wearable or on the Android Wear companion app.</dd> 80</dl> 81 82<p>For more information about designing watch faces for Android Wear, see the <a 83href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a> design guide.</p> 84 85 86 87<h2 id="ImplementationStrategy">Create an Implementation Strategy</h2> 88 89<p>After you finalize the design for your watch face, you need to determine how to obtain any 90necessary data and draw the watch face on the wearable device. Most implementations 91consist of the following components:</p> 92 93<ul> 94<li>One or more background images</li> 95<li>Application code to retrieve the required data</li> 96<li>Application code to draw text and shapes over the background images</li> 97</ul> 98 99<p>You typically use one background image in interactive mode and a different background image 100in ambient mode. The background in ambient mode is often completely black. Background images for 101Android Wear devices with a screen density of hdpi should be 320 by 320 pixels in size to fit 102both square and round devices. The corners of the background image are not visible on round 103devices. In your code, you can detect the size of the device screen and scale down the background 104image if the device has a lower resolution than your image. To improve performance, you should 105scale the background image only once and store the resulting bitmap.</p> 106 107<p>You should run the application code to retrieve contextual data only as often as required 108and store the results to reuse the data every time you draw the watch face. For example, you 109don't need to fetch weather updates every minute.</p> 110 111<p>To increase battery life, the application code that draws your watch face in ambient mode 112should be relatively simple. You usually draw outlines of shapes using a limited set of colors 113in this mode. In interactive mode, you can use full color, complex shapes, gradients, and 114animations to draw your watch face.</p> 115 116<p>The remaining lessons in this class show you how to implement watch faces in detail.</p> 117
