1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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 appropriate 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>
|
