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 components 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 objects elevation
determines the appearance of its shadow. In motion, shadows are a
useful tool to provide cues about an objects 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
