Navigation Drawer with a twist

How about adding some flavor to our convenient side pane?

With so many Android App developers and companies out there in today’s Market, every app seems to have its own elegant and beautiful environment with various customizations.

But One thing that I have noticed is the lack of evolution in designing of 1 particular widget: the Navigation Drawer.The designers don’t seem to experiment more with it.

So Recently I came across this cool navigation drawer that felt quite unique and premium. Therefore, I tried some googling, random hit and trials, debugging and research. So, let’s add some twist to the plain old navigation drawer ❤

Plain old navigation drawer.

The Navigation Drawer

My aim was to:

1) add a navigation drawer whose sliding menu and Main Content would look like “pages” or “Cards” : sliding in and moving the other contents out out.

2) the Appbar should have a rotating ‘ hamburger-arrow’ menu which, when clicked should perform that sliding animation.

So I started with the studio’s navigation drawer template and started tweaking it to my needs .

1. Importing the navigation drawer activity: When I created a new activity using the template , it created the following files(they are a lot!, do check the link).
2. Transparent navigation and colorful drawer: We can imagine the drawer, the navigation menu and the content view as a deck of 3 cards one over the other. if one of them is transparent, we will obviously be able to see the below card. Thus, I made the navigation drawer colorless, its scrim color transparent and added a picture background to the drawer. I also added color to the content view since it doesn't have any color of its own.

3. Scaling down the content view’s holder: while searching for some reasonable explanation about what made this design work, I came across this little snippet of code:

3)cool, we are good to go! A simple removal of the image from the default navigation header will give us the design we want.

attaboy! we did goo-ood, But this status bar? ugh

Customizing it even further more.

I was happy with the results but the top status bar was still bugging me. I wanted to have this sliding motion even behind the status bar, making it look like a simple floating transparent bar.

So, I researched some more and more and found this little hack :

4.[hack]FLAG_LAYOUT_NO_LIMITS : we add the following code in our onCreate function :

Ironically, our style generated an alternate style for SDK 21+, which said “<name=”android:statusBarColor”>@android:color/transparent”. We may think it’s making our status bar transparent, but transparent to what?if this theme is making the status bar transparent ,then i imagined status bar having the color same as toolbar. But then how come the status bar in our code or even google’s own drawer code has a “darker shade in their top bar”? why isn’t it like a launcher’s status bar?

My mobile’s launcher screenshot vs gmail’s default look : notice the statusbar’s color in gmail

well, after many searches I was still unable to find this, but I feel that this naming convention is wrong. setting this attribute doesn’t make our status bar ‘transparent’, but rather it makes our status bar take the colorPrimaryDark( defined in our colors.xml)

But setting a flag of LayoutParams.FLAG_LAYOUT_NO_LIMITS makes us possible to go beyond the bounds of status bar and our app will simply show being overlapped by the app bar. Although it will overlap, tweaking the toolbar’s code to have a fixed height makes it look decent enough.

And voila !!, we have our Cool navigation UI ❤ ❤

Another design for all those material-fans out there ;)

Closing Notes

Well that’s all from my side. I hope that by the end of this article, you would be able to add a tang to your plain old navigation drawer. I also added a sample implementation here .Although this does breaks some Material Guidelines, I don’t think you awesome UI/UX designers/developers would mind bending a few rules, would you ?

If you liked this article, don’t forget to give me a high five! Also I am up for any discussions or debates, so don’t mind pinging me here or at my Github/LinkedIn profiles.

Thankyou ❤

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.