Material Design

Material Design

Introduction:

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Android 5.0 Lollipop was one of the most significant Android releases ever, in no small part due to the introduction of material design, a new design language that refreshed the entire Android experience. With a little help from the new Android Design Support Library, we’re bringing a number of important material design components to all developers and to all Android 2.1 or higher devices. You’ll find a navigation drawer view, floating labels for editing text, a floating action button, snackbar,tabs, and a motion and scroll framework to tie them together. Material design is a three-dimensional environment containing light, material, and cast shadows.

Material Design Features:

Elevation shadows and cards

In addition to the X and Y properties, views in Android have a Z property. This new property represents the elevation of a view, which determines:

  • The size of the shadow: views with higher Z values cast bigger shadows.
  • The drawing order: views with higher Z values appear on top of other views.

Animations

The new animation APIs let you create custom animations for touch feedback in UI controls, changes in view state, and activity transitions.

These APIs let you:

  • Respond to touch events in your views with touch feedback animations.
  • Hide and show views with circular reveal animations.
  • Switch between activities with custom activity transition animations.
  • Create more natural animations with curved motion.
  • Animate changes in one or more view properties with view state change animations.
  • Show animations in state list drawables between view state changes

Drawables

These new capabilities for drawables help you implement material design apps:

  • Vector drawables are scalable without losing definition and are perfect for single-color in-app icons
  • Drawable tinting lets you define bitmaps as an alpha mask and tint them with a color at runtime
  • Color extraction lets you automatically extract prominent colors from a bitmap image.

Goals:

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

Components:   

Navigation View

The navigation drawer can be an important focal point for identity and navigation within your app and consistency in the design here can make a considerable difference in how easy your app is to navigate, particularly for first time users. NavigationView makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate

 

 

 
Floating labels for editing text

Even the humble EditText has room to improve in material design. While an EditText alone will hide the hint text after the first character is typed, you can now wrap it in a TextInputLayout, causing the hint text to become a floating label above the EditText, ensuring that users never lose context in what they are entering.

 

 
Floating Action Button

a round button denoting a primary action on your interface

 
Snackbar

Providing lightweight, quick feedback about an operation is a perfect opportunity to use a snackbar

 
Tabs

Switching between different views in your app via tabs.

 
CoordinatorLayout

The main appeal of the CoordinatorLayout is its ability to coordinate the animations and transitions of the views within it

 

Collapsing Toolbars

Collapsing Toolbar Layout will help us create amazing transition animations when scrolling an activity content and using an image parallax.

 

For more information can refer the blog by Google Design : https://material.io/guidelines/material-design/introduction.html

Sharing

Leave your comment