diff options
Diffstat (limited to 'docs/html/preview/material/views-shadows.jd')
| -rw-r--r-- | docs/html/preview/material/views-shadows.jd | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/docs/html/preview/material/views-shadows.jd b/docs/html/preview/material/views-shadows.jd new file mode 100644 index 0000000..f7682f5 --- /dev/null +++ b/docs/html/preview/material/views-shadows.jd @@ -0,0 +1,95 @@ +page.title=Views and Shadows + +@jd:body + +<div id="qv-wrapper"> +<div id="qv"> +<h2>In this document</h2> +<ol> + <li><a href="#elevation">View Elevation</a></li> + <li><a href="#shadows">Shadows and Outlines</a></li> + <li><a href="#clip">Clipping Views</a></li> +</ol> +</div> +</div> + +<p>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).</p> + +<p>Elevation is also useful to create animations where widgets temporarily rise above the +view plane when performing some action.</p> + + +<h2 id="elevation">View Elevation</h2> + +<p>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:</p> + +<p><code>Z = elevation + translationZ</code></p> + +<p>To set the elevation of a view:</p> + +<ul> + <li>In a layout definition, use the <code>android:elevation</code> attribute.</li> + <li>In the code of an activity, use the <code>View.setElevation</code> method.</li> +</ul> + +<p>To set the translation of a view, use the <code>View.setTranslationZ</code> method.</p> + +<p>The new <code>ViewPropertyAnimator.z</code> and <code>ViewPropertyAnimator.translationZ</code> +methods enable you to easily animate the elevation of views. For more information, see +the API reference for <code>ViewPropertyAnimator</code> and the <a +href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Property Animation</a> +developer guide.</p> + +<p>The Z values are measured in the same units as the X and Y values.</p> + + +<h2 id="shadows">Shadows and Outlines</h2> + +<p>The bounds of a view's background drawable determine the default shape of its shadow. +<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple +area for touch feedback.</p> + +<p>For example, if you define a view with a background drawable:</p> + +<pre> +<TextView + android:id="@+id/myview" + ... + android:elevation="2dp" + android:background="@drawable/myrect" /> +</pre> + +<p>where the background drawable is defined as a rectangle with rounded corners:</p> + +<pre> +<!-- 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> +</pre> + +<p>Then this view and drawable cast the appropiate shadow.</p> + +<p>You can also create outlines in your code using the methods in the <code>Outline</code> class, +and you can assign them to views with the <code>View.setOutline</code> method.</p> + +<p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p> + + +<h2 id="clip">Clipping Views</h2> + +<p>Clip a view to its outline area using the +<code>View.setClipToOutline</code> method. Only rectangle, circle, and round rectangle outlines +support clipping, as determined by the <code>Outline.canClip</code> method.</p> + +<p>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 <code>View.setClipToOutline</code> method.</p> + +<p>Because clipping views is an expensive operation, don't animate the shape you use to +clip a view. To achieve this effect, use a <a +href="{@docRoot}preview/material/animations.html#reveal">Reveal Effect</a> animation.</p>
\ No newline at end of file |