Added _index.html and screenshots to all samples.

Bug 15814554

Change-Id: Icdb08c5cc39f97c88674e4177b88b47adce59127

samples/wearable/AgendaData/_index.html

@@ -0,0 +1,17 @@
+<p><b>About:</b> Syncs calendar events to your wearable at the press of a button, using the Wearable
+DataApi to transmit data such as event time, description, and background image. The DataItems can be
+deleted individually via an action on the event notifications, or all at once via a button on the
+companion. When deleted using the notification action, a ConfirmationActivity is used to indicate
+success or failure.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the AgendaData application on the companion.</p>
+<p><b>Wearable APIs used:</b> DataApi, NodeApi, WearableListenerService, ConfirmationActivity</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/companion_agenda_data.png" alt="Companion AgendaData" width="216"
+             height="384">
+        <img src="screenshots/dummy_calendar_event.png" alt="Dummy Calendar Event" width="160"
+             height="160">
+        <figcaption>Companion app and wearable app communicate with each other.</figcaption>
+    </figure>
+</p>

samples/wearable/DataLayer/_index.html

@@ -0,0 +1,15 @@
+<p><b>About:</b> You can cause the wearable to start an activity by pressing a button in the
+companion app UI. You can also take a picture on the companion device, which will be transmitted as
+an Asset for display on the wearable.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the DataLayer application on the companion.</p>
+<p><b>Wearable APIs used:</b> DataApi, MessageApi, NodeApi, WearableListenerService</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/phone_image.png" alt="Phone Image" width="216" height="384">
+        <img src="screenshots/wearable_background_image.png" alt="Wearable Background Image"
+            width="140" height="140">
+        <figcaption>Image captured on the phone, followed by the same image on the wearable.
+        </figcaption>
+    </figure>
+</p>

samples/wearable/DelayedConfirmation/Application/_index.html

@@ -1,5 +0,0 @@
-<p>Demonstrates how to create a DelayedConfirmationView in your wearable app. In this sample,
-pressing a button on the phone app sends a message to the wearable to start a simple activity. This
-activity displays a DelayedConfirmationView that starts when the user presses "Start Timer." Then,
-callbacks are implemented on both the wearable and phone to show when the timer is selected or
-finishes.</p>

samples/wearable/DelayedConfirmation/_index.html

@@ -0,0 +1,28 @@
+<p><b>About:</b> Demonstrates how to create a DelayedConfirmationView in your wearable app. In this
+sample, pressing a button on the phone app sends a message to the wearable to start a simple
+activity. This activity displays a DelayedConfirmationView that starts when the user presses "Start
+Timer." Then, callbacks are implemented on both the wearable and phone to show when the timer is
+selected or finishes. The activity on the wearable uses BoxInsetLayout to automatically apply
+appropriate margins based on whether the display is square or circular.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the DelayedConfirmation application on the companion and
+pressing "Start".</p>
+<p><b>Wearable APIs used:</b> MessageApi, NodeApi, WearableListenerService, BoxInsetLayout,
+DelayedConfirmationView</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/delayed_confirmation_box_inset_top.png" alt='DelayedConfirmation view
+            in BoxInsetLayout with layout_box="top"' width="160" height="160">
+        <img src="screenshots/delayed_confirmation_box_inset_all.png" alt='DelayedConfirmation view
+            in BoxInsetLayout with layout_box="all"' width="160" height="160">
+        <img src="screenshots/delayed_confirmation_notification.png" alt="DelayedConfirmationView
+            selected notification" width="140" height="140">
+        <img src="screenshots/companion_delayed_confirmation.png" alt="Timer Selected toast on
+            companion" width="216" height="384">
+        <figcaption>From left to right: DelayedConfirmationView in a BoxInsetLayout with
+            layout_box="top", the same view but with layout_box="all", the notification that shows
+            up on the wearable when you select the timer before it finishes, and the toast generated
+            on the phone at the same time. Note: normally you would make the circle's background the
+            same color as the box background so users won't see the box's edges.</figcaption>
+    </figure>
+</p>

samples/wearable/ElizaChat/_index.html

@@ -1,19 +1,33 @@
-<p>This sample is a phone application that provides a chat experience in which
+<p><b>About: </b>
-users can respond to messages with a quick voice response. New messages create
+This sample is a phone application that provides a chat experience in which users can respond to
-a notification with a "Reply" action. The notification is bridged from phone
+messages with a quick voice response. New messages create a notification with a "Reply" action.
-to wearable, and selecting the "Reply" action on the wearable opens the voice
+The notification is bridged from phone to wearable, and selecting the "Reply" action on the
-transcription UI allowing the user to speak a response.</p>
+wearable opens the voice transcription UI allowing the user to speak a response.</p>
 
-<p>To keep the example simple and self-contained, instead of a real chat
+<p>To keep the example simple and self-contained, instead of a real chat application (which would
-application (which would require a server or a peer-to-peer connection), the
+require a server or a peer-to-peer connection), the conversation is conducted with an chat bot on
-conversation is conducted with an chat bot on the phone. Each time the bot
+the phone. Each time the bot responds, the phone app updates the notification and allows the user
-responds, the phone app updates the notification and allows the user to write
+to write back. This sample is primarily intended to demonstrate the voice-reply capabilities
-back. This sample is primarily intended to demonstrate the voice-reply
+provided by the Android Wear notification API.</p>
-capabilities provided by the Android Wear notification API.</p>
 
-<p>When using the emulator you can type a response instead of speaking it
+<p>When using the emulator you can type a response instead of speaking it aloud. To allow typed
-aloud. To allow typed responses, ensure that your emulator image has the
+responses, ensure that your emulator image has the "hardware keyboard present" option enabled.
-"hardware keyboard present" option enabled. After typing your message into
+After typing your message into the emulator window, hit the enter key and wait a few seconds for
-the emulator window, hit the enter key and wait a few seconds for your
+your message to be sent.</p>
-message to be sent.</p>
 
+
+<p><b>How to run:</b> Install the Application APK on the companion and run it. A notification will
+automatically be bridged onto the wearable, with a "Reply" action.</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/companion_eliza_chat.png" alt="Eliza chat when opened on companion"
+             width="216" height="384">
+        <img src="screenshots/wearable_eliza_notification.png" alt="Initial notification on
+            wearable" width="140" height="140">
+        <img src="screenshots/wearable_voice_reply.png" alt="Initial notification on
+            wearable" width="140" height="140">
+        <img src="screenshots/companion_eliza_chat_response.png" alt="Response received on
+            companion" width="216" height="384">
+        <figcaption>The progressing stages of a chat with Eliza.</figcaption>
+    </figure>
+</p>

samples/wearable/EmbeddedApp/_index.html

@@ -0,0 +1,11 @@
+<p><b>About:</b> This simple app demonstrates how to embed a wearable app into a phone app.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the EmbeddedApp Sample application on the companion.</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/phone_app.png" alt="Phone app" width="216" height="384">
+        <img src="screenshots/embedded_wearable_app.png" alt="Embedded wearable app" width="140"
+             height="140">
+        <figcaption>The sample phone app and embedded wearable app.</figcaption>
+    </figure>
+</p>

samples/wearable/FindMyPhone/_index.html

@@ -0,0 +1,21 @@
+<p><b>About:</b> This sample application notifies you when you may have left your phone behind
+(specifically, when your companion and wearable disconnect). If you have misplaced your phone, but
+it is still connected to your wearable, you can also start an activity on the wearable to sound an
+alarm on your phone.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. A notification will automatically appear on the wearable when the wearable and companion
+disconnect. To start the FindMyPhone activity on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+"Find My Phone" from the submenu.</p>
+<p><b>Wearable APIs used:</b> DataApi, WearableListenerService</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/find_my_phone_notification.png" alt="Forgetting something?"
+             width="140" height="140">
+        <img src="screenshots/find_my_phone_activity.png" alt="Tap to sound an alarm on phone"
+             width="140" height="140">
+        <figcaption>The notification that appears when your wearable and companion disconnect,
+            followed by the wearable FindMyPhone activity (which just creates a notification).
+        </figcaption>
+    </figure>
+</p>

samples/wearable/Flashlight/_index.html

@@ -0,0 +1,12 @@
+<p><b>About:</b> Wearable activity that uses your wearable screen as a flashlight. There is also
+a party-mode option, if you want to make things interesting.</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+"Flashlight" from the submenu.</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/flashlight.png" alt="Flashlight" width="140" height="140">
+        <img src="screenshots/party_mode.gif" alt="Party mode!" width="140" height="140">
+        <figcaption>Plain flashlight, followed by party-mode.</figcaption>
+    </figure>
+</p>

samples/wearable/Geofencing/_index.html

@@ -0,0 +1,17 @@
+<p><b>About:</b> When a user enters the vicinity of the Android building (B44) or the Yerba Buena
+Gardens near the Moscone center in San Francisco, a notification silently appears on his/her
+wearable with an option to check in. This notification automatically disappears when he/she leaves
+the area, and reappears the next time he/she is at one of these locations.</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Then, start "Android Wear Geofencing Example Application" on the companion. You will
+automatically be notified on the wearable if you enter one of the two specified areas, assuming
+you have your phone on you.</p>
+<p><b>Wearable APIs used:</b> DataApi, WearableListenerService</p>
+<p><b>Other APIs used:</b> Play Services API used for Geofencing (Geofence and LocationClient)</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/android_building_check_in.png" alt="Check in?" width="160"
+             height="160">
+        <figcaption>Notification that appears when you arrive at the Android building.</figcaption>
+    </figure>
+</p>

samples/wearable/GridViewPager/_index.html

@@ -0,0 +1,12 @@
+<p><b>About:</b> Demonstrates how to implement a GridViewPager in your wearable app.</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+"GridViewPager Sample" from the submenu.</p>
+<p><b>Wearable APIs used:</b> GridViewPager, CardFragment, FragmentGridPagerAdapter,
+ImageReference</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/grid_view_pager.gif" alt="GridViewPager" width="140" height="140">
+        <figcaption>Part of the sample in action.</figcaption>
+    </figure>
+</p>

samples/wearable/JumpingJack/_index.html

@@ -0,0 +1,10 @@
+<p><b>About:</b> Uses the Gravity sensor to count how many jumping jacks you've performed.</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+    "Jumping Jack" from the submenu.</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/jumping_jack.gif" alt="JumpingJack" width="140" height="140">
+        <figcaption>JumpingJack has a simple interface.</figcaption>
+    </figure>
+</p>

samples/wearable/Notifications/Application/_index.html

@@ -1,24 +0,0 @@
-<p>This sample phone application provides a showcase of available notification
-styles and demonstrates various features of the Android Wear notifications
-API. Running the sample on your phone allows you to select between various
-notification styles and to see how these notifications are displayed, both in
-a phone's notification shade and on the wearable. The sample allows you to
-create the following types of notifications:</p>
-<ul>
-<li>Basic notification</li>
-<li>"Inbox style" notification: multiple lines of text</li>
-<li>"Big picture style" notification: a full-screen background image for the
-card on the wearable</li>
-<li>"Big text style" notification: a tall card that is collapsed and can be
-expanded with a tap</li>
-<li>"Big action style" notification: tapping anywhere on the card triggers the
-notification content intent</li>
-<li>Notification with multiple pages: swipe horizontally to view the second
-page</li>
-<li>Bundled Notifications: a stack of cards that can be individually
-expanded</li>
-</ul>
-<p>This sample also allows you to toggle other attributes for each of these
-notification types, including whether a content intent or action are included,
-and whether the notification is marked as "local only," indicating that it
-should not be bridged between devices.</p>

samples/wearable/Notifications/_index.html

@@ -0,0 +1,76 @@
+<p><b>About:</b> This sample application provides a showcase of available notification styles and
+demonstrates various features of the Android Wear notifications API. Running the sample on your
+companion allows you to select between various notification styles and to see how these
+notifications are displayed, both in a phone's notification shade and on the wearable. The companion
+application allows you to create the following types of notifications:</p>
+<ul>
+    <li>Basic notification</li>
+    <li>"Inbox style" notification: multiple lines of text</li>
+    <li>"Big picture style" notification: a full-screen background image for the card on the
+        wearable</li>
+    <li>"Big text style" notification: a tall card that is collapsed and can be expanded with a
+        tap</li>
+    <li>"Big action style" notification: tapping anywhere on the card triggers the notification
+        content intent</li>
+    <li>Notification with multiple pages: swipe horizontally to view the second page</li>
+    <li>Bundled Notifications: a stack of cards that can be individually expanded</li>
+</ul>
+<p>This sample also allows you to toggle other attributes for each of these notification types,
+including whether a content intent or action are included, and whether the notification is marked as
+"local only," indicating that it should not be bridged between devices.</p>
+<p>You can also run a separate APK on your wearable for even more customizable notifications. The
+wearable notification styles include:</p>
+<ul>
+    <li>A notification drawn with a custom display Activity, using setDisplayIntent</li>
+    <li>A notification styled using SpannableStrings</li>
+    <li>A notification page with bottom-aligned text</li>
+    <li>A notification with a "content icon"</li>
+</ul>
+<p><b>How to run:</b> Install the Application APK on the companion, and/or the Wearable APK on the
+wearable. Start the sample by running the Wearable Notifications application on the companion, or
+by starting the Wearable Notifications application on the wearable. To do the latter, go to the
+voice menu - either by saying Ok Google or tapping the home screen - and select the "Start..."
+option. Then, select "Wearable Notifications" from the submenu.</p>
+<p><b>Wearable APIs used:</b> Notification.WearableExtender, Notification.BigTextStyle,
+Notification.BigPictureStyle (note that NotificationCompat, rather than Notification, is used on the
+companion side in order to be compatible with older versions of Android).</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/companion-multiple-page.png" alt="Multiple page" width="216"
+             height="384">
+        <img src="screenshots/multiple-page1.png" alt="Page 1" width="140" height="140">
+        <img src="screenshots/multiple-page2.png" alt="Page 2" width="140" height="140">
+        <img src="screenshots/companion-bottom-aligned.png" alt="Bottom aligned - companion"
+             width="216" height="384">
+        <img src="screenshots/bottom-aligned.png" alt="Bottom aligned - wearable" width="140"
+             height="140">
+        <img src="screenshots/companion-content-action.png" alt="Content action - companion"
+             width="216" height="384">
+        <img src="screenshots/content-action.png" alt="Content action - wearable" width="140"
+             height="140">
+        <img src="screenshots/content-action2.png" alt="Content action 2 - wearable" width="140"
+             height="140">
+        <img src="screenshots/companion-bundle.png" alt="Bundle aligned - companion" width="216"
+             height="384">
+        <img src="screenshots/bundle.png" alt="Bundle - wearable" width="140" height="140">
+        <figcaption>Notifications selected from companion app.</figcaption>
+    </figure>
+    <figure>
+        <img src="screenshots/basic-menu.png" alt="Select 'Basic example'" width="140"
+             height="140">
+        <img src="screenshots/basic.png" alt="Basic example" width="140" height="140">
+        <img src="screenshots/content-icon-menu.png" alt="Select 'Content icon example'" width="140"
+             height="140">
+        <img src="screenshots/content-icon1.png" alt="Content icon 1" width="140" height="140">
+        <img src="screenshots/content-icon2.png" alt="Content icon 2" width="140" height="140">
+        <img src="screenshots/content-icon3.png" alt="Content icon 3" width="140" height="140">
+        <img src="screenshots/content-icon4.png" alt="Content icon 4" width="140" height="140">
+        <img src="screenshots/display-intent-menu.png" alt="Select 'Display intent example'"
+             width="140" height="140">
+        <img src="screenshots/display-intent.png" alt="Display intent" width="140" height="140">
+        <img src="screenshots/stylized-menu.png" alt="Select 'Stylized text example'" width="140"
+             height="140">
+        <img src="screenshots/stylized.png" alt="Stylized text example" width="140" height="140">
+        <figcaption>Notifications selected from wearable app.</figcaption>
+    </figure>
+</p>

samples/wearable/Quiz/Application/_index.html

@@ -1,12 +0,0 @@
-<p>This sample provides an example of an app that uses Google Play Services Wearable Data APIs to
-communicate between applications on a phone and a paired wearable device. Users can create quiz
-questions on the phone, each of which has a DataItem associated with it. These DataItems are then
-received on the wearable, which then displays them as notifications. Each notification contains the
-question as the first page, followed by answers as actions. When an answer is selected, the
-corresponding question's DataItem is updated, which allows the phone application to update the
-status of the question (i.e. did the user answer it correctly or not) and prompt the next question.
-</p>
-<p>At the end of the quiz, the sample uses the Google Play Services Wearable Message APIs to create
-an end-of-quiz report notification on the wearable, with an option to reset the quiz (by sending a
-message back to the phone).
-</p>

samples/wearable/Quiz/_index.html

@@ -0,0 +1,25 @@
+<p><b>About:</b> This sample uses Google Play Services Wearable Data APIs to communicate between
+applications on a phone and a paired wearable device. Users can create quiz questions on the phone,
+each of which has an associated DataItem. These DataItems are then received on the wearable, which
+displays them as notifications. Each notification contains the question as the first page, followed
+by answers as actions. When an answer is selected, the corresponding question's DataItem is updated,
+which allows the phone application to update the status of the question (i.e. did the user answer it
+correctly or not) and prompt the next question.
+</p>
+<p>At the end of the quiz, the sample uses the Google Play Services Wearable Message APIs to create
+an end-of-quiz report notification on the wearable, with an option to reset the quiz (by sending a
+message back to the phone).</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the Quiz application on the companion.</p>
+<p><b>Wearable APIs used:</b> DataApi, MessageApi, NodeApi, WearableListenerService</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/companion_quiz.png" alt="Quiz on companion" width="216" height="384">
+        <img src="screenshots/wearable_quiz.png" alt="Wearable Quiz" width="160" height="160">
+        <img src="screenshots/wearable_quiz_answer.png" alt="Answering..." width="160" height="160">
+        <img src="screenshots/companion_quiz_correct_status.png" alt="Quiz on companion" width="216"
+             height="384">
+        <img src="screenshots/wearable_quiz_report.png" alt="End report" width="160" height="160">
+        <figcaption>Sample quiz progression involving a clearly unbiased question.</figcaption>
+    </figure>
+</p>

samples/wearable/RecipeAssistant/_index.html

@@ -1,8 +1,19 @@
-<p>This phone application uses the enhanced notifications API to display
+<p><b>About:</b> This phone application uses the enhanced notifications API to display recipe
-recipe instructions using paged notifications. After starting the application
+instructions using paged notifications. After starting the application on your phone, you can browse
-on your phone, you can browse from a short list of recipes and select one to
+from a short list of recipes and select one to view. Each recipe is broken down into a number of
-view. Each recipe is broken down into a number of steps; when ready, you can
+steps; when ready, you can click on the START action in the action bar to send the steps to the
-click on the START action in the action bar to send the steps to the wearable.
+wearable. On the wearable device, the steps are displayed as a multi-page notification, with one
-On the wearable device, the steps are displayed as a multi-page notification,
+page for each step in the recipe.</p>
-with one page for each step in the recipe.</p>
+<p><b>How to run:</b> Install the Application APK on the companion and run it like any other
-
+Android app.</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/recipe_assistant_guac.png" alt="Super simple guacamole" width="216"
+             height="384">
+        <img src="screenshots/guac_notification.png" alt="Guacamole wearable notification"
+             width="160" height="160">
+        <img src="screenshots/guac_notification_step1.png" alt="Guacamole step 1" width="160"
+             height="160">
+        <figcaption>Making guacamole!</figcaption>
+    </figure>
+</p>

samples/wearable/SkeletonWearableApp/_index.html

@@ -0,0 +1,22 @@
+<p><b>About:</b> This sample is a mostly empty wearable app that implements a fullscreen activity
+conforming to Android Wear best practices. Included in the sample are examples of GridViewPager,
+DelayedConfirmationView, and DismissOverlayView. Developers who require a fullscreen activity for
+their wearable app can use this sample as a starting point.</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+"Skeleton Wearable App" from the submenu.</p>
+<p><b>Wearable APIs used:</b> DelayedConfirmationView, DismissOverlayView, GridViewPager,
+CardFragment, FragmentGridPagerAdapter, ImageReference</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/skeleton_wearable_app.png" alt="SkeletonWearableApp" width="140"
+             height="140">
+        <img src="screenshots/grid_view_pager.png" alt="GridViewPager" width="140" height="140">
+        <img src="screenshots/delayed_confirmation.png" alt="DelayedConfirmationView" width="140"
+             height="140">
+        <img src="screenshots/dismiss_overlay.png" alt="DismissOverlayView" width="140"
+             height="140">
+        <figcaption>From left to right: the initial activity, GridViewPager,
+            DelayedConfirmationView, and DismissOverlayView</figcaption>
+    </figure>
+</p>

samples/wearable/SynchronizedNotifications/_index.html

@@ -0,0 +1,28 @@
+<p><b>About:</b> This sample creates three simple types of notifications:
+    <ol>
+        <li>A phone-only notification</li>
+        <li>A watch-only notification</li>
+        <li>A pair of synchronized phone and watch notifications where the content shown
+            on the watch notification is different from the one on the phone. These notifications
+            are synchronized in the sense that dismissing one results in dismissal of the other one
+            (all based on the Data Layer APIs).</li>
+    </ol>
+</p>
+<p><b>How to run:</b> Install the Application APK on the companion, and the Wearable APK on the
+wearable. Start the sample by running the SynchronizedNotifications application on the companion.
+</p>
+<p><b>Wearable APIs used:</b> DataApi, WearableListenerService</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/notification_options.png" alt="Notification options" width="216"
+             height="384">
+        <img src="screenshots/watch_only_notification.png" alt="Watch only notification" width="140"
+             height="140">
+        <img src="screenshots/different_notifications_phone.png"
+             alt="Different notifications - phone" width="216" height="384">
+        <img src="screenshots/different_notifications_wearable.png"
+             alt="Different notifications - watch" width="140" height="140">
+        <figcaption>From left to right: notification options, Watch Only Notification, Different
+            Notifications - Phone, and Different Notifications - Watch</figcaption>
+    </figure>
+</p>

samples/wearable/Timer/_index.html

@@ -0,0 +1,13 @@
+<p><b>About:</b> This simple wearable app allows the user to set a countdown timer. It runs
+independently on the wearable with no phone connection.</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, then start the timer via the voice
+menu, either by saying "OK Google, start a timer" or by tapping the home screen and selecting
+"Start a timer".</p>
+<p><b>Wearable APIs used:</b> voice command trigger, WearableListView</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/timer.png" alt="GridViewPager" width="140" height="140">
+        <img src="screenshots/timer_countdown.png" alt="GridViewPager" width="140" height="140">
+        <figcaption>A simple timer.</figcaption>
+    </figure>
+</p>

samples/wearable/WatchViewStub/Wearable/_index.html

@@ -1,13 +0,0 @@
-<p>This sample demonstrates how to specify different layouts for round and rectangular screens.
-The layouts used in this sample are as follows:
-    <ul>
-        <li>Round:  The background is a blue/green ring surrounding red text.</li>
-        <li>Rect:   The background is a blue/breen rounded rectangle with red text on top.</li>
-    </ul>
-Additionally, a unique animation is played when the user clicks on the layout, depending on whether
-the screen is round or rectangular:
-    <ul>
-        <li>Round:  The layout rotates 360 degrees.</li>
-        <li>Rect:   The layout shrinks to 70% and then grows back to 100%.</li>
-    </ul>
-</p>

samples/wearable/WatchViewStub/_index.html

@@ -0,0 +1,26 @@
+<p><b>About:</b> This sample demonstrates how to specify different layouts for round and rectangular
+screens. The layouts used in this sample are as follows:
+    <ul>
+        <li>Round:  The background is a blue/green ring surrounding red text.</li>
+        <li>Rect:   The background is a blue/breen rounded rectangle with red text on top.</li>
+    </ul>
+Additionally, a unique animation is played when the user clicks on the layout, depending on whether
+the screen is round or rectangular:
+    <ul>
+        <li>Round:  The layout rotates 360 degrees.</li>
+        <li>Rect:   The layout shrinks to 70% and then grows back to 100%.</li>
+    </ul>
+</p>
+<p><b>How to run:</b> Install the Wearable APK on the wearable, go to the voice menu (either by
+saying "OK Google" or tapping the home screen) and select the "Start..." option. Then, select
+"WatchViewStub Sample" from the submenu.</p>
+<p><b>Wearable APIs used:</b> WatchViewStub, DismissOverlayView</p>
+<p><b>Screenshots:</b>
+    <figure>
+        <img src="screenshots/watch_view_stub_round.png" alt="Round layout" width="180"
+             height="180">
+        <img src="screenshots/watch_view_stub_rectangular.png" alt="Rectangular layout" width="140"
+             height="140">
+        <figcaption>The layout that is inflated depends on the shape of your wearable.</figcaption>
+    </figure>
+</p>