diff --git a/docs/html/training/material/images/shadows-depth.png b/docs/html/training/material/images/shadows-depth.png index 26b6b4a3b1134..d28ac79cc1004 100644 Binary files a/docs/html/training/material/images/shadows-depth.png and b/docs/html/training/material/images/shadows-depth.png differ diff --git a/docs/html/training/material/shadows-clipping.jd b/docs/html/training/material/shadows-clipping.jd index f58d7802a8472..c1cd374b2bba8 100644 --- a/docs/html/training/material/shadows-clipping.jd +++ b/docs/html/training/material/shadows-clipping.jd @@ -18,28 +18,36 @@ page.title=Defining Shadows and Clipping Views -

Material design introduces depth for UI elements. Depth helps users understand the relative -importance of each element and focus their attention to the task at hand.

+

Material design introduces elevation for UI elements. Elevation helps users understand the +relative importance of each element and focus their attention to the task at hand.

-

The elevation of a view, represented by the Z property, determines the size of its shadow: -views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane; they -don't cast shadows on other views placed below them and above the Z=0 plane.

+

The elevation of a view, represented by the Z property, determines the visual appearance of its +shadow: views with higher Z values cast larger, softer shadows. Views with higher Z values occlude +views with lower Z values; however, the Z value of a view does not affect the view's size.

-

Views with higher Z values occlude views with lower Z values. However, the Z value of a view -does not affect the view's size.

+

Shadows are drawn by the parent of the elevated view, and thus subject to standard view clipping, +clipped by the parent by default.

Elevation is also useful to create animations where widgets temporarily rise above the view plane when performing some action.

+

For more information about elevation in material design, see +Objects +in 3D space.

+

Assign Elevation to Your Views

-

The Z value for a view has two components, elevation and translation. The elevation is the -static component, and the translation is used for animations:

+

The Z value for a view has two components: + +

Z = elevation + translationZ

- +

Figure 1 - Shadows for different view elevations.

To set the elevation of a view in a layout definition, use the android:elevation @@ -59,9 +67,9 @@ guide.

You can also use a {@link android.animation.StateListAnimator} to specify these animations in a declarative way. This is especially useful for cases where state changes trigger animations, like when a user presses a button. For more information, see -Animate View State Changes

. +Animate View State Changes.

-

The Z values are measured in the same units as the X and Y values.

+

The Z values are measured in dp (density-independent pixels).

Customize View Shadows and Outlines