Added _index.html and screenshots to all samples.
Bug 15814554
Change-Id: Icdb08c5cc39f97c88674e4177b88b47adce59127
diff --git a/samples/wearable/AgendaData/_index.html b/samples/wearable/AgendaData/_index.html
new file mode 100644
index 0000000..735e786
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/AgendaData/screenshots/companion_agenda_data.png b/samples/wearable/AgendaData/screenshots/companion_agenda_data.png
new file mode 100644
index 0000000..c39503b
--- /dev/null
+++ b/samples/wearable/AgendaData/screenshots/companion_agenda_data.png
Binary files differ
diff --git a/samples/wearable/AgendaData/screenshots/dummy_calendar_event.png b/samples/wearable/AgendaData/screenshots/dummy_calendar_event.png
new file mode 100644
index 0000000..074c56b
--- /dev/null
+++ b/samples/wearable/AgendaData/screenshots/dummy_calendar_event.png
Binary files differ
diff --git a/samples/wearable/DataLayer/_index.html b/samples/wearable/DataLayer/_index.html
new file mode 100644
index 0000000..2b9a3fa
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/DataLayer/screenshots/phone_image.png b/samples/wearable/DataLayer/screenshots/phone_image.png
new file mode 100644
index 0000000..e045b65
--- /dev/null
+++ b/samples/wearable/DataLayer/screenshots/phone_image.png
Binary files differ
diff --git a/samples/wearable/DataLayer/screenshots/wearable_background_image.png b/samples/wearable/DataLayer/screenshots/wearable_background_image.png
new file mode 100644
index 0000000..7826180
--- /dev/null
+++ b/samples/wearable/DataLayer/screenshots/wearable_background_image.png
Binary files differ
diff --git a/samples/wearable/DelayedConfirmation/Application/_index.html b/samples/wearable/DelayedConfirmation/Application/_index.html
deleted file mode 100644
index 6996cc7..0000000
--- a/samples/wearable/DelayedConfirmation/Application/_index.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/samples/wearable/DelayedConfirmation/_index.html b/samples/wearable/DelayedConfirmation/_index.html
new file mode 100644
index 0000000..2dd5cdb
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/DelayedConfirmation/screenshots/companion_delayed_confirmation.png b/samples/wearable/DelayedConfirmation/screenshots/companion_delayed_confirmation.png
new file mode 100644
index 0000000..b1b61a4
--- /dev/null
+++ b/samples/wearable/DelayedConfirmation/screenshots/companion_delayed_confirmation.png
Binary files differ
diff --git a/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_all.png b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_all.png
new file mode 100644
index 0000000..9119dd3
--- /dev/null
+++ b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_all.png
Binary files differ
diff --git a/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_top.png b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_top.png
new file mode 100644
index 0000000..6d2da70
--- /dev/null
+++ b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_box_inset_top.png
Binary files differ
diff --git a/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_notification.png b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_notification.png
new file mode 100644
index 0000000..936bcaf
--- /dev/null
+++ b/samples/wearable/DelayedConfirmation/screenshots/delayed_confirmation_notification.png
Binary files differ
diff --git a/samples/wearable/ElizaChat/_index.html b/samples/wearable/ElizaChat/_index.html
index bdf2508..0bc9433 100644
--- a/samples/wearable/ElizaChat/_index.html
+++ b/samples/wearable/ElizaChat/_index.html
@@ -1,19 +1,33 @@
-<p>This sample is a phone application that provides a chat experience in which
-users can respond to messages with a quick voice response. New messages create
-a notification with a "Reply" action. The notification is bridged from phone
-to wearable, and selecting the "Reply" action on the wearable opens the voice
-transcription UI allowing the user to speak a response.</p>
+<p><b>About: </b>
+This sample is a phone application that provides a chat experience in which users can respond to
+messages with a quick voice response. New messages create a notification with a "Reply" action.
+The notification is bridged from phone to wearable, and selecting the "Reply" action on the
+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
-application (which would require a server or a peer-to-peer connection), the
-conversation is conducted with an chat bot on the phone. Each time the bot
-responds, the phone app updates the notification and allows the user to write
-back. This sample is primarily intended to demonstrate the voice-reply
-capabilities provided by the Android Wear notification API.</p>
+<p>To keep the example simple and self-contained, instead of a real chat application (which would
+require a server or a peer-to-peer connection), the conversation is conducted with an chat bot on
+the phone. Each time the bot responds, the phone app updates the notification and allows the user
+to write back. This sample is primarily intended to demonstrate the voice-reply capabilities
+provided by the Android Wear notification API.</p>
-<p>When using the emulator you can type a response instead of speaking it
-aloud. To allow typed responses, ensure that your emulator image has the
-"hardware keyboard present" option enabled. After typing your message into
-the emulator window, hit the enter key and wait a few seconds for your
-message to be sent.</p>
+<p>When using the emulator you can type a response instead of speaking it aloud. To allow typed
+responses, ensure that your emulator image has the "hardware keyboard present" option enabled.
+After typing your message into the emulator window, hit the enter key and wait a few seconds for
+your 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>
diff --git a/samples/wearable/ElizaChat/screenshots/companion_eliza_chat.png b/samples/wearable/ElizaChat/screenshots/companion_eliza_chat.png
new file mode 100644
index 0000000..b7fd266
--- /dev/null
+++ b/samples/wearable/ElizaChat/screenshots/companion_eliza_chat.png
Binary files differ
diff --git a/samples/wearable/ElizaChat/screenshots/companion_eliza_chat_response.png b/samples/wearable/ElizaChat/screenshots/companion_eliza_chat_response.png
new file mode 100644
index 0000000..cea063c
--- /dev/null
+++ b/samples/wearable/ElizaChat/screenshots/companion_eliza_chat_response.png
Binary files differ
diff --git a/samples/wearable/ElizaChat/screenshots/wearable_eliza_notification.png b/samples/wearable/ElizaChat/screenshots/wearable_eliza_notification.png
new file mode 100644
index 0000000..c5ced49
--- /dev/null
+++ b/samples/wearable/ElizaChat/screenshots/wearable_eliza_notification.png
Binary files differ
diff --git a/samples/wearable/ElizaChat/screenshots/wearable_voice_reply.png b/samples/wearable/ElizaChat/screenshots/wearable_voice_reply.png
new file mode 100644
index 0000000..032e037
--- /dev/null
+++ b/samples/wearable/ElizaChat/screenshots/wearable_voice_reply.png
Binary files differ
diff --git a/samples/wearable/EmbeddedApp/_index.html b/samples/wearable/EmbeddedApp/_index.html
new file mode 100644
index 0000000..5b5cdc5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/samples/wearable/EmbeddedApp/screenshots/embedded_wearable_app.png b/samples/wearable/EmbeddedApp/screenshots/embedded_wearable_app.png
new file mode 100644
index 0000000..414afe5
--- /dev/null
+++ b/samples/wearable/EmbeddedApp/screenshots/embedded_wearable_app.png
Binary files differ
diff --git a/samples/wearable/EmbeddedApp/screenshots/phone_app.png b/samples/wearable/EmbeddedApp/screenshots/phone_app.png
new file mode 100644
index 0000000..46c3d89
--- /dev/null
+++ b/samples/wearable/EmbeddedApp/screenshots/phone_app.png
Binary files differ
diff --git a/samples/wearable/FindMyPhone/_index.html b/samples/wearable/FindMyPhone/_index.html
new file mode 100644
index 0000000..9d19f5b
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/FindMyPhone/screenshots/find_my_phone_activity.png b/samples/wearable/FindMyPhone/screenshots/find_my_phone_activity.png
new file mode 100644
index 0000000..8cff992
--- /dev/null
+++ b/samples/wearable/FindMyPhone/screenshots/find_my_phone_activity.png
Binary files differ
diff --git a/samples/wearable/FindMyPhone/screenshots/find_my_phone_notification.png b/samples/wearable/FindMyPhone/screenshots/find_my_phone_notification.png
new file mode 100644
index 0000000..a8ed867
--- /dev/null
+++ b/samples/wearable/FindMyPhone/screenshots/find_my_phone_notification.png
Binary files differ
diff --git a/samples/wearable/Flashlight/_index.html b/samples/wearable/Flashlight/_index.html
new file mode 100644
index 0000000..358148a
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/Flashlight/screenshots/flashlight.png b/samples/wearable/Flashlight/screenshots/flashlight.png
new file mode 100644
index 0000000..02fca20
--- /dev/null
+++ b/samples/wearable/Flashlight/screenshots/flashlight.png
Binary files differ
diff --git a/samples/wearable/Flashlight/screenshots/party_mode.gif b/samples/wearable/Flashlight/screenshots/party_mode.gif
new file mode 100644
index 0000000..8258b7d
--- /dev/null
+++ b/samples/wearable/Flashlight/screenshots/party_mode.gif
Binary files differ
diff --git a/samples/wearable/Geofencing/_index.html b/samples/wearable/Geofencing/_index.html
new file mode 100644
index 0000000..220fc55
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/Geofencing/screenshots/android_building_check_in.png b/samples/wearable/Geofencing/screenshots/android_building_check_in.png
new file mode 100644
index 0000000..5101e77
--- /dev/null
+++ b/samples/wearable/Geofencing/screenshots/android_building_check_in.png
Binary files differ
diff --git a/samples/wearable/GridViewPager/_index.html b/samples/wearable/GridViewPager/_index.html
new file mode 100644
index 0000000..5f7aa63
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/GridViewPager/screenshots/grid_view_pager.gif b/samples/wearable/GridViewPager/screenshots/grid_view_pager.gif
new file mode 100644
index 0000000..f70dafc
--- /dev/null
+++ b/samples/wearable/GridViewPager/screenshots/grid_view_pager.gif
Binary files differ
diff --git a/samples/wearable/JumpingJack/_index.html b/samples/wearable/JumpingJack/_index.html
new file mode 100644
index 0000000..3f4c26a
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/JumpingJack/screenshots/jumping_jack.gif b/samples/wearable/JumpingJack/screenshots/jumping_jack.gif
new file mode 100644
index 0000000..86c4faa
--- /dev/null
+++ b/samples/wearable/JumpingJack/screenshots/jumping_jack.gif
Binary files differ
diff --git a/samples/wearable/Notifications/Application/_index.html b/samples/wearable/Notifications/Application/_index.html
deleted file mode 100644
index 4bda0fa..0000000
--- a/samples/wearable/Notifications/Application/_index.html
+++ /dev/null
@@ -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>
diff --git a/samples/wearable/Notifications/_index.html b/samples/wearable/Notifications/_index.html
new file mode 100644
index 0000000..af28c94
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/Notifications/screenshots/basic-menu.png b/samples/wearable/Notifications/screenshots/basic-menu.png
new file mode 100644
index 0000000..75c29cc
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/basic-menu.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/basic.png b/samples/wearable/Notifications/screenshots/basic.png
new file mode 100644
index 0000000..9e13b09
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/basic.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/bottom-aligned.png b/samples/wearable/Notifications/screenshots/bottom-aligned.png
new file mode 100644
index 0000000..88c7ffa
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/bottom-aligned.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/bundle.png b/samples/wearable/Notifications/screenshots/bundle.png
new file mode 100644
index 0000000..a6e1ad5
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/bundle.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/companion-bottom-aligned.png b/samples/wearable/Notifications/screenshots/companion-bottom-aligned.png
new file mode 100644
index 0000000..2bda56c
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/companion-bottom-aligned.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/companion-bundle.png b/samples/wearable/Notifications/screenshots/companion-bundle.png
new file mode 100644
index 0000000..90e0e08
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/companion-bundle.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/companion-content-action.png b/samples/wearable/Notifications/screenshots/companion-content-action.png
new file mode 100644
index 0000000..07e6806
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/companion-content-action.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/companion-multiple-page.png b/samples/wearable/Notifications/screenshots/companion-multiple-page.png
new file mode 100644
index 0000000..7f11521
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/companion-multiple-page.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-action.png b/samples/wearable/Notifications/screenshots/content-action.png
new file mode 100644
index 0000000..415dd9f
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-action.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-action2.png b/samples/wearable/Notifications/screenshots/content-action2.png
new file mode 100644
index 0000000..7f01994
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-action2.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-icon-menu.png b/samples/wearable/Notifications/screenshots/content-icon-menu.png
new file mode 100644
index 0000000..6c810ce
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-icon-menu.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-icon1.png b/samples/wearable/Notifications/screenshots/content-icon1.png
new file mode 100644
index 0000000..f9d12da
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-icon1.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-icon2.png b/samples/wearable/Notifications/screenshots/content-icon2.png
new file mode 100644
index 0000000..a36b734
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-icon2.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-icon3.png b/samples/wearable/Notifications/screenshots/content-icon3.png
new file mode 100644
index 0000000..e2c757e
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-icon3.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/content-icon4.png b/samples/wearable/Notifications/screenshots/content-icon4.png
new file mode 100644
index 0000000..f5d0523
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/content-icon4.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/display-intent-menu.png b/samples/wearable/Notifications/screenshots/display-intent-menu.png
new file mode 100644
index 0000000..567673f
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/display-intent-menu.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/display-intent.png b/samples/wearable/Notifications/screenshots/display-intent.png
new file mode 100644
index 0000000..f3b333d
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/display-intent.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/multiple-page1.png b/samples/wearable/Notifications/screenshots/multiple-page1.png
new file mode 100644
index 0000000..d6591d9
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/multiple-page1.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/multiple-page2.png b/samples/wearable/Notifications/screenshots/multiple-page2.png
new file mode 100644
index 0000000..730cb30
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/multiple-page2.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/stylized-menu.png b/samples/wearable/Notifications/screenshots/stylized-menu.png
new file mode 100644
index 0000000..2e94c93
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/stylized-menu.png
Binary files differ
diff --git a/samples/wearable/Notifications/screenshots/stylized.png b/samples/wearable/Notifications/screenshots/stylized.png
new file mode 100644
index 0000000..338c9cc
--- /dev/null
+++ b/samples/wearable/Notifications/screenshots/stylized.png
Binary files differ
diff --git a/samples/wearable/Quiz/Application/_index.html b/samples/wearable/Quiz/Application/_index.html
deleted file mode 100644
index 39e7075..0000000
--- a/samples/wearable/Quiz/Application/_index.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/samples/wearable/Quiz/_index.html b/samples/wearable/Quiz/_index.html
new file mode 100644
index 0000000..9874611
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/Quiz/screenshots/companion_quiz.png b/samples/wearable/Quiz/screenshots/companion_quiz.png
new file mode 100644
index 0000000..15f7e80
--- /dev/null
+++ b/samples/wearable/Quiz/screenshots/companion_quiz.png
Binary files differ
diff --git a/samples/wearable/Quiz/screenshots/companion_quiz_correct_status.png b/samples/wearable/Quiz/screenshots/companion_quiz_correct_status.png
new file mode 100644
index 0000000..c0e25ca
--- /dev/null
+++ b/samples/wearable/Quiz/screenshots/companion_quiz_correct_status.png
Binary files differ
diff --git a/samples/wearable/Quiz/screenshots/wearable_quiz.png b/samples/wearable/Quiz/screenshots/wearable_quiz.png
new file mode 100644
index 0000000..0c63139
--- /dev/null
+++ b/samples/wearable/Quiz/screenshots/wearable_quiz.png
Binary files differ
diff --git a/samples/wearable/Quiz/screenshots/wearable_quiz_answer.png b/samples/wearable/Quiz/screenshots/wearable_quiz_answer.png
new file mode 100644
index 0000000..eb47516
--- /dev/null
+++ b/samples/wearable/Quiz/screenshots/wearable_quiz_answer.png
Binary files differ
diff --git a/samples/wearable/Quiz/screenshots/wearable_quiz_report.png b/samples/wearable/Quiz/screenshots/wearable_quiz_report.png
new file mode 100644
index 0000000..196d045
--- /dev/null
+++ b/samples/wearable/Quiz/screenshots/wearable_quiz_report.png
Binary files differ
diff --git a/samples/wearable/RecipeAssistant/_index.html b/samples/wearable/RecipeAssistant/_index.html
index 3dce7d3..80dc200 100644
--- a/samples/wearable/RecipeAssistant/_index.html
+++ b/samples/wearable/RecipeAssistant/_index.html
@@ -1,8 +1,19 @@
-<p>This phone application uses the enhanced notifications API to display
-recipe instructions using paged notifications. After starting the application
-on your phone, you can browse from a short list of recipes and select one to
-view. Each recipe is broken down into a number of steps; when ready, you can
-click on the START action in the action bar to send the steps to the wearable.
-On the wearable device, the steps are displayed as a multi-page notification,
-with one page for each step in the recipe.</p>
-
+<p><b>About:</b> This phone application uses the enhanced notifications API to display recipe
+instructions using paged notifications. After starting the application on your phone, you can browse
+from a short list of recipes and select one to view. Each recipe is broken down into a number of
+steps; when ready, you can click on the START action in the action bar to send the steps to the
+wearable. On the wearable device, the steps are displayed as a multi-page notification, 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>
\ No newline at end of file
diff --git a/samples/wearable/RecipeAssistant/screenshots/guac_notification.png b/samples/wearable/RecipeAssistant/screenshots/guac_notification.png
new file mode 100644
index 0000000..e041b11
--- /dev/null
+++ b/samples/wearable/RecipeAssistant/screenshots/guac_notification.png
Binary files differ
diff --git a/samples/wearable/RecipeAssistant/screenshots/guac_notification_step1.png b/samples/wearable/RecipeAssistant/screenshots/guac_notification_step1.png
new file mode 100644
index 0000000..e0157ea
--- /dev/null
+++ b/samples/wearable/RecipeAssistant/screenshots/guac_notification_step1.png
Binary files differ
diff --git a/samples/wearable/RecipeAssistant/screenshots/recipe_assistant_guac.png b/samples/wearable/RecipeAssistant/screenshots/recipe_assistant_guac.png
new file mode 100644
index 0000000..a34da6e
--- /dev/null
+++ b/samples/wearable/RecipeAssistant/screenshots/recipe_assistant_guac.png
Binary files differ
diff --git a/samples/wearable/SkeletonWearableApp/_index.html b/samples/wearable/SkeletonWearableApp/_index.html
new file mode 100644
index 0000000..dc2a488
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/SkeletonWearableApp/screenshots/delayed_confirmation.png b/samples/wearable/SkeletonWearableApp/screenshots/delayed_confirmation.png
new file mode 100644
index 0000000..2994361
--- /dev/null
+++ b/samples/wearable/SkeletonWearableApp/screenshots/delayed_confirmation.png
Binary files differ
diff --git a/samples/wearable/SkeletonWearableApp/screenshots/dismiss_overlay.png b/samples/wearable/SkeletonWearableApp/screenshots/dismiss_overlay.png
new file mode 100644
index 0000000..142d7e4
--- /dev/null
+++ b/samples/wearable/SkeletonWearableApp/screenshots/dismiss_overlay.png
Binary files differ
diff --git a/samples/wearable/SkeletonWearableApp/screenshots/grid_view_pager.png b/samples/wearable/SkeletonWearableApp/screenshots/grid_view_pager.png
new file mode 100644
index 0000000..f59c13d
--- /dev/null
+++ b/samples/wearable/SkeletonWearableApp/screenshots/grid_view_pager.png
Binary files differ
diff --git a/samples/wearable/SkeletonWearableApp/screenshots/skeleton_wearable_app.png b/samples/wearable/SkeletonWearableApp/screenshots/skeleton_wearable_app.png
new file mode 100644
index 0000000..4f17274
--- /dev/null
+++ b/samples/wearable/SkeletonWearableApp/screenshots/skeleton_wearable_app.png
Binary files differ
diff --git a/samples/wearable/SynchronizedNotifications/_index.html b/samples/wearable/SynchronizedNotifications/_index.html
new file mode 100644
index 0000000..1461ba6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_phone.png b/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_phone.png
new file mode 100644
index 0000000..cab31e0
--- /dev/null
+++ b/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_phone.png
Binary files differ
diff --git a/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_wearable.png b/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_wearable.png
new file mode 100644
index 0000000..97da715
--- /dev/null
+++ b/samples/wearable/SynchronizedNotifications/screenshots/different_notifications_wearable.png
Binary files differ
diff --git a/samples/wearable/SynchronizedNotifications/screenshots/notification_options.png b/samples/wearable/SynchronizedNotifications/screenshots/notification_options.png
new file mode 100644
index 0000000..8cd0095
--- /dev/null
+++ b/samples/wearable/SynchronizedNotifications/screenshots/notification_options.png
Binary files differ
diff --git a/samples/wearable/SynchronizedNotifications/screenshots/watch_only_notification.png b/samples/wearable/SynchronizedNotifications/screenshots/watch_only_notification.png
new file mode 100644
index 0000000..34e950f
--- /dev/null
+++ b/samples/wearable/SynchronizedNotifications/screenshots/watch_only_notification.png
Binary files differ
diff --git a/samples/wearable/Timer/_index.html b/samples/wearable/Timer/_index.html
new file mode 100644
index 0000000..10ccf30
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/Timer/screenshots/timer.png b/samples/wearable/Timer/screenshots/timer.png
new file mode 100644
index 0000000..6ef8f86
--- /dev/null
+++ b/samples/wearable/Timer/screenshots/timer.png
Binary files differ
diff --git a/samples/wearable/Timer/screenshots/timer_countdown.png b/samples/wearable/Timer/screenshots/timer_countdown.png
new file mode 100644
index 0000000..505733d
--- /dev/null
+++ b/samples/wearable/Timer/screenshots/timer_countdown.png
Binary files differ
diff --git a/samples/wearable/WatchViewStub/Wearable/_index.html b/samples/wearable/WatchViewStub/Wearable/_index.html
deleted file mode 100644
index b46a3ec..0000000
--- a/samples/wearable/WatchViewStub/Wearable/_index.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/samples/wearable/WatchViewStub/_index.html b/samples/wearable/WatchViewStub/_index.html
new file mode 100644
index 0000000..0e01e30
--- /dev/null
+++ b/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>
diff --git a/samples/wearable/WatchViewStub/screenshots/watch_view_stub_rectangular.png b/samples/wearable/WatchViewStub/screenshots/watch_view_stub_rectangular.png
new file mode 100644
index 0000000..939cb18
--- /dev/null
+++ b/samples/wearable/WatchViewStub/screenshots/watch_view_stub_rectangular.png
Binary files differ
diff --git a/samples/wearable/WatchViewStub/screenshots/watch_view_stub_round.png b/samples/wearable/WatchViewStub/screenshots/watch_view_stub_round.png
new file mode 100644
index 0000000..3055f6d
--- /dev/null
+++ b/samples/wearable/WatchViewStub/screenshots/watch_view_stub_round.png
Binary files differ
