1page.title=Watch Face Complications
2meta.keywords="wear-preview"
3page.tags="wear-preview"
4page.image=/wear/preview/images/complications-main-image.png
5@jd:body
6
7    <div id="qv-wrapper">
8      <div id="qv">
9    <h2>In this document</h2>
10      <ol>
11          <li>
12            <a href="#adding_complications_to_a_watch_face">Adding
13            Complications to a Watch Face</a>
14          </li>
15          <li>
16            <a href="#exposing_data_to_complications">Exposing Data to
17            Complications</a>
18          </li>
19          <li>
20            <a href="#using_complication_types">Using Complication Types</a>
21          </li>
22          <li>
23            <a href="#using_fields_for_complication_data">Using Fields for
24            Complication Data</a>
25          </li>
26          <li>
27            <a href="#api_additions">API Additions</a>
28          </li>
29      </ol>
30    <h2>See Also</h2>
31      <ol>
32        <li><a class="external-link"
33          href="https://github.com/googlesamples/android-WatchFace">Watch
34          Face sample app with complications</a></li>
35      </ol>
36      </div>
37    </div>
38
39    <p>
40      A complication is any feature in a watch face that displays <a href=
41      "https://en.wikipedia.org/wiki/Complication_(horology)">more than hours and
42      minutes</a>. For example, a battery indicator is a complication. The
43      Complications API is for both watch faces and data provider apps.
44    </p>
45
46    <div class="col-4of10">
47      <img src="../images/complications-main-image.png" alt="Complications"
48      id="img-split-screen">
49    </div>
50
51    <p>
52      Watch faces can display extra information without needing code for
53      getting the underlying data. Data providers can supply data (such as
54      battery level, weather, or step-count data) to any watch face using the
55      API.
56    </p>
57
58    <p>
59      Along with reviewing this page, download the Android Wear 2.0 Preview
60      Reference (see the Complications API <a href=
61      "#api_additions">additions</a>) and review the Javadoc for complications.
62    </p>
63
64    <p>
65      Apps that provide data to watch faces for complications are called
66      "complication data providers." These apps are not responsible for controlling
67      how their data is rendered on the watch face.
68      This allows a watch face to integrate the data naturally with the
69      watch face design.
70      The consuming watch faces are responsible for drawing
71      the complications.
72    </p>
73
74    <p>
75      Watch faces can receive complication data of
76      <a href="#using_complication_types">various types</a> (e.g. small text
77      data or icon data) and then display it.
78    </p>
79
80    <p>
81      As indicated in the diagram below, Android Wear mediates the flow of data
82      from providers to watch faces.
83    </p>
84
85    <img src="../images/complications-data-flow.png" width="" alt=
86    "Complications data flow" title="Complications data flow">
87
88    <p>
89      For creating or modifying watch faces, see <a href=
90      "#adding_complications_to_a_watch_face">Adding complications to a watch
91      face</a>.
92    </p>
93
94    <p>
95      For writing apps that provide data to watch faces, see <a href=
96      "#exposing_data_to_complications">Exposing data to complications</a>.
97    </p>
98
99    <h2 id="adding_complications_to_a_watch_face">
100      Adding Complications to a Watch Face
101    </h2>
102
103    <p>
104      Watch face developers can receive complication data and enable users to
105      select providers for that data. Additionally, Android Wear provides a
106      <a href="#allowing_users_to_choose_data_providers">user interface for
107      data source selection</a>.
108    </p>
109
110    <h3 id="receiving_data_and_rendering_complications">
111      Receiving data and rendering complications
112    </h3>
113
114    <p>
115      To start receiving complication data, a watch face calls
116      <code>setActiveComplications</code> within the
117      <code>WatchFaceService.Engine</code> class with a list of watch face
118      complication IDs. A watch face creates these IDs to uniquely identify
119      slots on the watch face where complications can appear, and passes them
120      to the <code>createProviderChooserIntent</code> method (of the
121      <code>ProviderChooserIntent</code> class) to allow the user to decide
122      which complication should go in which slot.
123    </p>
124
125    <p>
126      Complication data is delivered via the
127      <code>onComplicationDataUpdate</code> (of
128      <code>WatchFaceService.Engine</code>) callback.
129    </p>
130
131    <p>
132      The watch face may render the data as desired as long as the expected
133      fields are represented; the required fields should always be included and
134      the data should be represented in some way. Depending on the type, some
135      of the optional fields should also be included (see the Notes column in
136      the <a href="#types_and_fields">table</a> below).
137    </p>
138
139    <p>
140      We provide design guidelines for our style, as a suggestion for standard
141      complications, but developers can use their own styles or incorporate the
142      data into the watch face in different ways.
143    </p>
144
145    <h3 id="allowing_users_to_choose_data_providers">
146      Allowing users to choose data providers
147    </h3>
148
149    <p>
150      Android Wear provides a user interface (via an Activity) that enables
151      users to choose providers for a particular complication. Watch faces can
152      call the <code>createProviderChooserIntent</code> method to obtain an
153      intent that can be used to show the chooser interface.
154    </p>
155
156    <p>
157      This intent must be used with <code>startActivityForResult</code>. When a
158      watch face calls <code>createProviderChooserIntent</code>, the watch face
159      supplies a watch face complication ID and a list of supported types. The
160      types should be listed in order of preference, usually with types
161      offering more information, such as ranged value, given higher preference.
162    </p>
163
164    <p>
165      When the user selects a data provider, the configuration is saved
166      automatically; nothing more is required from the watch face.
167    </p>
168
169    <h3 id="user_interactions_with_complications">
170      User interactions with complications
171    </h3>
172
173    <p>
174      Providers can specify an action that occurs if the user taps on a
175      complication, so it should be possible for most complications to be
176      tappable. This action will be specified as a <code>PendingIntent</code>
177      included in the <code>ComplicationData</code> object. The watch face is
178      responsible for detecting taps on complications, and should fire the
179      pending intent when a tap occurs.
180    </p>
181
182    <p>
183      It may be infeasible to make some complications tappable (e.g., in the
184      case of a complication that fills the entire background of the watch
185      face), but it is expected that watch faces accept taps on complications
186      where possible.
187    </p>
188
189    <h2 id="exposing_data_to_complications">
190      Exposing Data to Complications
191    </h2>
192
193    <p>
194      A complication data provider is a service that extends
195      <code>ComplicationProviderService</code>. To respond to update requests
196      from the system, your data provider must implement the
197      <code>onComplicationUpdate</code> method of the
198      <code>ComplicationProviderService</code> class. This method will be
199      called when the system wants data from your provider - this could be when
200      a complication using your provider becomes active, or when a fixed amount
201      of time has passed. A <code>ComplicationManager</code> object is passed
202      as a parameter to the <code>onComplicationUpdate</code> method, and can
203      be used to send data back to the system.
204    </p>
205
206    <p>
207      In your app's manifest, declare the service and add an intent filter for
208      the following:
209    </p>
210
211    <pre>
212android.support.wearable.complications.ACTION_COMPLICATION_UPDATE_REQUEST
213</pre>
214    <p>
215      The service's manifest entry should also include an
216      <code>android:icon</code> attribute. The provided icon should be a
217      single-color white icon. Vector drawables are recommended for the icons.
218      An icon should represent the provider and will be shown in the provider
219      chooser.
220    </p>
221
222    <p>
223      Include metadata to specify the supported types, update period, and
224      configuration action, if required; for details, download the Android Wear
225      2.0 Preview Reference and see the keys listed for the
226      <code>ComplicationProviderService</code> class (in the Javadoc; see
227      <a href="#api_additions">API Additions</a>).
228    </p>
229
230    <h3 id="update_period">
231      Update period
232    </h3>
233
234    <p>
235      Your provider can specify an update period using the following metadata
236      key in the manifest:
237    </p>
238
239    <pre>
240android.support.wearable.complications.UPDATE_PERIOD_SECONDS
241</pre>
242    <p>
243      This should be set to as long a time as possible, as updating too
244      frequently may impact battery life. Note that update requests are not
245      guaranteed to be sent with this frequency. The system does apply a
246      minimum update period, and in particular, updates requests may come less
247      often when the device is in ambient mode or is not being worn.
248    </p>
249
250    <p>
251      You can alternatively use a "push style" to send updates, rather than
252      requesting updates on a fixed schedule. To do so, you can set the update
253      period to 0 so scheduled update requests do not occur (or set it to a
254      non-zero value) and use a <code>ProviderUpdateRequester</code> to trigger
255      calls to <code>onComplicationUpdate</code> as required.
256    </p>
257
258    <h3 id="provider_configuration">
259      Provider configuration
260    </h3>
261
262    <p>
263      If required, a provider can include a configuration activity that is
264      shown to the user when the user chooses a data provider. To include the
265      configuration activity, include a metadata item in the provider service
266      declaration in the manifest with a key of the following:
267    </p>
268
269    <p>
270      <code>android.support.wearable.complications.PROVIDER_CONFIG_ACTION</code>
271    </p>
272
273    <p>
274      The value can be an action of your choice.
275    </p>
276
277    <p>
278      Then create the configuration activity with an intent filter for that
279      action. The configuration activity must reside in the same package as the
280      provider. The configuration activity must return <code>RESULT_OK</code> or
281      <code>RESULT_CANCELED</code>, to tell the system whether the provider
282      should be set.
283    </p>
284
285    <p>
286      The configuration activity may also be used as an opportunity to request
287      any permissions required by the provider.
288    </p>
289
290    <p>
291      For details, download the Android Wear 2.0 Preview Reference (see
292      <a href="#api_additions">API Additions</a>), containing the Javadoc, and
293      see the following in the <code>ComplicationProviderService</code> class:
294    </p>
295
296    <pre>
297METADATA_KEY_PROVIDER_CONFIG_ACTION
298    </pre>
299
300    <h2 id="using_complication_types">
301      Using Complication Types
302    </h2>
303
304    <p>
305      Complication types determine the kinds of data shown in a complication.
306      For example, the <code>SHORT_TEXT</code> type is available when the key
307      data is a short string. In the example of the <code>SHORT_TEXT</code>
308      type, optional data are an icon and a short title.
309    </p>
310
311    <p>
312      Data providers use these complication types differently from the way
313      watch face providers use these types:
314    </p>
315
316    <ul>
317      <li>A data provider chooses the types of complication data to supply. For
318      example, a step count provider might support the
319      <code>RANGED_VALUE</code> and <code>SHORT_TEXT</code> types, whereas a
320      "next meeting" provider might support the <code>SHORT_TEXT</code> and
321      <code>LONG_TEXT</code> types. The data provider also chooses which
322      optional fields of those types to include.
323      </li>
324
325      <li>A watch face provider chooses how many complication types to support.
326      For example, a round complication on a watch face might support the
327      <code>SHORT_TEXT</code>, <code>ICON</code> and <code>RANGED_VALUE</code>
328      types, whereas a gauge on the watch face might support only the
329      <code>RANGED_VALUE</code> type.
330      </li>
331    </ul>
332
333    <p>
334      A <code>ComplicationData</code> object will always have a single
335      complication type. Each complication type has required and optional
336      fields. Generally, a required field represents the primary piece of data;
337      most types take their name from the required field.
338    </p>
339
340    <p>
341      A given type may include different sets of fields. For example,
342      <code>SHORT_TEXT</code> may be just a single piece of text, or a title
343      and text, or an icon and text. A complication that supports a given type
344      must be able to display all the expected variants. However, some optional
345      fields do not need to be displayed (see the <em>Notes</em> column of the
346      table below). For example, the Short title field of the
347      <code>RANGED_VALUE</code> type is not required so that, for example,
348      gauges can be shown without including text.
349    </p>
350
351    <h3 id="examples_of_complication_types">
352      Examples of Complication Types
353    </h3>
354
355    <p>
356      The following shows examples of complication types:
357    </p>
358    <img src="../images/complication-type-exs.png" width="" alt=
359    "Complication types" title="Complications types - examples">
360
361
362    <h3 id="types_and_fields">
363      Types and fields
364    </h3>
365
366    <p>
367      The following table describes the types and fields of the
368      <code>ComplicationData</code> object.
369    </p>
370
371    <table>
372      <tr>
373        <th style="width:175px">
374          Type
375        </th>
376        <th style="width:175px">
377          Required fields
378        </th>
379        <th style="width:175px">
380          Optional fields
381        </th>
382        <th>
383          Notes
384        </th>
385      </tr>
386
387      <tr>
388        <td>
389          SHORT_TEXT
390        </td>
391        <td>
392          Short text
393        </td>
394        <td>
395          Icon<br>
396          Short title
397        </td>
398        <td>
399          Exactly one of Icon/Short title is expected to be shown if either or
400          both are provided.
401        </td>
402      </tr>
403
404      <tr>
405        <td>
406          ICON
407        </td>
408        <td>
409          Icon
410        </td>
411        <td>
412        </td>
413        <td>
414          Used when text is not needed.The icon is expected to be single-color,
415          and may be tinted by the watch face.
416        </td>
417      </tr>
418
419      <tr>
420        <td>
421          RANGED_VALUE
422        </td>
423        <td>
424          Value<br>
425          Min value<br>
426          Max value
427        </td>
428        <td>
429          Icon<br>
430          Short text<br>
431          Short title
432        </td>
433        <td>
434          Optional fields are not guaranteed to be displayed.
435        </td>
436      </tr>
437
438      <tr>
439        <td>
440          LONG_TEXT
441        </td>
442        <td>
443          Long text
444        </td>
445        <td>
446          Long title<br>
447          Icon<br>
448          Small image
449        </td>
450        <td>
451          Title is expected to be shown if provided.
452        </td>
453      </tr>
454
455      <tr>
456        <td>
457          SMALL_IMAGE
458        </td>
459        <td>
460          Small image
461        </td>
462        <td>
463        </td>
464        <td>
465          A small image has one of two styles: <em>photo style</em> or <em>icon
466          style</em>. Photo style means it should fill the space and can be
467          cropped; icon style means it should not be cropped and may be padded.
468        </td>
469      </tr>
470
471      <tr>
472        <td>
473          LARGE_IMAGE
474        </td>
475        <td>
476          Large image
477        </td>
478        <td>
479        </td>
480        <td>
481          This image is expected to be large enough to fill the watch face.
482        </td>
483      </tr>
484    </table>
485
486    <p>
487      In addition, the following two types have no fields. These two types may
488      be sent for any complication slot and do not need to be included in a
489      list of supported types:
490    </p>
491
492    <table>
493      <tr>
494        <th style="width:175px">
495          Type
496        </th>
497        <th style="width:175px">
498          Required fields
499        </th>
500        <th style="width:175px">
501          Optional fields
502        </th>
503        <th>
504          Notes
505        </th>
506      </tr>
507
508      <tr>
509        <td>
510          NOT_CONFIGURED
511        </td>
512        <td>
513          None
514        </td>
515        <td>
516          None
517        </td>
518        <td>
519          Sent when a provider has not yet been chosen for a complication.
520        </td>
521      </tr>
522
523      <tr>
524        <td>
525          EMPTY
526        </td>
527        <td>
528          None
529        </td>
530        <td>
531          None
532        </td>
533        <td>
534          Sent by a provider when there is no data to display in a
535          complication, or sent by the system when nothing should be shown in a
536          complication.
537        </td>
538      </tr>
539    </table>
540
541    <h2 id="using_fields_for_complication_data">
542      Using Fields for Complication Data
543    </h2>
544
545    <p>
546      The fields of a <code>ComplicationData</code> object have different
547      functions. For example, a text field contains the primary data while a
548      title field is descriptive; a step count complication might have a text
549      field value of "2,543" with a title field value of "steps."
550    </p>
551
552    <p>
553      The following table contains descriptions of the fields in a
554      <code>ComplicationData</code> object. The fields may or may not be
555      populated, depending on the complication type.
556    </p>
557
558    <table>
559      <tr>
560        <th style="width:175px">
561          Field
562        </th>
563        <th>
564          Description
565        </th>
566      </tr>
567
568      <tr>
569        <td>
570          Short text
571        </td>
572        <td>
573          Primary text field for small complications. Should not exceed 7
574          characters.
575        </td>
576      </tr>
577
578      <tr>
579        <td>
580          Icon
581        </td>
582        <td>
583          A single-color image representing the data or the source of the data.
584          Must be tintable. Vector drawables are recommended for this field.
585        </td>
586      </tr>
587
588      <tr>
589        <td>
590          Short title
591        </td>
592        <td>
593          Descriptive field for small complications. Should not exceed 7
594          characters. May only be meaningful in combination with <em>Short
595          text</em>.
596        </td>
597      </tr>
598
599      <tr>
600        <td>
601          Long text
602        </td>
603        <td>
604          Primary data field for large, text-based complications.
605        </td>
606      </tr>
607
608      <tr>
609        <td>
610          Long title
611        </td>
612        <td>
613          Descriptive field for large, text-based complications. May only be
614          meaningful in combination with <em>Long text</em>.
615        </td>
616      </tr>
617
618      <tr>
619        <td>
620          Value
621        </td>
622        <td>
623          A numerical (float) representation of the data. Expected to be
624          depicted relative to the bounds the <em>Min value</em> and <em>Max
625          value</em> fields (but not required to be between those bounds).
626        </td>
627      </tr>
628
629      <tr>
630        <td>
631          Min value
632        </td>
633        <td>
634          The lower bound for the range within which <em>Value</em> should be
635          depicted. Only meaningful in combination with <em>Value</em> and
636          <em>Max value</em>.
637        </td>
638      </tr>
639
640      <tr>
641        <td>
642          Max value
643        </td>
644        <td>
645          The upper bound for the range within which <em>value</em> should be
646          depicted. Only meaningful in combination with <em>Value</em> and
647          <em>Min value</em>.
648        </td>
649      </tr>
650
651      <tr>
652        <td>
653          Small image
654        </td>
655        <td>
656          A small image to represent the data or the source of the data. May be
657          full color. Not expected to fill the entire watch face.
658        </td>
659      </tr>
660
661      <tr>
662        <td>
663          Large image
664        </td>
665        <td>
666          An image with sufficient resolution to fill the watch face. May be
667          full color.
668        </td>
669      </tr>
670    </table>
671
672    <h3 id="providing_time-dependent_values">
673      Providing time-dependent values
674    </h3>
675
676    <p>
677      Some complications need to display a value that relates to the current
678      time. Examples include the current date, the time until the next meeting,
679      or the time in another time zone.
680    </p>
681
682    <p>
683      Providers of such data should not need to update a complication every
684      second/minute to keep those values up to date. Instead, they can specify
685      the values as relative to the current date or time.
686    </p>
687
688    <p>
689      Providers can use the builders in the <code>ComplicationText</code> class
690      to create these time-dependent values.
691    </p>
692
693    <h2 id="api_additions">
694      API Additions
695    </h2>
696
697    <p>
698      The Complications API includes new classes in the Wearable Support
699      Library. For more information, download the <a href=
700      "{@docRoot}wear/preview/start.html#get_the_preview_reference_documentation">
701      Android Wear 2.0 Preview Reference</a>.
702    </p>
703
704    <ul>
705      <li>
706        <code>ComplicationData</code>
707        <ul>
708          <li>Parcelable (using a Bundle internally); immutable
709          </li>
710
711          <li>Represents all types of complication data
712          </li>
713
714          <li>Includes a Builder for instance creation
715          </li>
716        </ul>
717      </li>
718
719      <li>
720        <code>ComplicationText</code>
721        <ul>
722          <li>Used to supply text-based values in a
723          <code>ComplicationData</code> object
724          </li>
725
726          <li>Includes options for time-dependent values, whose text value
727          depends on the current time
728          </li>
729        </ul>
730      </li>
731
732      <li>
733        <code>ComplicationProviderService</code>
734        <ul>
735          <li>Extends <code>Service</code> and includes callback methods to
736          respond to the complication system
737          </li>
738
739          <li>Callback methods are all called on the main thread
740          </li>
741        </ul>
742      </li>
743
744      <li>
745        <code>ComplicationManager</code>
746        <ul>
747          <li>A wrapper for the complication manager service, for use by
748          providers
749          </li>
750
751          <li>Allows providers to send complication data to the system
752          </li>
753        </ul>
754      </li>
755
756      <li>
757        <code>ProviderChooserIntent</code>
758        <ul>
759          <li>Non-instantiable utility class
760          </li>
761
762          <li>Includes a method that a watch face can call for starting a
763          provider chooser (to allow a user to configure complications)
764          </li>
765        </ul>
766      </li>
767
768      <li>
769        <code>ProviderInfoRetriever</code>
770        <ul>
771          <li>Can be used (by watch face configuration activities) to retrieve
772          the current data provider information (app, provider name, icon) for
773          all complications belonging to a watch face
774          </li>
775        </ul>
776      </li>
777
778      <li>
779        <code>ProviderUpdateRequester</code>
780        <ul>
781          <li>Can be used by data provider apps to trigger calls to
782          <code>onComplicationUpdated</code> in their provider service, to
783          enable the push of updates
784          </li>
785        </ul>
786      </li>
787    </ul>
788
789    <p>
790      Additionally, the <code>WatchFaceService.Engine</code> class contains the
791      following new methods:
792    </p>
793
794    <ul>
795      <li>
796        <code>setActiveComplications</code>
797        <ul>
798          <li>Should be called by the watch face to tell the
799          <code>ComplicationManager</code> object what complication slots are
800          available and what types are supported
801          </li>
802        </ul>
803      </li>
804
805      <li>
806        <code>onComplicationDataUpdate</code>
807        <ul>
808          <li>Called by the <code>ComplicationManager</code> object to send
809          complication data to the watch face
810          </li>
811        </ul>
812      </li>
813    </ul>
814