Introduction To Material And Layout Units And Measurements In Google Material Design Guidelines

Material Design

 
Material design is a three-dimensional environment, which contains light, material and cast shadows.
 
According to the material guidelines by Google, all the material objects have x,y and z dimensions. Material thickness is always 1dp (density-independent pixels). The height and width can vary in x and y dimensions but the thickness is fixed and is 1dp.
 
Material Design
Image Source: https://material.google.com
 
Material Characteristics
  1. The material objects are solid, which means the input events by the user can only affect the foreground material object as it cannot pass through the material object.
     
    Material objects
     
  2. Material objects occupy a unique point in space, by using the elevation of multiple material objects, which are prevented from occupying the same space simultaneously.
     
    Material objects
     
  3. On changing the elevation, one material object cannot pass through another material object. It means the material objects are impenetrable.
     
  4. Any material object can change its shape. It means, it has a mutable shape.
     
  5. Any material object grows and shrinks, along its plane.
     
  6. The material object never bends or folds.
     
  7. The multiple sheets of the material can join together to become a single sheet.
     
  8. Material objects can separate, split and heal. For example, if you remove a portion of the material from a sheet of the material, the sheet of the material will become a whole sheet again. 
     
  9. The material can be spontaneously generated or destroyed.
     
  10. Material objects can move along various axes.
Elevation
 
The elevation is defined as the relative depth or the distance between two surfaces along the z-axis. It is also measured in density-independent pixels (dp).
 
Elevation
 
Resting elevation
 
According to the material guidelines, all the material objects have a resting elevation. It is also known as a default elevation of the material object.
 
If any material object changes its elevation either by using a user input or by system events, it has to be back to its resting elevation.
 
Some component elevations are as follows:
 
Table
 
Responsive elevation and Dynamic elevation offsets
 
Responsive elevation means the components change their elevation in response to user input like normal, focused and pressed or system events.
 
Dynamic elevation offsets are the elevation that a component moves towards, relative to the component’s resting state. Once the input event is completed or canceled, the component will return to its resting elevation.
 
Component elevation comparisons
 
In the following diagram, there is comparison of the component resting elevations and the dynamic elevation offsets:
 
diagram
Image Source: https://material.google.com
 
Shadows
 
Shadows determine the material object’s depth and the directional movement. Appearance of the material object’s shadow depends upon its elevation from the surface.
 
In terms of motion, shadow provides the movement direction of the material object. It also provides the information; whether the distance between the material object's surface is increasing or decreasing.
 
Shadows
Image Source: https://material.google.com
 
Component reference shadows
 
table
 
table
 
table
 
table
 
Layout Units and measurement
 
Pixel density
 
Pixel Density is also known as Pixels per inch (PPI). It is sometimes called “Resolution”. High-density screens have more PPI than Low-density screens.
 
Screen resolution refers to the total number of pixels in a display.
 
High-density screen (more PPI)
High-density screen (more PPI)
 
Low-density screen (less PPI)
Low-density screen (less PPI)
 
Density-independent pixels (dp or dip)
 
A DP is equal to one physical pixel on a screen with a density of 160. Hence, we can say:
 
For 160 dpi screen 1 dp equals to 1 px.
 
pixel
 
If we have three screens with 1.5 inches wide and varying screen densities, in terms of density-independent pixels for all the screens, the screen width will be 240dp.
 
table
 
Scaleable pixels (sp)
 
Scaleable pixels depend upon the user’s font size settings. The default value of scaleable pixels is the same as the default value of density-independent pixels.
 
Thus, with the font size, always use “sp” not “dp”.
 
Image Scaling
 
The different physical devices (mobile, tablet, TV, Wearable devices, etc.) have different kinds of screen densities. Thus, the image assets of the Application should be displayed clearly according to the screen densities.
 
A set of six generalized screen densities are as follows:
  1. ldpi (low) ~120dpi
  2. mdpi (medium) ~160dpi
  3. hdpi (high) ~240dpi
  4. xhdpi (extra-high) ~320dpi
  5. xxhdpi (extra-extra-high) ~480dpi
  6. xxxhdpi (extra-extra-extra-high) ~640dpi
Following ratios are used for the image to look the same across the different screen resolutions for the different devices.
 
table