1 files changed, 117 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..b7abcb4
--- /dev/null
+++ b/docs/html/preview/material/index.jd
@@ -0,0 +1,117 @@
+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="">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" style="width:250px;"/>
+  <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" style="width:250px;"/>
+  <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" style="width:250px;"/>
+  <p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code>
+  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" style="width:250px;"/>
+  <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 components, views in the Android L Developer Preview have a Z
+component. This new component represents the elevation of a view, which determines the size of
+its shadow: views with higher Z values cast bigger shadows.</p>
+
+<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 in the Android L Developer Preview 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 custom animation patterns 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>
+
+
+<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 can create these assets only
+once and color each instance to match your theme.</p>