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

Abhijeet Singh
8y
8.8k
0
2

Article

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 Characterstics

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.

Image Source: https://material.google.com
Material objects occupy a unique point in space, by using the elevation multiple material objects, which are prevented from occupying the same space simultaneously.

Image Source: https://material.google.com
On changing the elevation, one material object cannot pass through another material object. It means the material objects are impenetrable.
Any material object can change its shape. It means, it has a mutable shape.
Any material object grows and shrinks, along its plane.
The material object never bends or folds.
The multiple sheets of the material can join together to become a single sheet.
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.
Material can be spontaneously generated or destroyed.
Material object can move along various axes.

Elevation

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).

Image Source: https://material.google.com

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
Table Source: https://material.google.com

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 cancelled, 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 determines 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 measurements

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)

Image Source: https://material.google.com

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 kind 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: