Material Design Navigation Drawer II: Styling
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 found interesting about it, hoping to help and learn from others.
This is the second of 3 publications. Check out the first and third chapters:
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 styling the Drawer. It’s not covering all the styling stuff that you can see in the guidelines, just those with something to point out from my point of view.
Hierarchy
In the past, the Navigation Drawer and the ActionBar were at the same level in the view hierarchy.
As the pattern evolved, it started to have some inconsistencies. When Material Design arrived, it was clear that this two pieces of paper could not live any longer at the same level having different hierarchies in the view. There was a lot of chat about it, and even more, and Google didn't help much, but now the Navigation Drawer position is define as the next:
The left nav drawer spans the full height of the screen and the drawer is below the status bar. Everything below the drawer will be darkened by a scrim. All the content is still visible under the scrim.
Note in the image that the right drawer is slightly different.
Note: I assume you are using the AppCompat toolbar.
Since the Toolbar is another view in your hierarchy, just locate the toolbar under the drawer layout as you would do with any other view.
You don't have to worry if you see something like this in some Google apps:
Google+ Photos is probably one of the last Google apps with the Drawer not over the actionBar/Toolbar and I'm sure in next updates will be fixed.
The Spin Bars
Do you remember that fancy icon animation in the actionBar/toolbar when the drawer was open? The animation was not great in Holo but Material Design made it look great!
I think it first came out with the Google Play Store and most of developers and designers loved it.
But just weeks after that, the Drawer started to appear over the animation as explained in the previous section. At that time it was strange because it even appeared on Google Material Design videos and promo features.
I remember that a lot of people behave like if the first thing to do when migrating to material design was the burger/arrow thing. In the first Google implementations the drawer wasn't on top of the toolbar and you could see that fancy animation. After the guidelines came out there was a strange moment when most of Google apps were doing exactly the opposite the Material Design guidelines were telling us. While I'm writing this most of the Google apps are following the guidelines and I expect to see all of them with the drawer on top of the toolbar soon.
Looks to me that that design decision was really late in time. The animation of the icon was already on the SDK released and activated by default.
For some reason, even after laying out the Drawer on top of everything, most of Google apps still have that animation on (Note: in the process of writing this entry Gmail and Inbox have deactivated it), even if you can barely see it (you can see it if you pay attention and move the drawer slowly). It really annoys me and once you see it you can't unsee it. So I've decided to turn it off.
It looks easy at the first moment when you see the next option in the DrawerArrowStyle:
<item name=”spinBars”>true</item>
That is defined in Android Developers like:
Whether bars should rotate or not during transition. Must be a boolean value, either “true” or “false”.
The problem is it doesn’t work. The bars just rotate in a strange way if you set it to false.
The way I found to disable it is to override the onDrawerSlide method. Just take a look at the projects linked down below.
Since the icon animation is barely visible there’s no reason to keep it on. If you don't pay attention you can't see it, if you pay attention and you see it then you don't understand what’s going on there
Profile Picture
The profile picture is rounded. There are different ways to get a rounded image, but I always remember this publication by Romain Guy talking about how to do it. So I decided to go with CircleImageView, it’s based on the Romain Guy techniques which can't be wrong. I haven't checked the one used on the Google IO app but might be worth taking a look at it.
The image has a white border in Google Play Movies and Google Play Books. The other Google apps don’t have such a border. Google+ and Hangouts have the profile picture in the toolbar and it has the white border tho.
Note: Check out the profile picture size
The profile image picture is rounded and usually without any border. Make sure you get the rounded shape with libraries following the techniques recommended by Romain guy.
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 text on this area is white, and to make sure it’s visible, you can apply a foreground or translucent black overlay to the cover photo image. I’ve tried with different values and 40-50% black is quite good. You don't want to make the photo invisible neither make the text unreadable.
What I've done is to use a foreground in a FrameLayout. I don't know if this is the best approach, hope to receive some feedback on it. I don't have any option to switch between accounts, to me the whole layout/section is clickable with a touch feedback or ripple in Lollipop or above. Make sure you use a centerCrop scaleType to make it look nice.
If you take a look at the photo above the Drawer is visible and below the status bar. Google apps are still on the migrating to this pattern in the moment I'm writing this. Gmail, Inbox, Keep, Play Store and Hangouts already have this layout while others are in the process. This is only happening at the moment on apps running Lollipop and above.
Even if the current Google IO application in the Play Store has the Navigation Drawer completely wrong, they have the code better and ready for a next release (has been like there for a while… probably they are updating before the Google IO conference this year in a couple of months from now)
The magic bit is in the Google ScrimInsets layout. Copy, paste and it’s done. You can try to do it yourself. I felt that Google guys would do it better than me. Take a look at the code in the projects down below because it requires some work with themes/styles as well.
I have some doubts whether the ScrimInsets layout should be applied in versions below Lollipop or not. I know is possible to get it working on Kit Kat but Google is not doing it. It’s true that “invading” the status bar and/or navigation bar is not a thing below Lollipop and probably that’s the reason behind.
Note: Check out the cover photo size
The Navigation Drawer under the status bar occurs only in Lollipop. Invading the status or navigation bars is not a thing below Lollipop and probably that’s the reason is not happening there.
Background, icon and text in selectable rows
When it comes to styling the main rows in the drawer we have to deal with 3 elements (background, icon and text) and 3 different states (default, selected and pressed) for each element on each row. Not everything is written down on the specs, but we must read the specs, take a look at Google apps and other good looking apps and try to figure out how to make it good looking in a Material Design way.
Okay, now let’s take a look at some Google apps to collect some clues. In the next pictures, the first row is the default state, the second row is the selected state, and the third one is the pressed state.
All pictures above looks similar but all of them are different. Summary:
Google apps look quite consistent, but when you pay attention to detail you can discover more than 10 different stylings on the Navigation Drawer selectable row items at the moment writing this article
- Rule of Thumb
After some tries and looking at the guidelines and Google apps, this is what I’ve come up with.
How to achieve it
I really would like to know how other people are doing this things, this is how I did it.
First of all I'm using two drawables for the backgrounds. A specific on res/drawable-v21 for Lollipop and above versions and another in res/drawable for lower versions. The reason is ripples are not a thing below 5.0.
Use only Ripples on Lollipop and above. Ripples are not supported for versions below 5.0, and more important, they are not expected.
The ripple appears every time you press a row, either it’s an unselected one or a selected one. So what you actually have in res/drawable-v21 is a selector with a couple of items containing ripples. This is because we want to show the same ripple for selected and unselected rows when they are pressed, but the background is white on unselected and grey_200 on the selected ones.
In res/drawable all you need is a selector without the ripples that depends on the layout state.
Icons
What I’ve tried the last months is to avoid having the same icon in different colors. So what I’ve came up with is all my icons are white flat color. Then I apply a tint with the desired color and there you have your colored icon. The advantages of this is you don't have to create new icons every time you decide to change a color, you have the icons you need from Google itself in different sizes and colors, and you can try different colors in just seconds on the same icon to figure out which one is the best. As well you save some space if you are using different colors with the same icon. If you need the icon changing it’s color depending on the state (pressed, selected…) you can do it just setting a color state list resource to your tint.
One way achieving this is using DrawableCompat to work on versions below Lollipop.
Header and footer behaviour
The guidelines are quite flexible here. It´s basically up to your design.
The upper section (aka account section) appears sometimes pinned, some scrollable. In my opinion this should be pinned as far as your design allows this. The drawer looks better, is consistent and is always the best way to reach your profile.
The footer section (aka settings and support) can be pinned or not. If you take a look at the Google Apps, in some is pinned, in others is at the bottom of the scroll. If you have so few options that they don't get the bottom of the drawer, the footer is just after the main rows.
In my opinion, pinned is the best approach but you can do some exceptions. One exception for example is when you have the header pinned, some entries are fixed and then you have a scrollable section in the drawer. If the scrollable section has such a little space that it looks stupid (1 or 2 rows) then probably you want to get more space and unpinning the footer is a good option.
The header and the footer should be pinned except in those cases when the structure of the drawer needs space to look and behave nicely.
Due to the variety on the drawer options, paths, structure… there’s no really a rule of thumb here.
Summarizing
So that was it about styling the Drawer. It takes more time to know what you want to achieve than doing it.
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.
Resources
- Google Official Material Design icons
- Material Design Color Definitions
- Navigation Drawer pattern
- Material Design metrics and keylines
- Toolbar metrics
