From b7cf23532d174a5b429783d7a882c45099a4a5f8 Mon Sep 17 00:00:00 2001
From: Luan Nguyen <luann@google.com>
Date: Mon, 8 Jun 2015 15:05:58 -0700
Subject: [PATCH] docs: Update JavaDoc ref links for UI training.

Update sample snippets in 2d-picker.

bug: 21660558
bug: 19059844
Change-Id: Ibc156a21329d1549f6d33ed75130f7b6edda85b2
---
 docs/html/training/wearables/ui/2d-picker.jd | 113 +++++++++++++------
 docs/html/training/wearables/ui/cards.jd     |  75 ++++++++----
 docs/html/training/wearables/ui/confirm.jd   |  36 ++++--
 docs/html/training/wearables/ui/exit.jd      |  33 ++++--
 docs/html/training/wearables/ui/layouts.jd   |  50 ++++----
 docs/html/training/wearables/ui/lists.jd     |  67 ++++++-----
 6 files changed, 247 insertions(+), 127 deletions(-)

diff --git a/docs/html/training/wearables/ui/2d-picker.jd b/docs/html/training/wearables/ui/2d-picker.jd
index 8f4d8af196678..68f98b7c4d55e 100644
--- a/docs/html/training/wearables/ui/2d-picker.jd
+++ b/docs/html/training/wearables/ui/2d-picker.jd
@@ -9,6 +9,11 @@ page.title=Creating a 2D Picker
   <li><a href="#add-page-grid">Add a Page Grid</a></li>
   <li><a href="#implement-adapter">Implement a Page Adapter</a></li>
 </ol>
+<h2>Related Samples</h2>
+<ul>
+  <li><a href="{@docRoot}samples/GridViewPager/index.html">
+    GridViewPager</a></li>
+</ul>
 <h2>You should also read</h2>
 <ul>
   <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li>
@@ -21,18 +26,19 @@ Wear allows users to navigate and choose from a set of items shown as pages. The
 Library lets you easily implement this pattern using a page grid, which is a layout manager
 that allows users to scroll vertically and horizontally through pages of data.</p>
 
-<p>To implement this pattern, you add a <code>GridViewPager</code> element to the layout
-of your activity and implement an adapter that provides a set of pages by extending
-the <code>FragmentGridPagerAdapter</code> class.</p>
-
-<p class="note"><strong>Note:</strong> The <em>GridViewPager</em> sample in the Android SDK
-demonstrates how to use the <code>GridViewPager</code> layout in your apps. This sample is
-located in the <code>android-sdk/samples/android-20/wearable/GridViewPager</code> directory.</p>
+<p>To implement this pattern, you add a
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+element to the layout of your activity and implement an adapter that provides a set of pages by
+extending the
+<a href="{@docRoot}reference/android/support/wearable/view/FragmentGridPagerAdapter.html"><code>FragmentGridPagerAdapter</code></a>
+class.</p>
 
 
 <h2 id="add-page-grid">Add a Page Grid</h2>
 
-<p>Add a <code>GridViewPager</code> element to your layout definition as follows:</p>
+<p>Add a
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+element to your layout definition as follows:</p>
 
 <pre>
 &lt;android.support.wearable.view.GridViewPager
@@ -49,18 +55,20 @@ your 2D picker works on both round and square devices.</p>
 
 <h2 id="implement-adapter">Implement a Page Adapter</h2>
 
-<p>A page adapter provides a set of pages to populate a <code>GridViewPager</code> component. To
-implement this adapter, you extend the <code>FragmentGridPageAdapter</code> class from the
-Wearable UI Library</p>
+<p>A page adapter provides a set of pages to populate a
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+component. To implement this adapter, you extend the
+<a href="{@docRoot}reference/android/support/wearable/view/FragmentGridPagerAdapter.html"><code>FragmentGridPagerAdapter</code></a>
+class from the Wearable UI Library</p>
 
-<p>For example, the <em>GridViewPager</em> sample in the Android SDK contains
-the following adapter implementation that provides a set of static cards with custom background
+<p>The following snippet shows how to provide a set of static cards with custom background
 images:</p>
 
 <pre>
 public class SampleGridPagerAdapter extends FragmentGridPagerAdapter {
 
     private final Context mContext;
+    private List<Row> mRows;
 
     public SampleGridPagerAdapter(Context ctx, FragmentManager fm) {
         super(fm);
@@ -68,8 +76,8 @@ public class SampleGridPagerAdapter extends FragmentGridPagerAdapter {
     }
 
     static final int[] BG_IMAGES = new int[] {
-            R.drawable.debug_background_1, ...
-            R.drawable.debug_background_5
+        R.drawable.debug_background_1, ...
+        R.drawable.debug_background_5
     };
 
     // A simple container for static data in each page
@@ -89,8 +97,11 @@ public class SampleGridPagerAdapter extends FragmentGridPagerAdapter {
 }
 </pre>
 
-<p>The picker calls <code>getFragment</code> and <code>getBackground</code> to retrieve the content
-to display at each position of the grid:</p>
+<p>The adapter calls
+<a href="{@docRoot}reference/android/support/wearable/view/FragmentGridPagerAdapter.html#getFragment(int, int)"><code>getFragment()</code></a>
+and
+<a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html#getBackgroundForRow(int)"><code>getBackgroundForRow()</code></a>
+to retrieve the content to display for each row:</p>
 
 <pre>
 // Obtain the UI fragment at the specified position
@@ -111,16 +122,39 @@ public Fragment getFragment(int row, int col) {
     return fragment;
 }
 
-// Obtain the background image for the page at the specified position
+// Obtain the background image for the row
 &#64;Override
-public ImageReference getBackground(int row, int column) {
-    return ImageReference.forDrawable(BG_IMAGES[row % BG_IMAGES.length]);
+public Drawable getBackgroundForRow(int row) {
+    return mContext.getResources().getDrawable(
+            (BG_IMAGES[row % BG_IMAGES.length]), null);
+}
+
+</pre>
+
+<p>The following example shows how to retrieve the background to display for a specific page
+in the grid:
+</p>
+
+<pre>
+// Obtain the background image for the specific page
+&#64;Override
+public Drawable getBackgroundForPage(int row, int column) {
+    if( row == 2 && column == 1) {
+        // Place image at specified position
+        return mContext.getResources().getDrawable(R.drawable.bugdroid_large, null);
+    } else {
+        // Default to background image for row
+        return GridPagerAdapter.BACKGROUND_NONE;
+    }
 }
 </pre>
 
-<p>The <code>getRowCount</code> method tells the picker how many rows of content are
-available, and the <code>getColumnCount</code> method tells the picker how many columns
-of content are available for each of the rows.</p>
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html#getRowCount()"><code>getRowCount()</code></a>
+method tells the adapter how many rows of content are
+available, and the
+<a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html#getColumnCount(int)"><code>getColumnCount()</code></a>
+method tells the adapter how many columns of content are available for each of the rows.</p>
 
 <pre>
 // Obtain the number of pages (vertical)
@@ -137,10 +171,13 @@ public int getColumnCount(int rowNum) {
 </pre>
 
 <p>The adapter implementation details depend on your particular set of pages. Each page provided
-by the adapter is of type <code>Fragment</code>. In this example, each page is a
-<code>CardFragment</code> instance that uses one of the default card layouts. However, you can
-combine different types of pages in the same 2D picker, such as cards, action icons, and custom
-layouts depending on your use cases.</p>
+by the adapter is of type
+<a href="{@docRoot}reference/android/app/Fragment.html"><code>Fragment</code></a>.
+In this example, each page is a
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+instance that uses one of the default card layouts. However, you can combine different types of
+pages in the same 2D picker, such as cards, action icons, and custom layouts depending on your use
+cases.</p>
 
 <div style="float:right;margin-left:25px;width:250px">
 <img src="{@docRoot}wear/images/07_uilib.png" width="250" height="250" alt=""/>
@@ -149,24 +186,30 @@ The <em>GridViewPager</em> sample.</p>
 </div>
 
 <p>Not all rows need to have the same number of pages. Notice that in this example the number of
-colums is different for each row. You can also use a <code>GridViewPager</code> component to
-implement a 1D picker with only one row or only one column.</p>
+colums is different for each row. You can also use a
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+component to implement a 1D picker with only one row or only one column.</p>
 
-<p><code>GridViewPager</code> provides support for scrolling in cards whose content does not fit
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+class provides support for scrolling in cards whose content does not fit
 the device screen. This example configures each card to expand as required, so users can scroll
 through the card's content. When users reach the end of a scrollable card, a swipe in the same
 direction shows the next page on the grid, if one is available.</p>
 
-<p>You can specify a custom background for each page with the <code>getBackground()</code> method.
-When users swipe to navigate across pages, <code>GridViewPager</code> applies parallax
-and crossfade effects between different backgrounds automatically.</p>
+<p>You can specify a custom background for each page with the
+<a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html#getBackgroundForPage(int, int)"><code>getBackgroundForPage()</code></a>
+method. When users swipe to navigate across pages, the
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+class applies parallax and crossfade effects between different backgrounds automatically.</p>
 
 <h3>Assign an adapter instance to the page grid</h3>
 
 <p>In your activity, assign an instance of your adapter implementation to the
-<code>GridViewPager</code> component:</p>
+<a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
+component:</p>
 
-<pre>
+<pre style="clear:both">
 public class MainActivity extends Activity {
 
     &#64;Override
diff --git a/docs/html/training/wearables/ui/cards.jd b/docs/html/training/wearables/ui/cards.jd
index 21f7e5c81e109..9ad87ad0565bf 100644
--- a/docs/html/training/wearables/ui/cards.jd
+++ b/docs/html/training/wearables/ui/cards.jd
@@ -21,16 +21,23 @@ page.title=Creating Cards
 This lesson shows you how to create cards in your Android Wear apps.</p>
 
 <p>The Wearable UI Library provides implementations of cards specifically designed for wearable
-devices. This library contains the <code>CardFrame</code> class, which wraps views inside
-a card-styled frame with a white background, rounded corners, and a light-drop shadow.
-<code>CardFrame</code> can only contain one direct child, usually a layout manager, to which
+devices. This library contains the
+<a href="{@docRoot}reference/android/support/wearable/view/CardFrame.html"><code>CardFrame</code></a>
+class, which wraps views inside a card-styled frame with a white background, rounded corners, and a
+light-drop shadow. A
+<a href="{@docRoot}reference/android/support/wearable/view/CardFrame.html"><code>CardFrame</code></a>
+instance can only contain one direct child, usually a layout manager, to which
 you can add other views to customize the content inside the card.</p>
 
 <p>You can add cards to your app in two ways:</p>
 
 <ul>
-  <li>Use or extend the <code>CardFragment</code> class.</li>
-  <li>Add a card inside a <code>CardScrollView</code> in your layout.</li>
+  <li>Use or extend the
+  <a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+  class.</li>
+  <li>Add a card inside a
+  <a href="{@docRoot}reference/android/support/wearable/view/CardScrollView.html"><code>CardScrollView</code></a>
+  instance in your layout.</li>
 </ul>
 
 <p class="note"><strong>Note:</strong> This lesson shows you how to add cards to Android Wear
@@ -41,22 +48,31 @@ Features to Notifications</a>.</p>
 
 <h2 id="card-fragment">Create a Card Fragment</h2>
 
-<p>The <code>CardFragment</code> class provides a default card layout with a title, a
-description, and an icon. Use this approach to add cards to your app if the default card layout
-shown in figure 1 meets your needs.</p>
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+class provides a default card layout with a title, a description, and an icon. Use this approach to
+add cards to your app if the default card layout shown in figure 1 meets your needs.</p>
 
 <img src="{@docRoot}wear/images/05_uilib.png" width="500" height="245" alt=""/>
-<p class="img-caption"><strong>Figure 1.</strong> The default <code>CardFragment</code> layout.</p>
+<p class="img-caption"><strong>Figure 1.</strong> The default
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+layout.</p>
 
-<p>To add a <code>CardFragment</code> to your app:</p>
+<p>To add a
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+instance to your app:</p>
 
 <ol>
 <li>In your layout, assign an ID to the element that contains the card</li>
-<li>Create a <code>CardFragment</code> instance in your activity</li>
-<li>Use the fragment manager to add the <code>CardFragment</code> instance to its container</li>
+<li>Create a
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+instance in your activity</li>
+<li>Use the fragment manager to add the
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+instance to its container</li>
 </ol>
 
-<p>The following sample code shows the code for the screen display shown in Figure 1:</p>
+<p>The following sample code shows the code for the screen display shown in figure 1:</p>
 
 <pre>
 &lt;android.support.wearable.view.BoxInsetLayout
@@ -76,7 +92,9 @@ android:layout_width="match_parent">
 &lt;/android.support.wearable.view.BoxInsetLayout>
 </pre>
 
-<p>The following code adds the <code>CardFragment</code> instance to the activity in Figure 1:</p>
+<p>The following code adds the
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+instance to the activity in figure 1:</p>
 
 <pre>
 protected void onCreate(Bundle savedInstanceState) {
@@ -93,8 +111,11 @@ protected void onCreate(Bundle savedInstanceState) {
 }
 </pre>
 
-<p>To create a card with a custom layout using <code>CardFragment</code>, extend this class
-and override its <code>onCreateContentView</code> method.</p>
+<p>To create a card with a custom layout using the
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
+class, extend the class and override its
+<a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html#onCreateContentView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)"><code>onCreateContentView</code></a>
+method.</p>
 
 
 <h2 id="card-layout">Add a CardFrame to Your Layout</h2>
@@ -103,8 +124,9 @@ and override its <code>onCreateContentView</code> method.</p>
 approach when you want to define a custom layout for the card inside a layout definition file.</p>
 
 <img src="{@docRoot}wear/images/04_uilib.png" width="500" height="248" alt=""/>
-<p class="img-caption"><strong>Figure 2.</strong> Adding a <code>CardFrame</code> to your
-layout.</p>
+<p class="img-caption"><strong>Figure 2.</strong> Adding a
+<a href="{@docRoot}reference/android/support/wearable/view/CardFrame.html"><code>CardFrame</code></a>
+to your layout.</p>
 
 <p>The following layout code sample demonstrates a vertical linear layout with two elements. You
 can create more complex layouts to fit the needs of your app.</p>
@@ -152,7 +174,9 @@ android:layout_width="match_parent">
 &lt;/android.support.wearable.view.BoxInsetLayout>
 </pre>
 
-<p>The <code>CardScrollView</code> element in the example layout above lets you assign gravity to
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/CardScrollView.html><code>&lt;CardScrollView&gt;</code></a>
+element in the example layout above lets you assign gravity to
 the card when its content is smaller than the container. This example aligns the card to the
 bottom of the screen:</p>
 
@@ -168,8 +192,13 @@ protected void onCreate(Bundle savedInstanceState) {
 }
 </pre>
 
-<p><code>CardScrollView</code> detects the shape of the screen and displays the card differently
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/CardScrollView.html"><code>&lt;CardScrollView&gt;</code></a>
+element detects the shape of the screen and displays the card differently
 on round and square devices, using wider side margins on round screens. However,
-placing the <code>CardScrollView</code> element inside a <code>BoxInsetLayout</code> and using the
-<code>layout_box="bottom"</code> attribute is useful to align the card to the bottom of round
-screens without cropping its content.</p>
+placing the
+<a href="{@docRoot}reference/android/supprot/wearable/view/CardScrollView.html"><code>&lt;CardScrollView&gt;</code></a>
+element inside a
+<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>&lt;BoxInsetLayout&gt;</code></a>
+and using the <code>layout_box="bottom"</code> attribute is useful to align the card to the bottom
+of round screens without cropping its content.</p>
diff --git a/docs/html/training/wearables/ui/confirm.jd b/docs/html/training/wearables/ui/confirm.jd
index 07a352f9239f8..1f33085672f4d 100644
--- a/docs/html/training/wearables/ui/confirm.jd
+++ b/docs/html/training/wearables/ui/confirm.jd
@@ -52,12 +52,18 @@ gets notified if the user cancels the action and when the timer expires.</p>
 <p>To show a confirmation timer when users complete an action in your app:</p>
 
 <ol>
-<li>Add a <code>DelayedConfirmationView</code> element to your layout.</li>
-<li>Implement the <code>DelayedConfirmationListener</code> interface in your activity.</li>
+<li>Add a
+<a href="{@docRoot}reference/android/support/wearable/view/DelayedConfirmationView.html"><code>&lt;DelayedConfirmationView&gt;</code></a>
+element to your layout.</li>
+<li>Implement the
+<a href="{@docRoot}reference/android/support/wearable/view/DelayedConfirmationView.DelayedConfirmationListener.html"><code>DelayedConfirmationListener</code></a>
+interface in your activity.</li>
 <li>Set the duration of the timer and start it when the user completes an action.</li>
 </ol>
 
-<p>Add the <code>DelayedConfirmationView</code> element to your layout as follows:</p>
+<p>Add the
+<a href="{@docRoot}reference/android/support/wearable/view/DelayedConfirmationView.html"><code>&lt;DelayedConfirmationView&gt;</code></a>
+element to your layout as follows:</p>
 
 <pre>
 &lt;android.support.wearable.view.DelayedConfirmationView
@@ -125,19 +131,24 @@ A confirmation animation.</p>
 <h2 id="show-confirmation">Show Confirmation Animations</h2>
 
 <p>To show a confirmation animation when users complete an action in your app, create an intent
-that starts <code>ConfirmationActivity</code> from one of your activities. You can specify
-one of the these animations with the <code>EXTRA_ANIMATION_TYPE</code> intent extra:</p>
+that starts
+<a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html"><code>ConfirmationActivity</code></a>
+from one of your activities. You can specify
+one of the these animations with the
+<a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html#EXTRA_ANIMATION_TYPE"><code>EXTRA_ANIMATION_TYPE</code></a>
+intent extra:</p>
 
 <ul>
-<li><code>SUCCESS_ANIMATION</code></li>
-<li><code>FAILURE_ANIMATION</code></li>
-<li><code>OPEN_ON_PHONE_ANIMATION</code></li>
+<li><a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html#SUCCESS_ANIMATION"><code>SUCCESS_ANIMATION</code></a></li>
+<li><a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html#FAILURE_ANIMATION"><code>FAILURE_ANIMATION</code></a></li>
+<li><a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html#OPEN_ON_PHONE_ANIMATION"><code>OPEN_ON_PHONE_ANIMATION</code></a></li>
 </ul>
 
 <p>You can also add a message that appears under the confirmation icon.</p>
 
-<p>To use the <code>ConfirmationActivity</code> in your app, first declare this activity in your
-manifest file:</p>
+<p>To use the
+<a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html"><code>ConfirmationActivity</code></a>
+in your app, first declare this activity in your manifest file:</p>
 
 <pre>
 &lt;manifest>
@@ -161,5 +172,6 @@ intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE,
 startActivity(intent);
 </pre>
 
-<p>After showing the confirmation animation, <code>ConfirmationActivity</code> finishes and your
-activity resumes.</p>
+<p>After showing the confirmation animation,
+<a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html"><code>ConfirmationActivity</code></a>
+finishes and your activity resumes.</p>
diff --git a/docs/html/training/wearables/ui/exit.jd b/docs/html/training/wearables/ui/exit.jd
index 84e1e45c9bd12..9c55673f45ba6 100644
--- a/docs/html/training/wearables/ui/exit.jd
+++ b/docs/html/training/wearables/ui/exit.jd
@@ -24,9 +24,9 @@ content and then swipe again from left to right to exit the app.</p>
 <p>For more immersive experiences, like an app that can scroll a map in any direction, you can
 disable the swipe to exit gesture in your app. However, if you disable it, you must implement
 the long-press-to-dismiss UI pattern to let users exit your app using the
-<code>DismissOverlayView</code> class from the Wearable UI Library.
-You must also inform your users the first time they run your app that they can exit using
-a long press.</p>
+<a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>DismissOverlayView</code></a>
+class from the Wearable UI Library. You must also inform your users the first time they run your app
+that they can exit using a long press.</p>
 
 <p>For design guidelines about exiting Android Wear activities, see
 <a href="{@docRoot}design/wear/structure.html#Custom">Breaking out of the card</a>.</p>
@@ -51,9 +51,14 @@ exit your app, as described in the next section.</p>
 
 <h2 id="long-press">Implement the Long Press to Dismiss Pattern</h2>
 
-<p>To use the <code>DissmissOverlayView</code> class in your activity, add this element to
-your layout definition such that it covers the whole screen and is placed above all other views.
-For example:</p>
+<p>To use the
+<a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>DismissOverlayView</code></a>
+class in your activity, add this element to your layout definition such that it covers the whole
+screen and is placed above all other views.</p>
+
+<p>The following example shows how to add the
+<a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>&lt;DismissOverlayView&gt;</code></a>
+element:</p>
 
 <pre>
 &lt;FrameLayout
@@ -70,10 +75,12 @@ For example:</p>
 &lt;FrameLayout>
 </pre>
 
-<p>In your activity, obtain the <code>DismissOverlayView</code> element and set some introductory
-text. This text is shown to users the first time they run your app to inform them that they
-can exit the app using a long press gesture. Then use a <code>GestureDetector</code> to detect
-a long press:</p>
+<p>In your activity, obtain the
+<a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>&lt;DismissOverlayView&gt;</code></a>
+element and set some introductory text. This text is shown to users the first time they run your app
+to inform them that they can exit the app using a long press gesture. Then use a
+<a href="{@docRoot}reference/android/view/GestureDetector.html"><code>GestureDetector</code></a>
+to detect a long press:</p>
 
 <pre>
 public class WearActivity extends Activity {
@@ -106,5 +113,7 @@ public class WearActivity extends Activity {
 }
 </pre>
 
-<p>When the system detects a long press gesture, <code>DismissOverlayView</code> shows an
-<strong>Exit</strong> button, which terminates your activity if the user presses it.</p>
\ No newline at end of file
+<p>When the system detects a long press gesture, the
+<a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>&lt;DismissOverlayView&gt;</code></a>
+element shows an <strong>Exit</strong> button, which terminates your activity if the user presses
+it.</p>
\ No newline at end of file
diff --git a/docs/html/training/wearables/ui/layouts.jd b/docs/html/training/wearables/ui/layouts.jd
index 0eb1395d3280b..f1f18f3dfb941 100644
--- a/docs/html/training/wearables/ui/layouts.jd
+++ b/docs/html/training/wearables/ui/layouts.jd
@@ -94,14 +94,18 @@ API reference documentation</a> for the Wearable UI Library classes.</p>
 
 <h2 id="different-layouts">Specify Different Layouts for Square and Round Screens</h2>
 
-<p>The <code>WatchViewStub</code> class included in the Wearable UI Library lets you specify
-different layout definitions for square and round screens. This class detects the screen shape
-at runtime and inflates the corresponding layout.</p>
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/WatchViewStub.html"><code>WatchViewStub</code></a>
+class included in the Wearable UI Library lets you specify different layout definitions for square
+and round screens. This class detects the screen shape at runtime and inflates the corresponding
+layout.</p>
 
 <p>To use this class for handling different screen shapes in your app:</p>
 
 <ol>
-<li>Add <code>WatchViewStub</code> as the main element of your activity's layout.</li>
+<li>Add
+<a href="{@docRoot}reference/android/support/wearable/view/WatchViewStub.html"><code>WatchViewStub</code></a>
+as the main element of your activity's layout.</li>
 <li>Specify a layout definition file for square screens with the <code>rectLayout</code>
     attribute.</li>
 <li>Specify a layout definition file for round screens with the <code>roundLayout</code>
@@ -142,7 +146,8 @@ The system inflates the correct layout at runtime depending on the screen shape.
 <h3>Accessing layout views</h3>
 
 <p>The layouts that you specify for square or round screens are not inflated until
-<code>WatchViewStub</code> detects the shape of the screen, so your app cannot access their views
+<a href="{@docRoot}reference/android/support/wearable/view/WatchViewStub.html"><code>WatchViewStub</code></a>
+detects the shape of the screen, so your app cannot access their views
 immediately. To access these views, set a listener in your activity to be notified when
 the shape-specific layout has been inflated:</p>
 
@@ -171,14 +176,18 @@ protected void onCreate(Bundle savedInstanceState) {
 <p class="img-caption"><strong>Figure 2.</strong> Window insets on a round screen.</p>
 </div>
 
-<p>The <code>BoxInsetLayout</code> class included in the Wearable UI Library extends
+<p>The
+<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>BoxInsetLayout</code></a>
+class included in the Wearable UI Library extends
 {@link android.widget.FrameLayout} and lets you define a single layout that works for both square
 and round screens. This class applies the required window insets depending on the screen shape
 and lets you easily align views on the center or near the edges of the screen.</p>
 
-<p>The gray square in figure 2 shows the area where <code>BoxInsetLayout</code> can automatically
-place its child views on round screens after applying the required window insets. To be displayed
-inside this area, children views specify the <code>layout_box</code> atribute with these values:
+<p>The gray square in figure 2 shows the area where
+<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>BoxInsetLayout</code></a>
+can automatically place its child views on round screens after applying the required window insets.
+To be displayed inside this area, children views specify the <code>layout_box</code> atribute with
+these values:
 </p>
 
 <ul>
@@ -196,8 +205,9 @@ ignored.</p>
 <p class="img-caption"><strong>Figure 3.</strong> A layout definition that works on both
 square and round screens.</p>
 
-<p>The layout shown in figure 3 uses <code>BoxInsetLayout</code> and works on square and
-round screens:</p>
+<p>The layout shown in figure 3 uses the
+<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>&lt;BoxInsetLayout&gt;</code></a>
+element and works on square and round screens:</p>
 
 <pre>
 &lt;<strong>android.support.wearable.view.BoxInsetLayout</strong>
@@ -243,19 +253,21 @@ round screens:</p>
 <ul>
 <li>
   <p><code>android:padding="15dp"</code></p>
-  <p>This line assigns padding to the <code>BoxInsetLayout</code> element. Because the window
-  insets on round devices are larger than 15dp, this padding only applies to square screens.</p>
+  <p>This line assigns padding to the
+  <a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>&lt;BoxInsetLayout&gt;</code></a>
+  element. Because the window insets on round devices are larger than 15dp, this padding only
+  applies to square screens.</p>
 </li>
 <li>
   <p><code>android:padding="5dp"</code></p>
-  <p>This line assigns padding to the inner <code>FrameLayout</code> element. This padding applies
-  to both square and round screens. The total padding between the buttons and the window insets
-  is 20 dp on square screens (15+5) and 5 dp on round screens.</p>
+  <p>This line assigns padding to the inner {@link android.widget.FrameLayout} element. This padding
+  applies to both square and round screens. The total padding between the buttons and the window
+  insets is 20 dp on square screens (15+5) and 5 dp on round screens.</p>
 </li>
 <li>
   <p><code>app:layout_box="all"</code></p>
-  <p>This line ensures that the <code>FrameLayout</code> element and its children are boxed inside
-  the area defined by the window insets on round screens. This line has no effect on square
-  screens.</p>
+  <p>This line ensures that the {@link android.widget.FrameLayout} element and its children are
+  boxed inside the area defined by the window insets on round screens. This line has no effect on
+  square screens.</p>
 </li>
 </ul>
\ No newline at end of file
diff --git a/docs/html/training/wearables/ui/lists.jd b/docs/html/training/wearables/ui/lists.jd
index 20f8bbd59da55..0972a77f1771b 100644
--- a/docs/html/training/wearables/ui/lists.jd
+++ b/docs/html/training/wearables/ui/lists.jd
@@ -12,6 +12,11 @@ page.title=Creating Lists
   <li><a href="#adapter">Create an Adapter to Populate the List</a></li>
   <li><a href="#adapter-listener">Associate the Adapter and Set a Click Listener</a></li>
 </ol>
+<h2>Related Samples</h2>
+<ul>
+  <li><a href="{@docRoot}samples/Notifications/index.html">
+    Notifications</a></li>
+</ul>
 <h2>You should also read</h2>
 <ul>
   <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li>
@@ -23,35 +28,36 @@ page.title=Creating Lists
 <p>Lists let users select an item from a set of choices easily on wearable devices. This lesson
 shows you how to create lists in your Android Wear apps.</p>
 
-<p>The Wearable UI Library includes the <code>WearableListView</code> class, which is a list
-implementation optimized for wearable devices..</p>
-
-<p class="note"><strong>Note:</strong> The <em>Notifications</em> sample in the Android SDK
-demonstrates how to use <code>WearableListView</code> in your apps. This sample is located in
-the <code>android-sdk/samples/android-20/wearable/Notifications</code> directory.</p>
+<p>The Wearable UI Library includes the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView</code></a>
+class, which is a list implementation optimized for wearable devices.</p>
 
 <p>To create a list in your Android Wear apps:</p>
 
 <ol>
-<li>Add a <code>WearableListView</code> element to your activity's layout definition.</li>
+<li>Add a
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView</code></a>
+element to your activity's layout definition.</li>
 <li>Create a custom layout implementation for your list items.</li>
 <li>Use this implementation to create a layout definition file for your list items.</li>
-<div style="float:right;margin-left:25px;width:220px;margin-top:-25px">
-<img src="{@docRoot}wear/images/06_uilib.png" width="200" height="200" alt=""/>
-<p class="img-caption" style="text-align:center;margin-left:-10px"><strong>Figure 3:</strong>
-A list view on Android Wear.</p>
-</div>
 <li>Create an adapter to populate the list.</li>
-<li>Assign the adapter to the <code>WearableListView</code> element.</li>
+<li>Assign the adapter to the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView</code></a>
+element.</li>
 </ol>
 
+<img src="{@docRoot}wear/images/06_uilib.png" width="200" height="200" alt=""/>
+<p class="img-caption"><strong>Figure 1.</strong>
+A list view on Android Wear.</p>
+
 <p>These steps are described in detail in the following sections.</p>
 
 
 <h2 id="add-list">Add a List View</h2>
 
-<p>The following layout adds a list view to an activity using a <code>BoxInsetLayout</code>, so
-the list is displayed properly on both round and square devices:</p>
+<p>The following layout adds a list view to an activity using a
+<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>&lt;BoxInsetLayout&gt;</code></a>
+element, so the list is displayed properly on both round and square devices:</p>
 
 <pre>
 &lt;android.support.wearable.view.BoxInsetLayout
@@ -80,12 +86,14 @@ the list is displayed properly on both round and square devices:</p>
 <h2 id="layout-impl">Create a Layout Implementation for List Items</h2>
 
 <p>In many cases, each list item consists of an icon and a description. The
-<em>Notifications</em> sample from the Android SDK implements a custom layout that extends
+<a href="{@docRoot}samples/Notifications/index.html">Notifications</a> sample implements a custom
+layout that extends
 {@link android.widget.LinearLayout} to incorporate these two elements inside each list item.
 This layout also implements the methods in the
-<code>WearableListView.OnCenterProximityListener</code> interface
-to change the color of the item's icon and fade the text in response to events from
-<code>WearableListView</code> as the user scrolls through the list.</p>
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.OnCenterProximityListener.html"<code>WearableListView.OnCenterProximityListener</code></a>
+interface to change the color of the item's icon and fade the text in response to events from the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView</code></a>
+element as the user scrolls through the list.</p>
 
 <pre>
 public class WearableListItemLayout extends LinearLayout
@@ -141,9 +149,13 @@ public class WearableListItemLayout extends LinearLayout
 </pre>
 
 <p>You can also create animator objects to enlarge the icon of the center item in the list. You can
-use the <code>onCenterPosition()</code> and <code>onNonCenterPosition()</code> callback methods
-in the <code>WearableListView.OnCenterProximityListener</code> interface to manage your
-animators. For more information about animators, see
+use the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.OnCenterProximityListener.html#onCenterPosition(boolean)"><code>onCenterPosition()</code></a>
+and
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.OnCenterProximityListener.html#onNonCenterPosition(boolean)"><code>onNonCenterPosition()</code></a>
+callback methods in the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView.OnCenterProximityListener</code></a>
+interface to manage your animators. For more information about animators, see
 <a href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Animating with
 ObjectAnimator</a>.</p>
 
@@ -185,7 +197,9 @@ and a text view whose IDs match those in the layout implementation class:</p>
 
 <h2 id="adapter">Create an Adapter to Populate the List</h2>
 
-<p>The adapter populates the <code>WearableListView</code> with content. The following simple
+<p>The adapter populates the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView.OnCenterProximityListener</code></a>
+element with content. The following simple
 adapter populates the list with elements based on an array of strings:</p>
 
 <pre>
@@ -247,9 +261,10 @@ private static final class Adapter extends WearableListView.Adapter {
 
 <h2 id="adapter-listener">Associate the Adapter and Set a Click Listener</h2>
 
-<p>In your activity, obtain a reference to the <code>WearableListView</code> element from
-your layout, assign an instance of the adapter to populate the list, and set a click listener
-to complete an action when the user selects a particular list item.</p>
+<p>In your activity, obtain a reference to the
+<a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView.OnCenterProximityListener</code></a>
+element from your layout, assign an instance of the adapter to populate the list, and set a click
+listener to complete an action when the user selects a particular list item.</p>
 
 <pre>
 public class WearActivity extends Activity