1page.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 22relative 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 25shadow: views with higher Z values cast larger, softer shadows. Views with higher Z values occlude 26views 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, 29clipped by the parent by default.</p> 30 31<p>Elevation is also useful to create animations where widgets temporarily rise above the 32view 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 36in 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> 54attribute. 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 58View.setTranslationZ()} method.</p> 59 60<p>The new {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} and {@link 61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} methods enable 62you to easily animate the elevation of views. For more information, see the API reference for 63{@link android.view.ViewPropertyAnimator} and the <a 64href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> developer 65guide.</p> 66 67<p>You can also use a {@link android.animation.StateListAnimator} to 68specify these animations in a declarative way. This is especially useful for cases where state 69changes 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 79area 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 103view'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 111android.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 116from the view's background. To prevent a view from casting a shadow, set its outline provider 117to <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 123consistency with other design elements or to change the shape of a view in response to user input. 124You can clip a view to its outline area using the {@link android.view.View#setClipToOutline 125View.setClipToOutline()} method or the <code>android:clipToOutline</code> attribute. Only 126rectangle, 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()} 131method.</p> 132 133<p>Clipping views is an expensive operation, so don't animate the shape you use to 134clip a view. To achieve this effect, use the <a 135href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> animation.</p> 136
