From 1fcfca43e805daa9bc30cd7bc0270149c8046eeb Mon Sep 17 00:00:00 2001 From: sreevanis Date: Tue, 21 Jun 2016 20:25:55 -0700 Subject: [PATCH] docs: Updated Create custom drawer view section with new xml attributes. bug:29534359 Change-Id: I359d0d60642360793e9f82f59a428a95b39fba60 --- .../wear/preview/features/ui-nav-actions.jd | 92 +++++++++++-------- 1 file changed, 55 insertions(+), 37 deletions(-) diff --git a/docs/html/wear/preview/features/ui-nav-actions.jd b/docs/html/wear/preview/features/ui-nav-actions.jd index 1ba275fa97c14..fb1426401695a 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 @@ page.image=/wear/preview/images/card_drawer.png
  1. Create a Drawer Layout
  2. Initialize the Drawer List
    3. -
  3. Create a Custom View Drawer
    4. +
  4. Create a Custom Drawer View
  5. Listen for Drawer Events
  6. Peeking Drawers
@@ -37,8 +37,8 @@ page.image=/wear/preview/images/card_drawer.png

As part of the Material Design - 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.

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 API reference.

Create a Drawer Layout

@@ -99,41 +100,44 @@ To add an action or a navigation drawer, declare your user interface with a </android.support.wearable.view.drawer.WearableDrawerLayout> +

Initialize the Drawer List

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).

+a list of actions, inflate an XML file into the Menu (via {@code MenuInflater}). +

The following code snippet shows how to initialize the contents of your drawers:

+ 
 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 @@ WearableActionDrawer.OnMenuItemClickListener{
 }
-

Create a Custom View Drawer

-

To use custom views in drawers, add WearableDrawerView to the -WearableDrawerLayout. To set the contents of the drawer, call -setDrawerContent(View) - instead of manually adding the view to the hierarchy. You must also specify the - drawer position with the android:layout_gravity attribute.

-

The following example specifies a top drawer:

+

Create a Custom Drawer View

+ +

To use custom views in drawers, add WearableDrawerView to the +WearableDrawerLayout. 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.

+ +

The following example specifies a top drawer with peek view and drawer +contents:

+ 
-<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>

Listen for Drawer Events

-

To listen for drawer events, call {@code setDrawerStateCallback()}on your +

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 onDrawerOpened(), onDrawerClosed(), and onDrawerStatechanged().

Peeking Drawers

-

To set the drawers to temporarily appear, call peekDrawer() on +

To set the drawers to temporarily appear, call peekDrawer() 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.

+ alternate drawer views or actions associated with it:

+ +
{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}
-
{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}
-

You can also call {@code setPeekContent()} on your drawer to display a custom - view when the drawer is peeking.