1 files changed, 128 insertions, 0 deletions
diff --git a/docs/html/preview/material/index.jd b/docs/html/preview/material/index.jd
new file mode 100644
index 0000000..d9a276f
--- /dev/null
+++ b/docs/html/preview/material/index.jd
@@ -0,0 +1,128 @@
+page.title=Material Design
+page.type=design
+
+@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>
+\ No newline at end of file