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.
Join the DZone community and get the full member experience.Join For Free
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.
The drawer slides in from the left and has three primary aspects:
- 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.
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
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
Published at DZone with permission of Cray Styris. See the original article here.
Opinions expressed by DZone contributors are their own.