Material Design Navigation Drawer I: Sizing
A series of articles digging on the Material Design Navigation Drawer.
Intro
It seems that the Navigation Drawer is here to stay. I like the pattern besides some criticism, so I decided to implement it on a couple of apps I'm working on. What you can read here are just my thoughts about what I found interesting about it, hoping to help and learn from others.
This is the first of 3 publications. Check out the others:
Inception
The drawer was always a hot topic. When the Material Design concepts started to appear, there was some confusion and even after the guidelines came out things weren't completely clear.
Nowadays you have awesome libraries out there and even the some Google code to take a look at… but if you are here is probably because you like coding for fun.
In this publication I’m gonna talk about sizing the Drawer. It’s not covering all the sizing stuff that you can see in the guidelines, just those with something to point out from my point of view.
Width
Note: this section is just and extended thought of what you can read here, where you can see in detail where the confusion comes from.
The confusion with the width is because sometimes the defined as…
The maximum width of the nav drawer is 5 times the standard increment (56 dp on mobile and 64dp on tablet).
…while on the other hand he can see this image on the guidelines…
When you try to mix both rules, you realize they don’t match. 56 times 5 is 280, and the Nexus 4 and Nexus 5 are above that on Google maths.
When It comes to design conflicts, first thing I do is to take a look at other apps, specially Google apps. In the width department, Google apps are divided in the next two alternatives (at the moment I'm writing this):
Alternative 1: The Drawer width is 5 times incremental size a.k.a. Toolbar/Action Bar size (56 on phones and 64 on tablets, this is 280 max width on phones and 320 max width on tablets).
Google apps following this rule (installed on my phone):
- Calendar
- Photos
- Youtube
- Earth
- Now
- Google IO
- My Maps
- Youtube Creator Studio
- Docs
- News and Weather
- Sheets
- Play Games
- Slides
Alternative 2: Following the rule of max width 320(mobile)/400(tablet) as it were mentioned in the guidelines at some point and in the Roman Nurik post on Android Developers:
Google apps following this rule (installed on my phone):
- Hangouts
- Gmail
- Inbox
- Maps
- Music
- Play Store
- Keep
- Drive
- Play Books
- Play Movies
- Play Newsstand
It seems the first alternative was the first Google’s approach, but then they came up with the second alternative (that is trendy now), so probably in the near future we'll see like the 320/400 max width is the standard for all Google apps.
The 320 dp on phones and 400 dp on tablets/desktop is the max width standard for all Google apps in Material Design
According to that the Nexus 4 and Nexus 6 reach the max allowed drawer width size (320 dp). On the other hand the Nexus 5 doesn’t (304 dp). The reason is the only one going below 320 dp when you subtract the standard incremental (56 dp / 64 dp) is the Nexus 5.
- Nexus 4 : 384 dp — 56/64 dp
- Nexus 5: 360 dp — 56/64 dp
- Nexus 6: 411–56/64 dp
(Yes, the Nexus 5 has actually less wide space on screen than the Nexus 4)
Reached this point I wondered what happen when you talk about standard increment in Holo instead of Material Design. The standard increment in Android 5.0 and above is 56 dp for phones and 64 dp for tablets but in versions below Lollipop this increment is 48 dp for phones and 56 dp for tablets. You can check this yourself if you ask for android.R.attr.actionBarSize.
If you rely (as I do) on android.R.attr.actionBarSize to size the action bar and make your maths involving the standard increment (I saw Chris Banes doing it, as well Antonio Leiva Gordillo here) the Nexus 5 on Lollipop and above will have (360–56=)304 dp wide for the drawer, but the same Nexus 5 on Android Kit Kat will have a(360–48=)312 dp wide drawer.
The toolbar has a different size on landscape as we can read on the guidelines as Ian Lake pointed me out.
Probably at this point you need this:
The Navigation Drawer width depends on the device smallest width, orientation and Android version
Note: I was using AppCompat theme in all tests. Would be interesting to test how it changes using Material theme or Holo theme.
- Rule of Thumb
Navigation Drawer width is the minimum (NavDrawerMaxWidth , (ScreenSize — ActionBarSize)) where NavDrawerMaxWidth is 320 dp for phones and 400 dp for tablets. Make sure you make all the maths either in dps or pixels.
Update — August 2016
The specs for the drawer max width on August 2016 are 280dp for phones and 320dp for tablets. That’s the default behaviour on the Navigation View from the Android Design Support Library as well, and some of the new Google Apps are using that measure.
That’s different from the 320dp/400dp described here when this article was first written. While in some devices it doesn’t make any difference (they don’t reach the max width) in other devices with it makes a difference.
Let’s look at same samples:
For tablets I think the max of 320dp it’s an obvious better choice than 400dp. On real devices it’s more clear than on the screenshots above.
For phones I still think 320dp is the best looking maximum. This means a lot of devices will still have a drawer below 320dp, but devices like Nexus 5X and 6P will have a wider drawer that looks in my opinion better. This difference is clear on the Nexus 6P screenshots above, where the left (280dp) looks too narrow. Specially on the drawer header (account section) where due to the fact that the aspect ratio of the header is 16:9 it makes it shrink dramatically when you substract those 40dp to the drawer width.
Cover photo
The cover photo (different from the profile photo), is the background in the account/header section. This is the upper section where usually you can change between your accounts, see your display name, email and your profile picture.
The aspect ratio of this area is 16/9. What this means is that the size (width and height) changes from one device to another because the drawer width itself is changing as mentioned above, so it’s not a fixed size. However last time I check, the Google IO app had hardcoded 140 dp / 164 dp height and it seems to me that they don't change much on the size.
- Rule of thumb
HeaderHeight = NavDrawerWidth * 9/16
The Profile Picture
When I took a look at the Google code for the Google IO app I saw the diameter of the profile image as 40 dp / 64 dp. First thing you realize is that in the Google IO app the profile picture in phones is smaller than the current Inbox or Gmail profile picture.
So I tried to figure out which size Gmail, Hangouts, Play Store… are using, because they look nicer.
So as you can see, nothing very clear in this area. Gmail is using 64 dp diameter for the profile image picture no matter the device.
I’d say the 56 dp /64 dp on phone/tablet is a good rule of thumb but always 64 dp looks good to me.
Note: To get a grid like the one in the screenshots check GridWichterle or Keyline Pushing apps.
For profile pictures 64 dp for all devices looks good
Summarising
So that was it about sizing the Drawer. It’s nothing difficult of special but to me wasn't as trivial as just hard coding some dimensions.
If you want to know how to style the drawer, check out the other two articles.
I hope to receive some comments, feedback or whatever from you. I write this stuff to help others and learn from them.
Have fun!
Update — June 2015
In the Google IO 2015, Google released the Android Design Support Library. It’s the recommended and easy way to add a Nav Drawer to your apps.
In the Github project down below, there are two branches: with and without the Android Design Support Library. Check them out.
