docs: Updated Create custom drawer view section with new xml attributes.

bug:29534359
Change-Id: I359d0d60642360793e9f82f59a428a95b39fba60

docs/html/wear/preview/features/ui-nav-actions.jd

@@ -12,7 +12,7 @@ page.image=/wear/preview/images/card_drawer.png
     <ol>
       <li><a href="#create a drawer">Create a Drawer Layout</a></li>
       <li><a href="#initialize">Initialize the Drawer List</a></li>
-      <li><a href="#creating">Create a Custom View Drawer</a></li>
+      <li><a href="#creating">Create a Custom Drawer View</a></li>
       <li><a href="#listen to events">Listen for Drawer Events</a></li>
       <li><a href=#peeking">Peeking Drawers</a></li>
     </ol>
@@ -37,8 +37,8 @@ page.image=/wear/preview/images/card_drawer.png
 </div>
 </div>
 <p>As part of the <a href="http://www.google.com/design/spec-wear">Material Design</a>
- for Android Wear, Wear 2.0 adds interactive navigation and action drawers. 
- The navigation drawer appears at the top of the screen and lets users jump to 
+ for Android Wear, Wear 2.0 adds interactive navigation and action drawers.
+ The navigation drawer appears at the top of the screen and lets users jump to
  different views within
 the app, similar to the navigation drawer on a phone. The action drawer appears
 at the bottom of the screen and provides context-specific actions for the user,
@@ -59,7 +59,8 @@ the opposite direction. </p>
 <div class="cols">
 
 <p>This lesson describes how to implement action and navigation drawers in your
-app using the {@code WearableDrawerLayout} APIs.
+app using the {@code WearableDrawerLayout} APIs. For more information, see the
+downloadable <a href="{@docRoot}preview/setup-sdk.html#docs-dl">API reference</a>.
 </p>
 
 <h2 id="create a drawer">Create a Drawer Layout</h2>
@@ -99,41 +100,44 @@ To add an action or a navigation drawer, declare your user interface with a
 &lt;/android.support.wearable.view.drawer.WearableDrawerLayout>
 
 </pre>
+
 <h2 id="initialize">Initialize the Drawer List</h2>
 <p>One of the first things you need to do in your activity is to initialize the
 drawers list of items. You should implement {@code WearableNavigationDrawerAdapter}
 to populate the navigation drawer contents. To populate the action drawer with
-a list of actions, inflate an XML file into the Menu (via MenuInflater).</p>
+a list of actions, inflate an XML file into the Menu (via {@code MenuInflater}).
+</p>
 
 <p>The following code snippet shows how to initialize the contents of your drawers:
 </p>
+
 <pre>
 public class MainActivity extends  WearableActivity implements
 WearableActionDrawer.OnMenuItemClickListener{
     private WearableDrawerLayout mwearableDrawerLayout;
     private WearableNavigationDrawer mWearableNavigationDrawer;
     private WearableActionDrawer mWearableActionDrawer;
-    
+
     ...
-    
+
     &#64;Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
-        
+
         ......
-        
-        
+
+
         // Main Wearable Drawer Layout that wraps all content
         mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout);
-        
+
         // Top Navigation Drawer
         mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer);
         mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));
 
         // Peeks Navigation drawer on the top.
         mWearableDrawerLayout.peekDrawer(Gravity.TOP);
-        
+
         // Bottom Action Drawer
         mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);
 
@@ -149,44 +153,58 @@ WearableActionDrawer.OnMenuItemClickListener{
 }
 
 </pre>
-<h2 id="creating">Create a Custom View Drawer</h2>
 
-<p>To use custom views in drawers,  add  <code>WearableDrawerView</code> to  the
-<code>WearableDrawerLayout</code>. To set the contents of the drawer, call <code>
-<a href="https://x20web.corp.google.com/~psoulos/docs/reference/android/support/wearable/view/drawer/WearableDrawerView.html#setDrawerContent(android.view.View)">setDrawerContent(View)</a></code>
- instead of manually adding the view to the hierarchy. You must also specify the
-  drawer position with the <code>android:layout_gravity</code> attribute. </p>
-<p> The following example specifies a top drawer:</p>
+<h2 id="creating">Create a Custom Drawer View</h2>
+
+<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the
+<code>WearableDrawerLayout</code>. To set the peek view and drawer contents, add
+ them as children of the {@code WearableDrawerView} and specify their IDs in the
+ {@code peek_view} and {@code drawer_content} attributes respectively. You must
+ also specify the drawer position with the {@code android:layout_gravity}
+ attribute. </p>
+
+<p> The following example specifies a top drawer with peek view and drawer
+contents:</p>
+
 <pre>
-&lt;android.support.wearable.view.drawer.WearableDrawerLayout&gt;
-    &lt;FrameLayout 
-    android:id=”@+id/content” /&gt;
-
-    &lt;WearableDrawerView
-        android:layout_width=”match_parent”
-        andndroid:layout_height=”match_parent”
-        android:layout_gravity=”top”&gt;
-        &lt;FrameLayout 
-            android:id=”@+id/top_drawer_content” /&gt;
-    &lt;/WearableDrawerView&gt;
-&lt;/android.support.wearable.view.drawer.WearableDrawerView&gt;
+   &lt;android.support.wearable.view.drawer.WearableDrawerView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_gravity="top"
+        android:background="@color/red"
+        app:drawer_content="@+id/drawer_content"
+        app:peek_view="@+id/peek_view">
+        &lt;FrameLayout
+            android:id="@id/drawer_content"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+            &lt;!-- Drawer content goes here.  -->
+        &lt;/FrameLayout>
+        &lt;LinearLayout
+            android:id="@id/peek_view"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_horizontal"
+            android:orientation="horizontal">
+            &lt;!-- Peek view content goes here.  -->
+        &lt;LinearLayout>
+    &lt;/android.support.wearable.view.drawer.WearableDrawerView>
 
 </pre>
 
 <h2 id="listen to events">Listen for Drawer Events</h2>
-<p>To listen for drawer events, call {@code setDrawerStateCallback()}on your
+<p>To listen for drawer events, call {@code setDrawerStateCallback()} on your
 {@code WearableDrawerLayout} and pass it an implementation of
 {@code WearableDrawerLayout.DrawerStateCallback}. This interface provides callbacks
  for drawer events such as <code>onDrawerOpened()</code>,
  <code>onDrawerClosed(),</code> and <code>onDrawerStatechanged()</code>.</p>
 
 <h2 id="peeking">Peeking Drawers</h2>
-<p>To  set the drawers to temporarily appear, call  <code>peekDrawer()</code> on
+<p>To set the drawers to temporarily appear, call <code>peekDrawer()</code> on
 your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer.
  This feature is especially useful because it allows immediate access to the
- alternate drawer views or actions associated with it. </p>
+ alternate drawer views or actions associated with it: </p>
+
+<pre>{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}</pre>
 
-<pre>{@code mWearableDrawerLayout.peekDrawer</code>(<code>Gravity.BOTTOM);}</pre>
 
-<p>You can also call {@code setPeekContent()} on your drawer to display a custom
- view when the drawer is peeking.</p>