Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 1fcfca43 authored by sreevanis's avatar sreevanis
Browse files

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

bug:29534359
Change-Id: I359d0d60642360793e9f82f59a428a95b39fba60
parent 07340a65
Loading
Loading
Loading
Loading
+56 −38
Original line number Original line Diff line number Diff line
@@ -12,7 +12,7 @@ page.image=/wear/preview/images/card_drawer.png
    <ol>
    <ol>
      <li><a href="#create a drawer">Create a Drawer Layout</a></li>
      <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="#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="#listen to events">Listen for Drawer Events</a></li>
      <li><a href=#peeking">Peeking Drawers</a></li>
      <li><a href=#peeking">Peeking Drawers</a></li>
    </ol>
    </ol>
@@ -59,7 +59,8 @@ the opposite direction. </p>
<div class="cols">
<div class="cols">


<p>This lesson describes how to implement action and navigation drawers in your
<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>
</p>


<h2 id="create a drawer">Create a Drawer Layout</h2>
<h2 id="create a drawer">Create a Drawer Layout</h2>
@@ -99,14 +100,17 @@ To add an action or a navigation drawer, declare your user interface with a
&lt;/android.support.wearable.view.drawer.WearableDrawerLayout>
&lt;/android.support.wearable.view.drawer.WearableDrawerLayout>


</pre>
</pre>

<h2 id="initialize">Initialize the Drawer List</h2>
<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
<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}
drawers list of items. You should implement {@code WearableNavigationDrawerAdapter}
to populate the navigation drawer contents. To populate the action drawer with
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>The following code snippet shows how to initialize the contents of your drawers:
</p>
</p>

<pre>
<pre>
public class MainActivity extends  WearableActivity implements
public class MainActivity extends  WearableActivity implements
WearableActionDrawer.OnMenuItemClickListener{
WearableActionDrawer.OnMenuItemClickListener{
@@ -149,27 +153,42 @@ WearableActionDrawer.OnMenuItemClickListener{
}
}


</pre>
</pre>
<h2 id="creating">Create a Custom View Drawer</h2>

<h2 id="creating">Create a Custom Drawer View</h2>


<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the
<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>
<code>WearableDrawerLayout</code>. To set the peek view and drawer contents, add
<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>
 them as children of the {@code WearableDrawerView} and specify their IDs in the
 instead of manually adding the view to the hierarchy. You must also specify the
 {@code peek_view} and {@code drawer_content} attributes respectively. You must
  drawer position with the <code>android:layout_gravity</code> attribute. </p>
 also specify the drawer position with the {@code android:layout_gravity}
<p> The following example specifies a top drawer:</p>
 attribute. </p>
<pre>
&lt;android.support.wearable.view.drawer.WearableDrawerLayout&gt;
    &lt;FrameLayout 
    android:id=”@+id/content” /&gt;


    &lt;WearableDrawerView
<p> The following example specifies a top drawer with peek view and drawer
        android:layout_width=”match_parent”
contents:</p>
        andndroid:layout_height=”match_parent”

        android:layout_gravity=”top”&gt;
<pre>
   &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
        &lt;FrameLayout
            android:id=”@+id/top_drawer_content” /&gt;
            android:id="@id/drawer_content"
    &lt;/WearableDrawerView&gt;
            android:layout_width="match_parent"
&lt;/android.support.wearable.view.drawer.WearableDrawerView&gt;
            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>
</pre>


@@ -184,9 +203,8 @@ WearableActionDrawer.OnMenuItemClickListener{
<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.
your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer.
 This feature is especially useful because it allows immediate access to the
 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>