Material Design Series Fourth--using the Material Theme

Defining Shadows and Clipping views

This lesson teaches

1. Assign elevation to Your views
2. Customize View Shadows and outlines
3. Clip views

You should also read

• Material Design Specification
• Material Design on Android

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 visual appearance of their 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.

Shadows is 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 act Ion.

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 both components:

• Elevation:the static component.
• Translation:the dynamic component used for animations.

Z = elevation + translationZ

Figure 1 -Shadows for different view elevations.

To set the elevation of a view with a layout definition, use the android:elevation attribute. To set the elevation of a view with 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 easily animate the elevation of views. For more information, see the API reference for and the property ViewPropertyAnimator Animation Developer Guide.

You can also use a to StateListAnimator specify these animations in a declarative the. This was especially useful for cases where the state changes the trigger animations, like when a user presses a button. For more information, see Animate View state changes.

The Z values is measured in DP (density-independent pixels).

Customize View 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.

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"  span class= "tag" >>   
      <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:

1. Extend the ViewOutlineProvider class.
2. Override the getOutline() method.
3. Assign the new outline provider to your view with the View.setOutlineProvider() method.

You can create oval and rectangular outlines with rounded corners using the-the-Methods in the 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 it outline provider to null .

Clip views

Clipping views enables-easily change the shape of a view. You can clip views for consistency and 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 View.setClipToOutline() method or the android:clipToOutline attribute. 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 the method.

Clipping views are a expensive operation, so don ' t animate the shape of your use to clip a view. To achieve this effect, use the Reveal effect animation.

Material Design Series Fourth--using the Material Theme