Android Material Component: Creating a Gmail like Navigation Drawer (Part I)

If you’ve been following my blog for a while, chances are, you might have passed by my blog posts regarding an easy approach to Navigation Drawer and styling it:

Android Material Component: An easy approach to Navigation Drawer (Part I)

The Navigation Drawer is a powerful component in Android Development which provide easy access to destinations in your app. If you’ve come to this article, you probably know that and considering the title of the story, you’ve probably implemented it before.

Waseef AkhtarWaseef Akhtar

Android Material Component: Navigation Drawer Styling (Part II)

The Navigation Drawer is a powerful component in Android Development which provide easy access to destinations in your app. But if you’ve come to this article, you probably know that and considering the title of the story, you’ve probably implemented it before.

Waseef AkhtarWaseef Akhtar

Since those posts are more thorough, I know that it’s intimidating to consume so much knowledge all at once. And I know that because I received a few DMs asking about styling specific elements in the Navigation Drawer after those posts.

Also, a personal opinion: I think that when you know exactly what you want to create, you tend to explore the component so much better. In this case, we’re creating a Gmail like Navigation Drawer while also keeping the blogpost short (for the reasons mentioned above).

So if there’s anything that you think is missing from this post, please refer to the posts linked above.

If you follow along, you’ll have a final screen looking like this:

Let’s get started

Prerequisite ☝️

For this post, we’ll assume you already have a Navigation Drawer set up. If not, you can set it up with the help of the following post:

Android Material Component: An easy approach to Navigation Drawer (Part I)

The Navigation Drawer is a powerful component in Android Development which provide easy access to destinations in your app. If you’ve come to this article, you probably know that and considering the title of the story, you’ve probably implemented it before.

Waseef AkhtarWaseef Akhtar

Add Gmail assets 🎨

There are two things to set up before styling our Navigation Drawer to get the look and feel of the Gmail app:

Brand colors

1. Open colors.xml and add the following colors:

2. Open styles.xml and add the following items in your base theme:

Font family

1. Create a new directory under res with the name font.
2. Download Google Sans font from here.
3. Add the Medium weight font inside the res/font directory.
4. In your styles.xml, add the newly added font inside your base theme as:

Running the app at this stage will look like this:

Styling 👨‍🎨

Although it is easy to style Navigation Drawer by setting custom color, color states, and drawables to an individual NavigationDrawer for a simple app like we’re building, we’ll follow the best practices to get the hang of how styling is done in a real app.

To begin styling:

1. Open values/attrs.xml or if you don’t have it already, create it.
2. Add the following attributes:

Note: Adding these attrs make it easy to add color and color states to our Navigation Drawer through styles.xml so when we need to change our branding in a real app or support both dark/light version of the app, we can only head to styles.xml and change the color and color states of these attributes there

3. Add a new drawable under res/drawable with the name background_round_padded_selected and the following lines:

4. Add another drawable under res/drawable with the name background_round_padded_pressed and the following lines:

Note: These drawables are used as the states for Navigation Drawer item background for either when they’re pressed or selected.

5. To add the color states for the item background, create another drawable under res/drawable with the name menu_item_background_color_state.xml and add the following lines:

6. Now under res/color, add a new color state (used for item text and item icon) with the name menu_item_color_state.xml and the following lines:

Note: Make sure to follow that each XML go in the correct directory i.e.menu item background shape and states go under res/drawable and menu item states go under res/color

7. Now that the styles are set, open styles.xml and add the following lines in your base theme:

8. Create two more styles for Navigation Drawer below your base theme, like so:

9. Finally, open activity_main.xml and add the style attribute to the Navigation Drawer, like so:

Run the app now and voilà! 🎉 Here’s your newly designed Gmail like Navigation Drawer:

Happy coding! 💻

Up Next

Android Material Component: Creating a Gmail like Navigation Drawer (Part II) — Adding that final Ripple touch

While I covered almost all the things there was about creating a Gmail like Navigation Drawer in the first part, this story is just about adding that tiny ripple effect to when you press the navigation drawer items.

Waseef AkhtarWaseef Akhtar

Source code for the Final Version

waseefakhtar/Gmail-Navigation-Drawer

Contribute to waseefakhtar/Gmail-Navigation-Drawer development by creating an account on GitHub.

GitHubwaseefakhtar

TL;DR

Have something to say? Leave me comments on Twitter, retweet, like or follow: ✌️

If you enjoyed this, you might also be interested in other stories that I recently published:

Android MotionLayout: Creating the Twitter splash screen in the simplest way possible (Part I)

Remember the Twitter’s “oh so famous” splash screen that everyone talked about and had their version to imitate it? It’s now easier than ever to achieve that with the new MotionLayout from the Android Jetpack library.

Waseef AkhtarWaseef Akhtar