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.
Image Source: https://material.google.com
Material Characteristics
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).
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:
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:
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.
Image Source: https://material.google.com
Component reference shadows
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)
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.
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.
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: