docs/html/preview/material/index.jd

page.title=Material Design
page.type=design
page.image=images/material.png
page.metaDescription=Learn how to apply material design to your apps.

@jd:body

<p itemprop="description">The Android L Developer Preview includes support for material design
apps. Material design is a comprehensive guide for visual, motion, and interaction design across
platforms and devices. To use material design in your Android apps, follow the guidelines defined
in the <a href="http://www.google.com/design/spec">material design specification</a> and use the
new components and functionality available in the Android L Developer Preview.</p>

<p>The Android L Developer Preview provides the following elements for you to build material
design apps:</p>

<ul>
  <li>A new theme</li>
  <li>New widgets for complex views</li>
  <li>New APIs for custom shadows and animations</li>
</ul>


<h3>Material Theme</h3>

<p>The material theme provides a new style for your app, system widgets that let you set
their color palette, and default animations for touch feedback and activity transitions.</p>

<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
  <img src="{@docRoot}preview/material/images/MaterialDark.png" width="500" height="238"/>
  <div style="width:140px;margin:0 auto">
  <p style="margin-top:8px">Dark Material theme</p>
  </div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
  <img src="{@docRoot}preview/material/images/MaterialLight.png" width="500" height="238"/>
  <div style="width:140px;margin:0 auto">
  <p style="margin-top:8px">Light Material theme</p>
  </div>
</div>
<br style="clear:left"/>
</div>


<h3>New Widgets</h3>

<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>

<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
  <img src="{@docRoot}preview/material/images/list_mail.png" width="500" height="426"/>
  <p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code>
  that provides performance improvements for dynamic views and is easier to use.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
  <img src="{@docRoot}preview/material/images/card_travel.png" width="500" height="426"/>
  <p>The new <code>CardView</code> widget lets you display important pieces of information inside
  cards that have a consistent look and feel.</p>
</div>
<br style="clear:left"/>
</div>


<h3>View Shadows</h3>

<p>In addition to the X and Y properties, views in the Android L Developer Preview have a Z
property. This new property represents the elevation of a view, which determines:</p>

<ul>
<li>The size of the shadow - Views with higher Z values cast bigger shadows.</li>
<li>The drawing order - Views with higher Z values appear on top of other views.</li>
</ul>

<div style="width:290px;margin-left:35px;float:right">
  <div class="framed-nexus5-port-span-5">
  <video class="play-on-hover" autoplay>
    <source src="/preview/material/videos/ContactsAnim.mp4"/>
    <source src="/preview/material/videos/ContactsAnim.webm"/>
    <source src="/preview/material/videos/ContactsAnim.ogv"/>
  </video>
  </div>
  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
    <em>Click on the device screen to replay the movie</em>
  </div>
</div>

<h3>Animations</h3>

<p>The Android L Developer Preview provides new APIs that let you create custom animations for
touch feedback in UI controls, view state changes, and activity transitions.</p>

<p>The new animation APIs let you:</p>

<ul>
<li style="margin-bottom:15px">
Respond to touch events in your views with <strong>touch feedback</strong> animations.
</li>
<li style="margin-bottom:15px">
Hide and show views with <strong>reveal effect</strong> animations.
</li>
<li style="margin-bottom:15px">
Switch between activities with custom <strong>activity transition</strong> animations.
</li>
<li style="margin-bottom:15px">
Create more natural animations with <strong>curved motion</strong>.
</li>
<li style="margin-bottom:15px">
Animate changes in one or more view properties with <strong>view state change</strong> animations.
</li>
<li style="margin-bottom:15px">
Show animations in <strong>state list drawables</strong> between view state changes.
</li>
</ul>

<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs
let you customize these animations and add animations to your custom views.</p>


<h3>New Capabilities for Drawables</h3>

<p>The Android L Developer Preview supports <strong>drawable tinting</strong>: you can define
bitmaps as an alpha mask and tint them using a color resource. You create these assets only
once and color each instance to match your theme. Drawables also now support specifying most XML
properties as <strong>theme attributes</strong>.</p>

<p>The Android L Developer Preview Support Library includes a <strong>color extraction</strong>
library that lets you automatically extract prominent colors from a bitmap image.</p>