Material Design-compliant drawer navigation effect

Material Design-compliant drawer navigation effect

• Original link: Navigation Drawer styling according to Material Design
• Translator: wly2014
• Reviewer: chaossss
• Status: Proofreading Complete

Objective:

Now it seems that the drawer navigation has become one of the mainstream navigation modes. Despite all the criticism, I still liked the style, so I decided to add the control to the few apps I wrote. This article would like to help the Android developers who read this article learn some knowledge by introducing me to interesting places in drawer navigation, and learn more from other people's comments.

This is the second article in three articles. Welcome to the first and third articles:

* [Material Design下的抽屉导航的大小](https://medium.com/@sotti/navigation-drawer-styling-under-material-design-f0767882e692)* Material Design下的抽屉效果的行为（敬请期待）

You can view the section on the drawer navigation in the Material Design guide below:

* [Navigation Drawer pattern](http://www.google.com/design/spec/patterns/navigation-drawer.html)* [Material Design metrics and keylines](http://www.google.com/design/spec/layout/metrics-keylines.html#)* [Toolbar metrics](http://www.google.com/design/spec/layout/structure.html#structure-toolbars)

Begin:

Drawer navigation has long been a hot topic of debate. When the Material design specification was just released, the drawer-type navigation was in an awkward position in the specification, making it confusing for developers to use drawer-type navigation even after the development guide under the Material design specification came out, about how the Android There is no clear answer to the drawer-style navigation in development.

Now, although there are some beautiful libraries here, and even some of the Google source can take a look ... But the reason you're here is probably because you're passionate about programming.

In this article, I'll talk about how to use the drawer style, but not all the styles on the Material Design guide, just pick up something I think needs to be emphasized.

You ready?

Position

In the past, the drawer navigation bar and the ActionBar were at the same View level

With the development of this design pattern, the contradictory places are beginning to surface ... It is clear from Material Design that two pages at different view levels cannot coexist in the same view level in the same parent layout. There's been a lot of discussion about this issue, but more importantly, Google doesn't give a good explanation, but the final drawer navigation has a recognized definition:

When left-drawer navigation is turned on, the navigation bar should be the same height as the screen, but below the status bar. In addition, any other content below the drawer layer should be shaded, but the content is visible.

The left-hand navigation drawer spans the height of the screen and covers the status bar below. The things under the drawer will darken. But it is still visible.

Note that the drawer on the right side of the chart is slightly different.

Note: I assume that you are using AppCompat toolbar

Since toolbar is another view on the view level, you might want to put toolbar under the layout of the drawer, just like any other view.

Don't worry if you see something like this on Google Apps:

Google + photos might be the last to use a drawer, but not a Google app that covers Actionbar/toolbar, but I think he should be changed soon.

Rotate title icon

Do you remember the beautiful icon animation in the Actionbar/toolbar when the drawer was opened? This animation is not very good under the Holo theme, but it is very beautiful under the matarial Design.

I think a lot of developers and designers would love it when it first appeared on the Google Play store.

The animation began to appear in the drawer navigation only a few weeks later. It looked special at the time because it appeared on Google Material Design videos and promo features.

I remember a lot of people use this hamburger/arrow icon animation when they first develop with the matarial design specification. When Google first implemented the drawer navigation bar, it didn't put it on top of the ToolBar, so you could see this beautiful animation. But after the Material design Guide was released, there was a strange phenomenon, and many Google apps were doing things that ran counter to the Material design guidelines. Even now I write this blog post, most of the application is still following the Material Desgin guide, but I still hope that the drawer navigation bar can be on the Toolbar above.

In my opinion, Material design has been released a little late. Because icon animations already appear in the published SDK and are used by default.

For some reason, even though the drawer navigation bar is required to be laid out on top of other view, most Google Apps will still have this animation (note: Gmail and inbox have been deactivated while writing this article), even if it's hard to find it (but if you look closely, You can still see the animation in a slow-moving drawer-style navigation. Let me very uncomfortable is: once you see, and will not be tempted to look at every time, the loss of the candle. Therefore, I also decided to turn off this animation effect.

At first glance, Drawerarrowstyle's parameters are easy to understand:

< item name= "Spinebars" > True </item>

The Android developers is defined as follows:

In the process of moving the drawer navigation bar, whether the icon should rotate or not, set a Boolean value: either True or false.

But the problem is that it doesn't work. If you set it to false,bars it will rotate in a strange way.

The solution I found was: Overwrite the Ondrawerslide method. See the link below for gist.

Since the visibility of this icon animation is poor, there is no need to keep it. If you don't watch it, you can't see it, but when you look at it and see it, you don't know what's going on.

Profile picture

This profile picture is round, and there are many ways we can turn the picture into a circle, but every time I need to implement this requirement, I think of Romain guy's method. So this time I still use Romain guy's Circleimageview, after all, "letter rm, no bug." Someone might refer to the App that was used at the Google IO conference, and I haven't been able to understand its implementation, which may be worth a look.

On Google Paly movies and Google Paly books, this picture has a white border. Other Google apps don't. Google + and Hangouts's profile pictures are on the toolbar, but they have a white border.

Note: View the profile picture size

The profile picture is round and usually has no border. It is recommended that you get the circle by Romain Guy's library.

Cover picture

The cover picture (unlike the profile picture) is the background of the account/Avatar section (the upper part of the drawer navigation, where you can usually switch accounts, see nicknames, email and your profile pictures).

This piece of text is white, and to make sure you can see it, you can apply a foreground or translucent black to cover the cover picture. I tried it and found 40-50% 's black was the best. It is important to note that you do not make the picture invisible, and the text cannot be read.

I am adding a prospect in the framelayout. But I do not know this is not the best way to welcome you to exchange. I don't have the ability to switch between accounts, and this whole layout/section is clickable, with touch feedback, or ripple in lollipop, or both. Of course you can also use Centercrop scaletype to make it more beautiful.

Take a closer look at this image and you'll see that it's also visible under the status bar. Google apps is applying this effect when I write down this line of text. Gmail,inbox,keep,playe story and Hangouts have been implemented, while others are also ready to implement it. Of course, this is only the effect of lollipop and the above version.

Even now, some of the app's drawer-style navigation on the play Store is completely wrong, but they are refining the code and preparing for the next version (though it seems like a while ...) May be updated before the Google IO Conference a few months later this year)

The more magical is Google scriminsets layout. Copy, paste, and then try to fix the changes yourself OK. I think Google should be a better person than I am. Read more about the code on the gist and learn more about Themes/styles, which will give you a better performance.

I have a little doubt that scriminsets layout can be applied to the following lollipop versions. I know it's doable in Kit Kat, but Google didn't do it. It is certain that the "packed" status bar and/or navigation bar does not exist in the version under Lollipop, which may be a reason behind it.

Note: View the size of the cover photo

Only in lollipop, the drawer navigation will appear under the status bar. In the version below Lollipop, it is probably the reason that the packed state or navigation bar is not something.

Background, icon and text of the selectable row

When you want to change the style of the main row in the drawer, for each element of each row, we will handle the three child elements (background, icon, text) and 3 different states (default, select, click). But every developer needs to understand that developing apps doesn't need to be fully compliant, but knowing the specs is essential, and you can see how Google's apps and other good-looking apps embody the ideas that Material desgin, and draw you out of these apps To apply to your app.

Okay, now look at the features of Google Apps. In the picture below, the first line is the default state, the second row is the selected state, and the third row is the state of the click.

Although the images above look similar, they are not the same. A summary is:

Google apps looks very coherent, but when you look at the details, you'll find that there are more than 10 styles of selected rows in the drawer navigation.

• Thumb rule:

After trying and referencing the design guidelines and Google Apps, this is some of the ideas I put forward:

How to Achieve

Although I wanted to know, nobody told me how he came to realize it, so I did it myself.

First, use two drawable as a background. One is placed in the res/drawable-v21 for Lollipop and above, and the other in res/drawable, the target is the lower version. Because Ripple does not exist in versions below 5.0.

Use ripple only in versions lollipop and above. Ripples does not support versions below 5.0.

Every time you click on a line, ripple will appear, whether it's selected or not. So, you have a set of selector in res/drawable-v21 that contains ripple items. This is because we want the same ripple to be displayed when clicked on a selected and unchecked line, but the unselected background is white, and the background of the selected item is grey_200.

In addition, in res/drawable, you need a selector that does not contain ripple.

Icon

In the last few months, I've tried to make the same icon appear in different colors. So I'm going to turn all the icons into white and then color them in the desired colors. The advantage of doing this is that you don't have to create a new icon every time. You can get these icons of different sizes and colors from Google, and then work two times with different colors to see what works best. In addition, if you use the same icon in different colors, remember to save the same size. If you need to be based on status (click, select ...) ) to change its color, you can set a color state list resource.

The way I implemented it was written in a custom ImageView, because the color state list is not available in the Kit Kat and its versions (Android:tint can use color, but cannot use color state).

Take a look at what I did in gist in the link below. If you find a better way, or a mistake, please give me feedback.

The performance of headers and footer

Some of the heads (aka account sections) are not sliding, while others are sliding. In my opinion, if it is possible, it is best to design it as non-sliding. In this way, the drawer-style navigation looks more beautiful, coherent, and easy to use.

The bottom (aka setting and support) can be either sliding or not. If you look at Google Apps, you'll find that some are not sliding, and some are at the bottom of sliding scroll. If you have a requirement that cannot be placed at the bottom of the drawer, put it behind the list of slides that can be slid.

Again, in my opinion, not sliding is the best way, but there can be exceptions. For example, when the head is not sliding, some items are fixed, so there is a scrollable area in the drawer. But if the scrollable space is too small, it looks bad (only one or two lines), and a good way to get more space is to footer it.

The head and bottom should be fixed, unless the drawer needs more space to perform better.

Due to drawer options, PATH, structure ... , so there's actually no thumb rule here.

Resources

-google official Material Design icons
-material Design Color Definitions

Code

-github Project Address

Summarize

This is about changing the style of the drawer navigation, and you still need to spend a lot of time figuring out what you want to do, and it's much longer than it takes.

If you want to learn about changing the style of drawer navigation, check out the other two articles.

Welcome comments, Feedback ...

Hava fun!

Material Design-compliant drawer navigation effect