Views and Shadows

The elevation of a view determines the size of its shadow: views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane under an orthographic projection (the views do not scale for different values of Z).

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

View Elevation

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

To set the elevation of a view:

  • In a layout definition, use the android:elevation attribute.
  • In the code of an activity, use the View.setElevation method.

To set the translation of a view, use the View.setTranslationZ method.

The new ViewPropertyAnimator.z and ViewPropertyAnimator.translationZ methods enable you to easily animate the elevation of views. For more information, see the API reference for ViewPropertyAnimator and the Property Animation developer guide.

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

Shadows and Outlines

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.

For example, if you define a view with a background drawable:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

where 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>

Then this view and drawable cast the appropriate shadow.

You can also create outlines in your code using the methods in the Outline class, and you can assign them to views with the View.setOutline method.

To prevent a view from casting a shadow, set its outline to null.

Clipping Views

Clip a view to its outline area using the View.setClipToOutline method. Only rectangle, circle, and round rectangle outlines support clipping, as determined by the 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 View.setClipToOutline method.

Because clipping views is an expensive operation, don't animate the shape you use to clip a view. To achieve this effect, use a Reveal Effect animation.