导航抽屉图案材料设计

Question

Google just posted in their blog a post discussing best practices for implementing the material design. It says:

If the app uses a navigation drawer, it follows the newer material design interactions and styling (Figure 7). The drawer appears in front of the app bar. It also appears semitransparent behind the status bar.

But, if you look at how it is implemented in apps like Google Play Store and Inbox by Gmail, the navigation drawer is located below the Action Bar (Toolbar).

However, apps like Play Newsstand and Pushbullet use their drawer above the toolbar, as recommended. So, which one should I use?

One side note, if I should place the drawer above the toolbar, why did Google implement the animation in the hamburger icon at all(ActionBarDrawerToggle)?

Answer 1

You should use the version from the Material Specs and display your left drawer over the bar.

The width of the NavigationDrawer on Inbox is also incorrect:

The width of the side nav is equal to the width of the screen minus the height of the action bar, or in this case 56dp from the right edge of the screen.

Mobile: Width = screen width - app bar height

Desktop: Max width for the left nav is 400dp. The right nav can vary depending on content.

The animation also shows when you pull out the right drawer, which should be displayed below the drawer. Further more, your drawer can be (semi-)translucent.