A divider is a line used to separate content, such as in lists or layouts. Its purpose is to create a clear visual distinction between different groups of information, which helps to organize the interface and makes it easier for users to process the content.

Google

Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.

Properties

Reference of Foundations of Large Language Models Course

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp). You can, and should, show 3D-ness without adding thickness to elements.

Dimensions

RULE: The opacity and spread of an object’s shadow indicate how close or far it is from the surface underneath.
DONT: express shadows without changing surface elevation (ex: using only color change, rather than color and height change)

Shadows show elevation

RULE: No matter how close you zoom in, it is remains clear without any pixilation.

Infinite Resolution

RULE: Adding content does not add thickness to the element (the element remains at 1dp thickness).


Content

There are 4 main rules regarding physical properties.

Physical properties

Material CAN:
- Change shape
- Change opacity (can be uniform across the entire surface, or can change opacity across a portion of the surface)
- Grow or shrink along its plane
- Join together to become a single surface
- Split, and become whole again

Material CANNOT:
- Bend or fold in ways that exceed the depth of the UI


Transformation

Materials CAN:
- Spontaneously generate or be dismissed anywhere in the environment
- Move along any axis
- Have coordinated motion

*material that exhibits z-axis motion is usually in response to user interaction*


Learn Before

Related