diff options
Diffstat (limited to 'docs/html/preview/material/views-shadows.jd')
-rw-r--r-- | docs/html/preview/material/views-shadows.jd | 86 |
1 files changed, 86 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..c5884d6 --- /dev/null +++ b/docs/html/preview/material/views-shadows.jd @@ -0,0 +1,86 @@ +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>In apps with material design, depth has meaning. You should assign higher elevation values to more +important UI elements in your app. The elevation value 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> + + +<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 Z values are measured in the same units as the X and Y values (like <code>dp</code> or +<code>px</code>).</p> + + +<h2 id="shadows">Shadows and Outlines</h2> + +<p>The bounds of a view's background drawable determine the default shape of its shadow. To define +a custom shape for a shadow, such as an oval, use the <code>View.setOutline</code> method:</p> + +<pre> +View v = findViewById(R.id.my_view); + +// add 10px to the static elevation +v.setTranslationZ(10); + +// set an oval shadow +Outline outline = new Outline(); +outline.setOval(v.getLeft(), v.getTop(), v.getRight(), v.getBottom()); +myView.setOutline(outline); +</pre> + +<p>An <code>Outline</code> represents the outer shape of a graphics object. You can create +<code>Outline</code> objects as in this example, or you can obtain the outline from a +<code>Drawable</code> object with the <code>getOutline</code> method.</p> + +<p>The outline of a view also defines the ripple area for touch feedback.</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>The Android L Developer Preview lets you 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 determine if a view has been clipped, use the <code>View.getClipToOutline</code> method.</p> + +<pre> +// clip a view to an oval +View v = findViewById(R.id.my_view); +outline.setOval(v.getLeft(), v.getTop(), v.getRight(), v.getBottom()); +myView.setOutline(outline); + +// if the view is not already clipped +if (v.getClipToOutline() == false) { + v.setClipToOutline(true); +} +</pre>
\ No newline at end of file |