1 page.title=Addressing Common Issues 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="#ScreenShape">Detect the Shape of the Screen</a></li> 10 <li><a href="#PeekCards">Accomodate Peek Cards</a></li> 11 <li><a href="#RelativeMeasurements">Use Relative Measurements</a></li> 12 </ol> 13 <h2>You should also read</h2> 14 <ul> 15 <li><a href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a></li> 16 </ul> 17 </div> 18 </div> 19 20 <p>Creating a custom watch face for Android Wear is substantially different from creating 21 notifications and wearable-specific activities. This class shows you how to resolve some 22 issues that you may encounter as you implement your first few watch faces.</p> 23 24 25 26 <h2 id="ScreenShape">Detect the Shape of the Screen</h2> 27 28 <p>Some Android Wear devices have square screens, while others have round screens. Devices with 29 round screens can contain an inset (or "chin") at the bottom of the screen. Your watch face 30 should adapt to and take advantage of the particular shape of the screen, as described in the 31 <a href="{@docRoot}design/wear/watchfaces.html">design guidelines</a>.</p> 32 33 <p>Android Wear lets your watch face determine the screen shape at runtime. To detect whether 34 the screen is square or round, override the 35 <a href="{@docRoot}reference/android/service/wallpaper/WallpaperService.Engine.html#onApplyWindowInsets(android.view.WindowInsets)"><code>onApplyWindowInsets()</code></a> 36 method in the 37 <a href="{@docRoot}reference/android/support/wearable/watchface/CanvasWatchFaceService.Engine.html"><code>CanvasWatchFaceService.Engine</code></a> 38 class as follows:</p> 39 40 <pre> 41 private class Engine extends CanvasWatchFaceService.Engine { 42 boolean mIsRound; 43 int mChinSize; 44 45 @Override 46 public void onApplyWindowInsets(WindowInsets insets) { 47 super.onApplyWindowInsets(insets); 48 mIsRound = insets.isRound(); 49 mChinSize = insets.getSystemWindowInsetBottom(); 50 } 51 ... 52 } 53 </pre> 54 55 <p>To adapt your design when you draw your watch face, check the value of the 56 <code>mIsRound</code> and <code>mChinSize</code> member variables.</p> 57 58 59 60 <h2 id="PeekCards">Accomodate Peek Cards</h2> 61 62 <div style="float:right;margin-left:30px;width:340px"> 63 <img src="{@docRoot}training/wearables/watch-faces/images/AnalogNoCard.png" alt="" 64 width="160" height="145" style="margin-right:7px"/> 65 <img src="{@docRoot}training/wearables/watch-faces/images/AnalogWithCard.png" alt="" 66 width="160" height="145"/> 67 <p class="img-caption"><strong>Figure 1.</strong> Some analog watch faces require adjustments 68 when notification cards appear.</p> 69 </div> 70 71 <p>When users receive a notification, the notification card may cover a significant portion of the 72 screen, depending on the 73 <a href="{@docRoot}training/wearables/watch-faces/drawing.html#SystemUI">system UI style</a>. Your 74 watch face should adapt to these situations by ensuring that users can still tell the time while 75 the notification card is present.</p> 76 77 <p>Analog watch faces can make adjustments when a notification card is present, like scaling 78 down the watch face to fit inside the portion of the screen not covered by the peek card. Digital 79 watch faces that display the time in the area of the screen not covered by peek cards do not 80 usually require adjustments. To determine the free space above the peek card so you can adapt 81 your watch face, use the 82 <a href="{@docRoot}reference/android/support/wearable/watchface/WatchFaceService.Engine.html#getPeekCardPosition()"><code>WatchFaceService.Engine.getPeekCardPosition()</code></a> 83 method.</p> 84 85 <p>In ambient mode, peek cards have a transparent background. If your watch face contains details 86 near the card in ambient mode, consider drawing a black rectangle over them to ensure that users 87 can read the contents of the card.</p> 88 89 90 91 <h2 id="SystemIndicators">Configure the System Indicators</h2> 92 93 <div style="width:200px;float:right;margin-left:10px"> 94 <img src="{@docRoot}training/wearables/watch-faces/images/Indicators_Cropped.png" alt="" 95 width="200" height="195"/> 96 <p class="img-caption" style="margin-left:25px;margin-top:-25px"> 97 <strong>Figure 2.</strong> The status bar.</p> 98 </div> 99 100 <p>To ensure that the system indicators remain visible, you can configure their position on the 101 screen and whether they need background protection when you create a 102 <a href="{@docRoot}reference/android/support/wearable/watchface/WatchFaceStyle.html"><code>WatchFaceStyle</code></a> 103 instance:</p> 104 105 <ul> 106 <li>To set the position of the status bar, use the 107 <a href="{@docRoot}reference/android/support/wearable/watchface/WatchFaceStyle.Builder.html#setStatusBarGravity(int)"><code>setStatusBarGravity()</code></a> 108 method.</li> 109 <li>To set the position of the hotword, use the 110 <a href="{@docRoot}reference/android/support/wearable/watchface/WatchFaceStyle.Builder.html#setHotwordIndicatorGravity(int)"><code>setHotwordIndicatorGravity()</code></a> 111 method.</li> 112 <li>To protect the status bar and hotword with a semi-transparent gray background, use the 113 <a href="{@docRoot}reference/android/support/wearable/watchface/WatchFaceStyle.Builder.html#setViewProtection(int)"><code>setViewProtection()</code></a> 114 method. This is usually necessary if your watch face has a light background, since the system 115 indicators are white.</li> 116 </ul> 117 118 <p>For more information about the system indicators, see <a 119 href="{@docRoot}training/wearables/watch-faces/drawing.html#SystemUI">Configure the System UI</a> 120 and read the <a href="{@docRoot}design/wear/watchfaces.html">design guidelines</a>.</p> 121 122 123 124 <h2 id="RelativeMeasurements">Use Relative Measurements</h2> 125 126 <p>Android Wear devices from different manufacturers feature screens with a variety of sizes and 127 resolutions. Your watch face should adapt to these variations by using relative measurements 128 instead of absolute pixel values.</p> 129 130 <p>When you draw your watch face, obtain the size of the canvas with the {@link 131 android.graphics.Canvas#getWidth Canvas.getWidth()} and {@link 132 android.graphics.Canvas#getHeight Canvas.getHeight()} methods and set the positions of your 133 graphic elements using values that are some fraction of the detected screen size. If you resize 134 the elements of your watch face in response to a peek card, use values that are some fraction 135 of the remaining space above the card to redraw your watch face.</p> 136
