Over a million developers have joined DZone.

Material Design Navigation Drawer for Android App Development

A review of the material design navigation drawer from Google, so that every Android developer can implement effective navigation for their apps.

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

The Android Material Designer has its unique material theme, vectors, 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

The drawer slides in from the left and has three primary aspects:

  • Specs
    • Typography: The font is Roboto Medium.
    • Keylines and margins: Icons align at left and right of screen margin at 16dp. Avatars and content associated with the margins 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 the status bar it is 24dp, the subtitle is 56dp, 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 color after being selected, and Google recommends that this should be a primary color. 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 color if the touch or ripple color does not contrast perfectly. The dividers in the nav are full-bleed within the drawer, and 8dp padding should be added above and below each divider. Settings, Help, Feedback, and other 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 Behavior

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

Permanent Nav Drawer: 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. The structure and behavior 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

Image title

PS: Image reference: http://www.sketchappsources.com/resources/source-image/material-icons.png

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 somthing new to share about material design

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

material desgin,material design colors,material-design,android app developers,android app development

Published at DZone with permission of Cris Styris. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}