Android Material Component: Navigation Drawer Styling (Part III)

In Part II, you’ve looked in to how to add color states for navigation menu items and adding shapes as background for the menu items. In this post of the series, we’re looking at how to add and style the header view of the NavigationDrawer. But first, here’s how far we’ve come since the original post.

Previous Posts

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

Note

In addition to styling, this tutorial also provides the best practices of using colors and resources, i.e. via attributes like ?attr/ and never on the UI component directly but through styles.

• The advantage of using ?attr/ in calling colors and color states is because of reasons like making it generic so it’s easy for us to either change our brand colors in the future, so adding a new theme for our app (for instance, to support Dark/Light mode)
• The advantage of using styles is to unify the styles for each UI element so every time you add a new UI element (for instance, a Button or a TextView), you can call a style to apply all the UI changes for that element you’ve applied in other places.

To read more about themes and styles, please go to these wonderful articles by Nick Butcher:

Android styling: themes vs styles

The Android styling system offers a powerful way to specify your app’s visual design, but it can be easy to misuse. Proper use of it can make themes and styles easier to maintain, make branding…

Android DevelopersNick Butcher

Android styling: common theme attributes

In the previous article in this series on Android styling, we looked at the difference between themes and styles and how themes allow you to write more flexible styles and layouts which isolate…

Android DevelopersNick Butcher

Android styling: prefer theme attributes

In the previous posts in this series on Android styling, we looked at the difference between themes and styles and why it’s a good idea to factor out things that you wish to vary by theme and common…

Android DevelopersNick Butcher

Implementing: headerLayout

If you’ve noticed, we currently show a solid purple color for the menu item background color. But there’s a possibility that we can add our own shape as the background. In order to do so:

1. Add a new Drawable Resource File, name it round_top_background.xml and the following lines:

2. Create a new Layout file, name it nav_header_main.xml and add the following lines:

3. Finally, set the headerLayout in the NavigationView in activity_main.xml:

4. And run the app.

With everything in line, you should now finally see your screen as the one below:

Source code for the Final Version

waseefakhtar/Navigation-Drawer

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

GitHubwaseefakhtar

As always, let me know if my tutorial helped you in anyway and the things I can improve in writing tutorials by sending a DM or a Tweet at: twitter.com/waseefakhtar ✌️