am ea15366a: am 26e21055: Merge "docs: Creating Custom Watch Faces training class." into lmp-docs

          </li>

        </ul>

      </li>

      <li class="nav-section">

        <div class="nav-section-header">

          <a href="<?cs var:toroot ?>training/wearables/watch-faces/index.html"

             description="How to create custom watch faces for wearables."

            >Creating Custom Watch Faces</a>

        </div>

        <ul>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/designing.html">Designing Watch Faces</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/service.html">Building a Watch Face Service</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/drawing.html">Drawing Watch Faces</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/information.html">Showing Information in Watch Faces</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/configuration.html">Providing Configuration Activities</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/issues.html">Addressing Common Issues</a>

          </li>

          <li>

            <a href="<?cs var:toroot ?>training/wearables/watch-faces/performance.html">Optimizing Performance and Battery Life</a>

          </li>

        </ul>

      </li>

      <li>

        <a href="<?cs var:toroot ?>training/articles/wear-location-detection.html"

           description=

page.title=Providing Configuration Activities

@jd:body

<div id="tb-wrapper">

<div id="tb">

<h2>This lesson teaches you to</h2>

<ol>

  <li><a href="#Intent">Specify an Intent for Configuration Activities</a></li>

  <li><a href="#WearableActivity">Create a Wearable Configuration Activity</a></li>

  <li><a href="#CompanionActivity">Create a Companion Configuration Activity</a></li>

</ol>

<h2>You should also read</h2>

<ul>

  <li><a href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a></li>

</ul>

</div>

</div>

<p>When users install a handheld app that contains a <a

href="{@docRoot}training/wearables/apps/index.html">wearable app</a> with watch faces, these

watch faces become available in the Android Wear companion app on the companion device and in

the watch face picker on the wearable. Users can choose the active watch face for their wearable

device by selecting it on the companion app or using the watch face picker on the wearable

device.</p>

<p>Some watch faces support configuration parameters to let users customize how the watch face

looks and behaves. For example, some watch faces let users pick a custom background color, and

watch faces that tell time for two different time zones can let users select which time zones

they are interested in.</p>

<p>Watch faces that support configuration parameters can let users customize a watch face using

an activity in the wearable app, an activity on the handheld app, or both. Users can start the

wearable configuration activity on the wearable device, and they can start the companion

configuration activity from the Android Wear companion app.</p>

<p>The digital watch face from the <em>WatchFace</em> sample in the Android SDK demonstrates how to

implement handheld and wearable configuration activities and how to update a watch face in

response to configuration changes. This sample is located in the

<code>android-sdk/samples/android-21/wearable/WatchFace</code> directory.</p>

<h2 id="Intent">Specify an Intent for Configuration Activities</h2>

<p>If your watch face includes configuration activities, add the following metadata entries to

the service declaration in the manifest file of the wearable app:</p>

<pre>

<service

    android:name=".DigitalWatchFaceService" ... />

    <!-- companion configuration activity -->

    <meta-data

        android:name=

           "com.google.android.wearable.watchface.companionConfigurationAction"

        android:value=

           "com.example.android.wearable.watchface.CONFIG_DIGITAL" />

    <!-- wearable configuration activity -->

    <meta-data

        android:name=

           "com.google.android.wearable.watchface.wearableConfigurationAction"

        android:value=

           "com.example.android.wearable.watchface.CONFIG_DIGITAL" />

    ...

</service>

</pre>

<p>Provide values for these entries that are preceded by the package name of your app.

Configuration activities register intent filters for this intent, and the system fires this

intent when users want to configure your watch face.</p>

<p>If your watch face only includes a companion or a wearable configuration activity, you only

need to include the corresponding metadata entry from the example above.</p>

<h2 id="WearableActivity">Create a Wearable Configuration Activity</h2>

<p>Wearable configuration activities provide a limited set of customization choices for a

watch face, because complex menus are hard to navigate on smaller screens. Your wearable

configuration activity should provide binary choices and just a few selections to customize

the main aspects of your watch face.</p>

<p>To create a wearable configuration activity, add a new activity to your wearable app module

and declare the following intent filter in the manifest file of the wearable app:</p>

<pre>

<activity

    android:name=".DigitalWatchFaceWearableConfigActivity"

    android:label="@string/digital_config_name">

    <intent-filter>

        <action android:name=

            "com.example.android.wearable.watchface.CONFIG_DIGITAL" />

        <category android:name=

       "com.google.android.wearable.watchface.category.WEARABLE_CONFIGURATION" />

        <category android:name="android.intent.category.DEFAULT" />

    </intent-filter>

</activity>

</pre>

<p>The name of the action in this intent filter must match the intent name you defined in

<a href="#Intent">Specify an Intent for Configuration Activities</a>.</p>

<p>In your configuration activity, build a simple UI that provides selections for users to

customize your watch face. When users make a selection, use the <a

href="{@docRoot}training/wearables/data-layer/index.html">Wearable Data Layer API</a> to

communicate the configuration change to the watch face activity.</p>

<p>For more details, see the <code>DigitalWatchFaceWearableConfigActivity</code> and

<code>DigitalWatchFaceUtil</code> classes in the <em>WatchFace</em> sample.</p>

<h2 id="CompanionActivity">Create a Companion Configuration Activity</h2>

<p>Companion configuration activities give users access to the full set of configuration choices

for a watch face, because it is easier to interact with complex menus on the larger screen of

a handheld device. For example, a configuration activity on a handheld device enables you to

present users with elaborate color pickers to select the background color of a watch face.</p>

<p>To create a companion configuration activity, add a new activity to your handheld app module and

declare the same intent filter for this activity as the one in <a href="#WearableActivity">Create

a Wearable Configuration Activity</a>.</p>

<p>In your configuration activity, build a UI that provides options to customize all the

configurable elements of your watch face. When users make a selection, use the <a

href="{@docRoot}training/wearables/data-layer/index.html">Wearable Data Layer API</a> to

communicate the configuration change to the watch face activity.</p>

<p>For more details, see the <code>DigitalWatchFaceCompanionConfigActivity</code> class in the

<em>WatchFace</em> sample.</p>

<h2 id="Listener">Create a Listener Service in the Wearable App</h2>

<p>To receive updated configuration parameters from the configuration activities, create a

service that implements the <code>WearableListenerService</code> interface from the <a

href="{@docRoot}training/wearables/data-layer/index.html">Wearable Data Layer API</a> in your

wearable app. Your watch face implementation can redraw the watch face when the configuration

parameters change.</p>

<p>For more details, see the <code>DigitalWatchFaceConfigListenerService</code> and

<code>DigitalWatchFaceService</code> classes in the <em>WatchFace</em> sample.</p>

page.title=Designing Watch Faces

@jd:body

<div id="tb-wrapper">

<div id="tb">

<h2>This lesson teaches you to</h2>

<ol>

  <li><a href="#DesignGuidelines">Conform to the Design Guidelines</a></li>

  <li><a href="#ImplementationStrategy">Create an Implementation Strategy</a></li>

</ol>

<h2>You should also read</h2>

<ul>

  <li><a href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a></li>

</ul>

</div>

</div>

<p>Similar to the process of designing a traditional watch face, creating one for

Android Wear is an exercise in visualizing time clearly. Android Wear devices

provide advanced capabilities for watch faces that you can leverage in your designs, such as

vibrant colors, dynamic backgrounds, animations, and data integration. However, there are

also many design considerations that you must take into account.</p>

<p>This lesson provides a summary of the design considerations for watch faces and general

guidelines to get started implementing a design. For more information, read the <a

href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a> design guide.</p>

<h2 id="DesignGuidelines">Conform to the Design Guidelines</h2>

<p>As you plan the look of your watch face and what kind of information it should present

to users, consider these design guidelines:</p>

<div style="float:right;margin-top:-5px;margin-left:20px">

  <img src="{@docRoot}training/wearables/watch-faces/images/Render_Next.png"

       width="200" height="195" alt="" style="margin-right:5px"/><br>

  <img src="{@docRoot}training/wearables/watch-faces/images/Render_Interactive.png"

       width="200" height="195" alt="" style="margin-right:5px"/>

  <p class="img-caption" style="margin-top:0px;margin-left:10px">

  <strong>Figure 1.</strong> Example watch faces.</p>

</div>

<dl>

<dt><em>Plan for square and round devices</em></dt>

<dd>Your design should work for both square and round Android Wear devices, including devices with

<a href="{@docRoot}training/wearables/ui/layouts.html#same-layout">insets on the bottom of the

screen</a>.</dd>

<dt><em>Support all display modes</em></dt>

<dd>Your watch face should support ambient mode with limited color and interactive mode with

full color and animations.</dd>

<dt><em>Optimize for special screen technologies</em></dt>

<dd>In ambient mode, your watch face should keep most pixels black. Depending on the screen

technology, you may need to avoid large blocks of white pixels, use only black and white, and

disable anti-aliasing.</dd>

<dt><em>Accomodate system UI elements</em></dt>

<dd>Your design should ensure that system indicators remain visible and that users can still

read the time when notification cards appear on the screen.</dd>

<dt><em>Integrate data</em></dt>

<dd>Your watch face can leverage sensors and cellular connectivity on the companion mobile

device to show user data relevant to the context, such as the weather for the day or their next

calendar event.</dd>

<dt><em>Provide configuration options</em></dt>

<dd>You can let users configure some aspects of your design (like colors and sizes) on the

wearable or on the Android Wear companion app.</dd>

</dl>

<p>For more information about designing watch faces for Android Wear, see the <a

href="{@docRoot}design/wear/watchfaces.html">Watch Faces for Android Wear</a> design guide.</p>

<h2 id="ImplementationStrategy">Create an Implementation Strategy</h2>

<p>After you finalize the design for your watch face, you need to determine how to obtain any

necessary data and draw the watch face on the wearable device. Most implementations

consist of the following components:</p>

<ul>

<li>One or more background images</li>

<li>Application code to retrieve the required data</li>

<li>Application code to draw text and shapes over the background images</li>

</ul>

<p>You typically use one background image in interactive mode and a different background image

in ambient mode. The background in ambient mode is often completely black. Background images for

Android Wear devices with a screen density of hdpi should be 320 by 320 pixels in size to fit

both square and round devices. The corners of the background image are not visible on round

devices. In your code, you can detect the size of the device screen and scale down the background

image if the device has a lower resolution than your image. To improve performance, you should

scale the background image only once and store the resulting bitmap.</p>

<p>You should run the application code to retrieve contextual data only as often as required

and store the results to reuse the data every time you draw the watch face. For example, you

don't need to fetch weather updates every minute.</p>

<p>To increase battery life, the application code that draws your watch face in ambient mode

should be relatively simple. You usually draw outlines of shapes using a limited set of colors

in this mode. In interactive mode, you can use full color, complex shapes, gradients, and

animations to draw your watch face.</p>

<p>The remaining lessons in this class show you how to implement watch faces in detail.</p>