Merge \"docs: Updated Create custom drawer view section with new xml attributes.\" into mnc-io-docs
am: 9f1952a77b
Change-Id: Ied1d1112ef47428795113ed86d1ed9b1bf5b30d0
diff --git a/docs/html/wear/preview/features/ui-nav-actions.jd b/docs/html/wear/preview/features/ui-nav-actions.jd
index 1ba275f..fb14264 100644
--- a/docs/html/wear/preview/features/ui-nav-actions.jd
+++ b/docs/html/wear/preview/features/ui-nav-actions.jd
@@ -12,7 +12,7 @@
<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 @@
</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 @@
<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 @@
</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;
-
+
...
-
+
@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 @@
}
</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>
-<android.support.wearable.view.drawer.WearableDrawerLayout>
- <FrameLayout
- android:id=”@+id/content” />
-
- <WearableDrawerView
- android:layout_width=”match_parent”
- andndroid:layout_height=”match_parent”
- android:layout_gravity=”top”>
- <FrameLayout
- android:id=”@+id/top_drawer_content” />
- </WearableDrawerView>
-</android.support.wearable.view.drawer.WearableDrawerView>
+ <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">
+ <FrameLayout
+ android:id="@id/drawer_content"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent">
+ <!-- Drawer content goes here. -->
+ </FrameLayout>
+ <LinearLayout
+ android:id="@id/peek_view"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_gravity="center_horizontal"
+ android:orientation="horizontal">
+ <!-- Peek view content goes here. -->
+ <LinearLayout>
+ </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</code>(<code>Gravity.BOTTOM);}</pre>
+<pre>{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}</pre>
-<p>You can also call {@code setPeekContent()} on your drawer to display a custom
- view when the drawer is peeking.</p>
+