Update Material Design Navigation Drawer for Android App Development

Android Material Design has its unique Material Theme, vector drawable, custom shadows, animations and widgets. It’s been over a year since the new development platform was launched by Google with the Lollipop version.

A prominent feature of the Material Design based Android framework that every Android developer must know well is the navigation drawer.

Primary Features

It slides in from the left and has three primary aspects –

• Specs- the key specs are the
• Typography- Roboto Medium is the Font
• Keylines and margins- Icons align at left and right of screen margin at 16dp. Avatars and content associated with margin appear on the left at 72dp and the side nav width is equal to the width minus the height of the action bar. Standard horizontal margins are 16dp for smartphones and 24dp for tablets.
• Vertical spacing- the spacing is 24dp for status bar it is 24dp, subtitle is 56dp, and content spacing is 8dp and subtitles and list items are 48dp.

Content- since the Nav drawer occupies the full length of the device screen at a resting elevation of 16dp, everything behind the drawer must be visible with a darkened scrim. A list item changes colour after being selected, and Google recommends that this is a primary colour.

A touch ripple can be added to highlight the row of the selected item.

They have given the option to add a darker tint of the primary colour if the touch or ripple colour does not contrast perfectly. The dividers in the nav are full-bleed within the drawer and 8dp padding is to be added above and below each divider.

Settings, Help, Feedback and another support content appears at the bottom of the list.

Know More: Developers guide: How to work on Material Design for Android Apps

Types of Nav Drawers Based on their Behaviour

There are two types of Nav drawers – permanent and persistent, based on their application.

The permanent navigation drawers are pinned to the left edge and are always visible. The threshold for their pinning is calculated using three minimum values – Side nav width , Content padding and Content width

Permanent Navigation Drawer types

There are three types of permanent navigation drawers and the structure and behaviour of the interface determine the type of drawer to use.

• Full-height navigation drawer – for applications that have lot of information and use a left-to-right hierarchy
• Navigation bar clipped under app bar – for productivity applications that require screen balance
• Floating navigation bar – for applications with less hierarchy requirement

Persistent Nav Drawer

Persistent navigation drawer can be toggle opened and closed. It has the same surface elevation as content and opens and closes by default on selecting the menu icon. Since it is placed outside the page grid, when opened, it forces the page content to change a size and adapt a smaller viewpoint.

The Nav Drawers are an essential aspect of every application and Google has a comprehensive design that is easy to integrate and has an ergonomic presentation.

Share your thoughts if you love reading this Material Design Blog and drop a line if you have mobile app development requirements.