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.
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{
}
-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:
+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>
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().
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.
{@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.