Chapter 9.  Material Design

"This world is but a canvas to our imagination."                                                                  - Henry David Thoreau

In this chapter, we provide a conceptual understanding of material design and touch upon a few key principles specific to wearable app design and development. We solidify our understanding by extending our Todo app from previous chapters to incorporate a navigation drawer that lets us switch between Todo categories and view items and perform actions specific to each category.

Note

The code accompanying this chapter is available for reference on GitHub (https://github.com/siddii/mastering-android-wear/tree/master/Chapter_9). For the sake of brevity, only code snippets are included as needed. The reader is encouraged to download the referenced code from GitHub and follow along as they progress through the chapter.

Approaching material design

Your primary resource to understanding material design is material.google.com, which is the living online documentation outlining the tenets and principles of material design. It really ought to be bookmarked by any serious designer or developer enthused by material design.

While we encourage you to read through Google's documentation, we feel that it would not be terribly superfluous if we advanced an approach on how to think about material design. Our goal is to give you, as a reader interested in the material design philosophy, an intuitive and symbolic understanding of the paradigm. We hope that this brief introduction readies you with a mindset that will expedite your journey through the material design online documentation and stimulate a level of creativity that should leave you well-positioned to project your imagination onto tangible design ideas for your wearable apps.

This section is only intended for those of us who may be new to the idea and may need...

To-do item menus

Let's augment the Today Todo app with a powerful design metaphor—navigation drawers.

The first thing we need to do is add a Todos action to our arrays.xml file, as follows:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <string-array name="actions"> 
    <item>Day of Year</item> 
    <item>On this day...</item> 
    <item>Todos</item> 
    <item>Step Count</item> 
  </string-array> 
</resources> 

This is how it shows up on the list menus. Go ahead and click on the Todos menu item and we'll interact with the items in the following sections:

Next, we will implement a menu for our Todo app using the WearableNavigationDrawer component from the Android Wear API. The menu will let us choose a different view (tab) corresponding to the type of to-do item (for example, home, work, and so on) and list to-do items of that type when the drawer tab is selected.

About the navigation drawer

Navigation drawer...

The TodosActivity class

Implementing a navigation drawer involves creating a drawer layout using the WearableDrawerLayout class and adding to it a view that contains the main content of the screen. This primary view has child views that contain the contents of the drawer. The TodosActivity class will control navigation drawers and initialize drawer layouts:

public class TodosActivity extends WearableActivity implements  WearableActionDrawer.OnMenuItemClickListener  
{ 
  private static final String TAG = TodosActivity.class.getName(); 
  private WearableDrawerLayout mWearableDrawerLayout; 
  private WearableNavigationDrawer mWearableNavigationDrawer; 
  private WearableActionDrawer mWearableActionDrawer; 
  private List<TodoItemType> todoItemTypes =  Arrays.asList(TodoItemType.HOME, TodoItemType.WORK); 
  private TodoItemType mSelectedTodoItemType; 
  private TodoItemTypeFragment mTodoItemTypeFragment; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState)  
  { 
    super...

The TodoItemTypeFragment class

The TodoItemTypeFragment class is an inner class of the TodosActivity activity and contains content for each type of to-do item. For the sake of simplicity, we show some static content (highlighted in the following code). Refer to Chapter 5, Synchronizing Data, for information on synchronizing data between wearable and handheld apps:

public static class TodoItemTypeFragment extends Fragment  
{ 
  public static final String ARG_TODO_TYPE = "todo_type"; 
  TextView titleView = null; 
  TextView descView = null; 
  public TodoItemTypeFragment()  
  { 
    // Empty constructor required for fragment subclasses 
  } 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup  container, Bundle savedInstanceState)  
  { 
    View rootView = inflater.inflate(R.layout.fragment_todo_item,  container, false); 
    titleView = (TextView)  rootView.findViewById(R.id.todo_card_title); 
    descView = (TextView)  rootView.findViewById(R.id.todo_card_desc)...

The NavigationAdapter class

Navigation adapter controls what's shown in a navigational state. We implement the WearableNavigationDrawerAdapter class to populate the contents of the navigation drawer:

private final class NavigationAdapter extends WearableNavigationDrawer.WearableNavigationDrawerAdapter  
{ 
  private final Context mContext; 
  public NavigationAdapter(Context context)  
  { 
    mContext = context; 
  } 
 
  @Override 
  public int getCount()  
  { 
    return todoItemTypes.size(); 
  } 
 
  @Override 
  public void onItemSelected(int position)  
  { 
    Log.d(TAG, "WearableNavigationDrawerAdapter.onItemSelected():  " + position); 
    mSelectedTodoItemType = todoItemTypes.get(position); 
    String selectedTodoImage =  mSelectedTodoItemType.getBackgroundImage(); 
    int drawableId =  getResources().getIdentifier(selectedTodoImage, "drawable",  getPackageName()); 
    mTodoItemTypeFragment.updateFragment(mSelectedTodoItemType); 
  } 
 
  @Override 
  public String getItemText...

Navigation item

While on the Home Todos screen (if you recall, Home was the default type), let's swipe down from the top. As expected, the Home to-do type was pre-selected:

The WearableDrawerLayout class

The activity_todo_main.xml file contains the definition of the root drawer layout containing a top navigation drawer and a bottom action drawer. Take note of the menu layout highlighted:

<android.support.wearable.view.drawer.WearableDrawerLayout 
  android:id="@+id/drawer_layout" 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:app="http://schemas.android.com/apk/res-auto" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:background="@color/black" 
  tools:context=".TodosActivity" 
  tools:deviceIds="wear"> 
 
  <FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/content_frame"/> 
 
<android.support.wearable.view.drawer.WearableNavigationDrawer 
  android:id="@+id/top_navigation_drawer" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android...

Menu items

The activity_todo_drawer_menu.xml file contains the definitions of the individual drawers:

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
  <item android:id="@+id/menu_add_todo" 
  android:icon="@drawable/ic_add_to_list" 
  android:/> 
 
  <item android:id="@+id/menu_update_todo" 
  android:icon="@drawable/ic_todo_list" 
  android: /> 
 
  <item android:id="@+id/menu_clear_todos" 
 
  android:icon="@drawable/ic_clear_list" 
  android: /> 
</menu> 

While on the Home Todos index card (shown in a previous image), swiping from bottom to the top will show the action drawer:

Menu listener

Clicking on individual menu items, we just display the toast message. Like we said earlier, we want to make the code concise and easily readable. Based on the chapters we covered earlier, we should have an understanding of how to perform data synchronization for these individual menu actions. We have used the onMenuItemClick class to perform the menu listener activity, shown as follows:  

@Override 
public boolean onMenuItemClick(MenuItem menuItem)  
{ 
  Log.d(TAG, "onMenuItemClick(): " + menuItem); 
  final int itemId = menuItem.getItemId(); 
  String toastMessage = ""; 
  switch (itemId)  
  { 
    case R.id.menu_add_todo: 
    toastMessage = "Adding " +  mSelectedTodoItemType.getTypeValue() + " Todo"; 
    break; 
 
    case R.id.menu_update_todo: 
    toastMessage = "Updating " +  mSelectedTodoItemType.getTypeValue() + " Todo"; 
    break; 
 
    case R.id.menu_clear_todos: 
    toastMessage = "Clearing " +  mSelectedTodoItemType.getTypeValue() + " Todos"; 
    break; ...

Switching to-do types

Now if we pull the drawer down from the top edge of the screen and swipe from right to left, we switch to a different to-do item as shown in the following image, which in effect displays a new navigation item:

If we pull the drawer back to the top, it has the effect of setting the navigation item to the current selection. This happens using the onItemSelected method of the WearableActionDrawer.OnMenuItemClickListener class implemented by the TodosActivity activity:

@Override 
public void onItemSelected(int position)  
{ 
  Log.d(TAG, "WearableNavigationDrawerAdapter.onItemSelected(): "  + position); 
  mSelectedTodoItemType = todoItemTypes.get(position); 
  String selectedTodoImage =  mSelectedTodoItemType.getBackgroundImage(); 
  int drawableId = getResources().getIdentifier(selectedTodoImage,  "drawable", getPackageName()); 
  mTodoItemTypeFragment.updateFragment(mSelectedTodoItemType); 
} 

Here is what we see:

Pulling from bottom to top, we see the menu items such...

Summary

In this chapter, we obtained an intuitive understanding of what material design really is, and we explored several key principles relevant to Android Wear design and development. We implemented navigation drawers for our Todo app that add the ability to switch between to-do types and view the to-do items that perform actions specific to each type.