Topic 2 : Material in depth Content Material Enviornment Material Properties Object Relationship Reference : http://www.google.com/design/spec/material-design/introduction.html

1. Material Design
Topic: 2
Material in depth

2. Material in depth
Enviornment
a. 3D World

3. Material in depth
● Environment (continue …)
b. Light and Shadow
Within Material Enviornment, virtual lights illuminate the scene.
There are two light sources in this enviornment.
(I) Key Light :-
Creates directional shadows.
(II) Ambient Light :-
Creates soft shadows from all angles.
In Android development, shadows occur when light sources are
blocked by sheets of material at various positions along the z-axis.

4. Material in depth
● Environment (continue …)
b. Light and Shadow
Shadow cast by key light Shadow cast by ambient light Combined shadow from key and
ambient lights

5. Material in depth
● Material properties
a. Physical properties
b. Transforming material
c. Movement of material

6. Material in depth
● a. Physical properties
– Material may have varied height and width, with
uniform thickness of 1dp.
DO DON'T

7. Material in depth
● a. Physical properties (continue ...)
– Material casts shadows.
– Shadows result naturally from the relative elevation (z-
position) between material elements.
DO DON'T

8. Material in depth
● a. Physical properties (continue …)
- Contents of any shape or color can be displayed.
– Contents Does not add thickness to material.

9. Material in depth
● a. Physical properties (continue …)
– Contents can behave independent of the material but
always remains within the bounds of the Material.

10. Material in depth
● a. Physical properties (continue …)
– Material is solid. Thus, Input event cannot pass
through the material.
DO DON'T

11. Material in depth
● a. Physical properties (continue …)
– Material cannot pass through a material.

12. Material in depth
● b. Transforming properties
– Material can change shape.
– Material Can grow and shrink along its plane.
– Material never bends or folds.
– Sheets of material can join together to make a
single sheet.
– Material can split into parts and can join to regain
original state.

13. Material in depth
● c. Movement of material
– Materials can spontaniously generated and
destroyed anywhere in the enviornment.
– Material can move along any axis.
– Z-axis motion is typically a result of user
interaction with the material.

14. Material in depth
● Objects in 3D space
Objects in material design possess similar qualities to
objects in the physical world. In the physical world, objects
can be stacked or affixed to one another, but cannot pass
through one another. Objects cast shadows and reflect
light.
These qualities form a spatial model that is familiar to
users and can be applied consistently across apps.
a. Elevation (Android)
b. Object Relationship

15. Material in depth
● a. Elevation
It is the relative difference between two surfaces along z-
axis. Elevation is generally measured in density
independent pixels (dp).
Since material has standard 1dp thickness , the differnce
would be from the top of one surface to the top of another.

16. Material in depth
● a. Elevation (continue …)
Resting Elevation
The default elevation of a material is called
resting elevation.The resting elevation for
an object does not change; it is constant
throughout an app. If an object changes
elevation, it should return to its resting
elevation as soon as possible.

17. Material in depth
● a. Elevation (continue …)
Responsive elevation and dynamic elevation offset
Some components performs responsive elevation
which depends upon the user input event (normal,
focused, pressed etc). These elevation changes are
implemented through dynamic elevation offset.
Dynamic elevation offsets are the goal elevation for
the component to move towards, relative to the
component’s resting state
They also ensure that elevation changes are
consistent across actions and component types

18. Material in depth
● a. Elevation (continue …)
Dynamic elevation offset example

19. Material in depth
● a. Elevation (continue …)
Functional shadows
Shadows provide important visual cues about
objects’ depth and directional movement. They
are the only visual cue indicating the amount of
separation between surfaces. An object’s
elevation determines the appearance of its
shadow.
In motion, shadows are a useful tool to provide
cues about an object’s direction of movement and
whether the distance between surfaces is
increasing or decreasing.

20. Material in depth
● b. Object relationship
Object Heirarchy
– Objects can be moved independent to each other or
constrained by objects higher in heirarchy.
– All objects are part of a heirarchy, which defines the
parent – child relationship.
– Parent child specifies :-
● Each object has one parent.
● Each object may have any number of child.
● Children inherit transformative properties from their
parents.
● Sibling are objects at same level of heirarchy.

21. Material in depth
● b. Object relationship (continue …)
Exceptions
Childs , such as primary UI elements move
independently to the parent.
Example – Floating Action Button, Navigation
Drawer, Action Bar, Dialogs.
Interaction
Childrens must have minimal z-axis elevation with
their parents , no other objects gets inserted
between them

22. Material Design
Subscribe for more
Presented by : -
Abhishek Dabral