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.
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.
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.
Elevation is also useful to create animations where widgets temporarily rise above the view plane when performing some action.
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:
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
attribute. To set the elevation of a view in the code of an activity, use the
{@link android.view.View#setElevation View.setElevation()} method.
To set the translation of a view, use the {@link android.view.View#setTranslationZ View.setTranslationZ()} method.
The new {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} and {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} methods enable you to easily animate the elevation of views. For more information, see the API reference for {@link android.view.ViewPropertyAnimator} and the Property Animation developer 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
.The Z values are measured in the same units as the X and Y values.
The bounds of a view's background drawable determine the default shape of its shadow. Outlines represent the outer shape of a graphics object and define the ripple area for touch feedback.
Consider this view, defined with a background drawable:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
The background drawable is defined as a rectangle with rounded corners:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
The view casts a shadow with rounded corners, since the background drawable defines the view's outline. Providing a custom outline overrides the default shape of a view's shadow.
To define a custom outline for a view in your code:
You can create oval and rectangular outlines with rounded corners using the methods in the
{@link android.graphics.Outline} class. The default outline provider for views obtains the outline
from the view's background. To prevent a view from casting a shadow, set its outline provider
to null.
Clipping views enables you to easily change the shape of a view. You can clip views for
consistency with other design elements or to change the shape of a view in response to user input.
You can clip a view to its outline area using the {@link android.view.View#setClipToOutline
View.setClipToOutline()} method or the android:clipToOutline attribute. Only
rectangle, circle, and round rectangle outlines support clipping, as determined by the
{@link android.graphics.Outline#canClip Outline.canClip()} method.
To clip a view to the shape of a drawable, set the drawable as the background of the view (as shown above) and call the {@link android.view.View#setClipToOutline View.setClipToOutline()} method.
Clipping views is an expensive operation, so don't animate the shape you use to clip a view. To achieve this effect, use the Reveal Effect animation.