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.

Key Summary

This article from InApps Technology explores the Material Design Navigation Drawer, a key component of Google’s Material Design framework introduced with Android Lollipop. It details the drawer’s features, specifications, and types, emphasizing its role in creating user-friendly, ergonomic navigation for Android apps. Key points include:

• Overview of Material Design:
  • Introduced with Android Lollipop, Material Design includes a unique Material Theme, vector drawables, custom shadows, animations, and widgets to enhance app aesthetics and functionality.
  • The navigation drawer is a critical feature, sliding in from the left to provide intuitive navigation.
• Primary Features of the Navigation Drawer:
  • Behavior: Slides in from the left, occupying the full screen height at a 16dp elevation, with a darkened scrim over background content.
  • Specifications:
    • Typography: Uses Roboto Medium font.
    • Keylines and Margins: Icons align at 16dp margins (smartphones) or 24dp (tablets); avatars/content at 72dp; drawer width equals screen width minus action bar height.
    • Vertical Spacing: Status bar (24dp), subtitle (56dp), content spacing (8dp), subtitles/list items (48dp).
  • Content:
    • Selected list items change to a primary color, with an optional touch ripple for highlighting (darker tint if contrast is low).
    • Full-bleed dividers with 8dp padding above/below.
    • Support Content: Settings, Help, and Feedback appear at the bottom.
• Types of Navigation Drawers:
  • Permanent Navigation Drawers (always visible, pinned to the left):
    • Full-Height: For apps with extensive information and left-to-right hierarchy.
    • Clipped Under App Bar: For productivity apps needing screen balance.
    • Floating: For apps with minimal hierarchy requirements.
    • Pinning Threshold: Calculated using side nav width, content padding, and content width.
  • Persistent Navigation Drawer:
    • Can be toggled open/closed via a menu icon.
    • Shares surface elevation with content, resizing page content when opened.
• Importance:
  • Navigation drawers are essential for intuitive app navigation, aligning with Google’s ergonomic, easy-to-integrate Material Design guidelines.
  • Enhances user experience by organizing navigation hierarchically and visually.
• InApps Insight:
  • The Material Design Navigation Drawer is a cornerstone for creating user-friendly Android apps, aligning with modern UI/UX standards.
  • InApps Technology can integrate navigation drawers into Android app development projects, leveraging Material Design principles to deliver visually appealing, functional mobile applications for clients.

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.