1 page.title=Defining Shadows and Clipping Views 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>This lesson teaches you to</h2> 8 <ol> 9 <li><a href="#Elevation">Assign Elevation to Your Views</a></li> 10 <li><a href="#Shadows">Customize View Shadows and Outlines</a></li> 11 <li><a href="#Clip">Clip Views</a></li> 12 </ol> 13 <h2>You should also read</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Material design specification</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 <p>Material design introduces elevation for UI elements. Elevation helps users understand the 22 relative importance of each element and focus their attention to the task at hand.</p> 23 24 <p>The elevation of a view, represented by the Z property, determines the visual appearance of its 25 shadow: views with higher Z values cast larger, softer shadows. Views with higher Z values occlude 26 views with lower Z values; however, the Z value of a view does not affect the view's size.</p> 27 28 <p>Shadows are drawn by the parent of the elevated view, and thus subject to standard view clipping, 29 clipped by the parent by default.</p> 30 31 <p>Elevation is also useful to create animations where widgets temporarily rise above the 32 view plane when performing some action.</p> 33 34 <p>For more information about elevation in material design, see 35 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objects 36 in 3D space</a>.</p> 37 38 39 <h2 id="Elevation">Assign Elevation to Your Views</h2> 40 41 <p>The Z value for a view has two components: 42 43 <ul> 44 <li>Elevation: The static component.</li> 45 <li>Translation: The dynamic component used for animations.</li> 46 </ul> 47 48 <p><code>Z = elevation + translationZ</code></p> 49 50 <img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt=""/> 51 <p class="img-caption"><strong>Figure 1</strong> - Shadows for different view elevations.</p> 52 53 <p>To set the elevation of a view in a layout definition, use the <code>android:elevation</code> 54 attribute. To set the elevation of a view in the code of an activity, use the 55 {@link android.view.View#setElevation View.setElevation()} method.</p> 56 57 <p>To set the translation of a view, use the {@link android.view.View#setTranslationZ 58 View.setTranslationZ()} method.</p> 59 60 <p>The new {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} and {@link 61 android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} methods enable 62 you to easily animate the elevation of views. For more information, see the API reference for 63 {@link android.view.ViewPropertyAnimator} and the <a 64 href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> developer 65 guide.</p> 66 67 <p>You can also use a {@link android.animation.StateListAnimator} to 68 specify these animations in a declarative way. This is especially useful for cases where state 69 changes trigger animations, like when a user presses a button. For more information, see 70 <a href="{@docRoot}training/material/animations.html#ViewState">Animate View State Changes</a>.</p> 71 72 <p>The Z values are measured in dp (density-independent pixels).</p> 73 74 75 <h2 id="Shadows">Customize View Shadows and Outlines</h2> 76 77 <p>The bounds of a view's background drawable determine the default shape of its shadow. 78 <strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple 79 area for touch feedback.</p> 80 81 <p>Consider this view, defined with a background drawable:</p> 82 83 <pre> 84 <TextView 85 android:id="@+id/myview" 86 ... 87 android:elevation="2dp" 88 android:background="@drawable/myrect" /> 89 </pre> 90 91 <p>The background drawable is defined as a rectangle with rounded corners:</p> 92 93 <pre> 94 <!-- res/drawable/myrect.xml --> 95 <shape xmlns:android="http://schemas.android.com/apk/res/android" 96 android:shape="rectangle"> 97 <solid android:color="#42000000" /> 98 <corners android:radius="5dp" /> 99 </shape> 100 </pre> 101 102 <p>The view casts a shadow with rounded corners, since the background drawable defines the 103 view's outline. Providing a custom outline overrides the default shape of a view's shadow.</p> 104 105 <p>To define a custom outline for a view in your code:<p> 106 107 <ol> 108 <li>Extend the {@link android.view.ViewOutlineProvider} class.</li> 109 <li>Override the {@link android.view.ViewOutlineProvider#getOutline getOutline()} method.</li> 110 <li>Assign the new outline provider to your view with the {@link 111 android.view.View#setOutlineProvider View.setOutlineProvider()} method.</li> 112 </ol> 113 114 <p>You can create oval and rectangular outlines with rounded corners using the methods in the 115 {@link android.graphics.Outline} class. The default outline provider for views obtains the outline 116 from the view's background. To prevent a view from casting a shadow, set its outline provider 117 to <code>null</code>.</p> 118 119 120 <h2 id="Clip">Clip Views</h2> 121 122 <p>Clipping views enables you to easily change the shape of a view. You can clip views for 123 consistency with other design elements or to change the shape of a view in response to user input. 124 You can clip a view to its outline area using the {@link android.view.View#setClipToOutline 125 View.setClipToOutline()} method or the <code>android:clipToOutline</code> attribute. Only 126 rectangle, circle, and round rectangle outlines support clipping, as determined by the 127 {@link android.graphics.Outline#canClip Outline.canClip()} method.</p> 128 129 <p>To clip a view to the shape of a drawable, set the drawable as the background of the view 130 (as shown above) and call the {@link android.view.View#setClipToOutline View.setClipToOutline()} 131 method.</p> 132 133 <p>Clipping views is an expensive operation, so don't animate the shape you use to 134 clip a view. To achieve this effect, use the <a 135 href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> animation.</p> 136
