Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

am 15da5f95: am 1e01a9f7: am abf58f98: am 43f46ab9: am e627b94c: Merge "docs: Material design shadow fixes." into lmp-docs

Browse Source 
* commit '15da5f959d59dd91c12e52dbf648ea6df2695eb1':
  docs: Material design shadow fixes.
This commit is contained in:
Ricardo Cervera
2014-11-10 17:03:07 +00:00
committed by Android Git Automerger
parent 9e19c118a1 15da5f959d
commit c4d9097b4a
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/html/training/material/images/shadows-depth.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 13 KiB

32
docs/html/training/material/shadows-clipping.jd
View File

@@ -18,28 +18,36 @@ page.title=Defining Shadows and Clipping Views
</div>
</div>
<p>Material design introduces depth for UI elements. Depth helps users understand the relative
importance of each element and focus their attention to the task at hand.</p>
<p>Material design introduces elevation for UI elements. Elevation helps users understand the
relative importance of each element and focus their attention to the task at hand.</p>
<p>The elevation of a view, represented by the Z property, determines the size of its shadow:
views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane; they
don't cast shadows on other views placed below them and above the Z=0 plane.</p>
<p>The elevation of a view, represented by the Z property, determines the visual appearance of its
shadow: views with higher Z values cast larger, softer shadows. Views with higher Z values occlude
views with lower Z values; however, the Z value of a view does not affect the view's size.</p>
<p>Views with higher Z values occlude views with lower Z values. However, the Z value of a view
does not affect the view's size.</p>
<p>Shadows are drawn by the parent of the elevated view, and thus subject to standard view clipping,
clipped by the parent by default.</p>
<p>Elevation is also useful to create animations where widgets temporarily rise above the
view plane when performing some action.</p>
<p>For more information about elevation in material design, see
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objects
in 3D space</a>.</p>
<h2 id="Elevation">Assign Elevation to Your Views</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>The Z value for a view has two components:
<ul>
<li>Elevation: The static component.</li>
<li>Translation: The dynamic component used for animations.</li>
</ul>
<p><code>Z = elevation + translationZ</code></p>
<img src="{@docRoot}training/material/images/shadows-depth.png" width="680" height="177" alt=""/>
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt=""/>
<p class="img-caption"><strong>Figure 1</strong> - Shadows for different view elevations.</p>
<p>To set the elevation of a view in a layout definition, use the <code>android:elevation</code>
@@ -59,9 +67,9 @@ guide.</p>
<p>You can also use a {@link android.animation.StateListAnimator} to
specify these animations in a declarative way. This is especially useful for cases where state
changes trigger animations, like when a user presses a button. For more information, see
<a href="{@docRoot}training/material/animations.html#ViewState">Animate View State Changes</a></p>.
<a href="{@docRoot}training/material/animations.html#ViewState">Animate View State Changes</a>.</p>
<p>The Z values are measured in the same units as the X and Y values.</p>
<p>The Z values are measured in dp (density-independent pixels).</p>
<h2 id="Shadows">Customize View Shadows and Outlines</h2>