summaryrefslogtreecommitdiffstats
path: root/docs/html/preview/material/views-shadows.jd
diff options
context:
space:
mode:
Diffstat (limited to 'docs/html/preview/material/views-shadows.jd')
-rw-r--r--docs/html/preview/material/views-shadows.jd86
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