Implementing the New Navigation Drawer in Android

Implementing the new Navigation Drawer in Android

I wanted to try out the new Navigation Drawer that’s provided in a recent release of the Android Support Library. I was hoping that it would be fairly straight-forward, and it was. Here’s the official documentation, it’s what I’m basing this on, including the entirety of my MainActivity.java code, if you’re interested in just looking at that, have at it. There’s lots of code, and even a sample app to download.

I think that I’ll structure this post the same way that I did for my last one, since this is also fairly straight-forward, and builds on my last post.

How to

0

Have a project set up, for use with AppCompat lib, as I showed in my previous blog post.

1

First up, modify your layout to be a drawer layout, and give yourself two children to work with:

2

If you’re using this code, you’ll need some layout to fill in the ListView that appears in the drawer:

3

We need a couple of strings to describe the open/close actions, so add these to your strings.xml file:

4

You’ll need one of these in your drawables-hdpi directory:

Really, the proper way to do this is to create a few assets at the appropriate scales, and drop them into each of the drawables directories so that they all look right. Official assets can be downloaded here.

I’ll also note that the asset may not be in my github repo yet for some reason. Android Studio didn’t pick it up as a new file, and while I’ll get it pushed up shortly, if you download this before I fix it, you may be missing that asset.

5

Now, we can use this in the code. This basically enables the icon in the ActionBar to be used to toggle the drawer, along with swiping from the left edge. It also adds a simple ListView within the drawer, and allows user to click those items to toast the name of the app, and change the title in the ActionBar.

I’m not going to give a detailed discussion, if you aren’t sure of what’s going on, please read the official documentation, where most of this code comes from.

Done!

Here’s the final product:

Pretty, isn’t it? Here’s the repo, on the NavDrawer branch