docs: Material design doc fixes from editorial review.

Change-Id: I2a7a9d39e85cc9c9d5f19f7265aaa6dc8c5dba12

11 files changed, 310 insertions, 174 deletions

diff --git a/docs/html/preview/material/animations.jd b/docs/html/preview/material/animations.jd
index 8297c65..cee782a 100644
--- a/docs/html/preview/material/animations.jd
+++ b/docs/html/preview/material/animations.jd
@@ -2,9 +2,22 @@ page.title=Animations
 
 @jd:body
 
+<div id="qv-wrapper">
+<div id="qv">
+<h2>In this document</h2>
+<ol>
+  <li><a href="#touch">Touch Feedback</a></li>
+  <li><a href="#reveal">Reveal Effect</a></li>
+  <li><a href="#transitions">Activity Transitions</a></li>
+  <li><a href="#curvedmotion">Curved Motion</a></li>
+  <li><a href="#viewstate">View State Changes</a></li>
+  <li><a href="#drawabletint">Drawable Tinting</a></li>
+</ol>
+</div>
+</div>
 
 <p>Animations in material design give users feedback on their actions and provide visual
-continuity as users interact with your app. The Material theme provides some default animations
+continuity as users interact with your app. The material theme provides some default animations
 for buttons and activity transitions, and the Android L Developer Preview provides additional
 APIs that let you customize these animations and create new ones:</p>
 
@@ -17,7 +30,7 @@ APIs that let you customize these animations and create new ones:</p>
 </ul>
 
 
-<h2 style="margin-top:35px">Touch Feedback</h2>
+<h2 id="touch">Touch Feedback</h2>
 
 <p>In the Android L Developer Preview the default touch feedback animations for buttons use the new
 <code>RippleDrawable</code> class, which transitions between different states with a ripple
@@ -28,7 +41,7 @@ it as the background of your view. You can define a <code>RippleDrawable</code>
 using the <code>ripple</code> element.</p>
 
 
-<h2 style="margin-top:35px">Reveal Effect</h2>
+<h2 id="reveal">Reveal Effect</h2>
 
 <p>The <code>View.createRevealAnimator</code> method enables you to animate a clipping circle
 to reveal or hide a view.</p>
@@ -82,7 +95,7 @@ anim.start();
 </pre>
 
 
-<h2 style="margin-top:35px">Activity Transitions</h2>
+<h2 id="transitions">Activity Transitions</h2>
 
 <p>The Android L Developer Preview enables your app to customize the default animations for
 activity transitions. You can specify custom animations for enter and exit transitions and for
@@ -109,10 +122,10 @@ transitions of shared elements between activities.</p>
   <strong>Figure 1</strong> - A scene transition with one shared element.
 </p>
 
-<h3 style="margin-top:30px">Specify custom transitions</h3>
+<h3>Specify custom transitions</h3>
 
 <p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
-attribute when you define a style that inherits from the Material theme:</p>
+attribute when you define a style that inherits from the material theme:</p>
 
 <pre>
 &lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -174,14 +187,14 @@ object:</p>
   <li><code>Window.setSharedElementExitTransition</code></li>
 </ul>
 
-<h3 style="margin-top:30px">Start an activity using transitions</h3>
+<h3>Start an activity using transitions</h3>
 
 <p>If you enable transitions and set an exit transition for an activity, the transition is activated
 when you launch another activity with the <code>startActivity</code> method. If you have set an
 enter transition for the second activity, the transition is also activated when the activity
 starts.</p>
 
-<h3 style="margin-top:30px">Shared elements transitions</h3>
+<h3>Shared elements transitions</h3>
 
 <p>To make a screne transition animation between two activities that have a shared element:</p>
 
@@ -219,7 +232,7 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
 <p>For shared dynamic views that you generate in your code, use the <code>View.setViewName</code>
 method to specify a common element name in both activities.</p>
 
-<h3 style="margin-top:30px">Multiple shared elements</h3>
+<h3>Multiple shared elements</h3>
 
 <p>To make a scene transition animation between two activities that have more than one shared
 element, define the shared elements in both layouts with the <code>android:viewName</code>
@@ -237,7 +250,7 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
 </pre>
 
 
-<h2 style="margin-top:35px">Curved Motion</h2>
+<h2 id="curvedmotion">Curved Motion</h2>
 
 <p>Animations in material design rely on curves for time interpolation and spatial movement
 patterns. The Android L Developer Preview provides new APIs that enable you to define custom
@@ -280,7 +293,7 @@ mAnimator.start();
 </pre>
 
 
-<h2 style="margin-top:35px">View State Changes</h2>
+<h2 id="viewstate">View State Changes</h2>
 
 <p>The new <code>StateListAnimator</code> class lets you define animators that run when the state
 of a view changes. The following example shows how to define an <code>StateListAnimator</code> as
@@ -343,7 +356,7 @@ to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p>
 </pre>
 
 
-<h2 style="margin-top:35px">Drawable Tinting</h2>
+<h2 id="drawabletint">Drawable Tinting</h2>
 
 <p>The Android L Developer Preview enables you to define bitmaps as an alpha mask and to tint
 them using a color resource or a theme attribute that resolves to a color resource. You can
diff --git a/docs/html/preview/material/compatibility.jd b/docs/html/preview/material/compatibility.jd
index b5555ad..ce04e9e 100644
--- a/docs/html/preview/material/compatibility.jd
+++ b/docs/html/preview/material/compatibility.jd
@@ -2,22 +2,34 @@ page.title=Compatibility
 
 @jd:body
 
-<p>The new material design features (like the Material theme and custom animations) are only
+<div id="qv-wrapper">
+<div id="qv">
+<h2>In this document</h2>
+<ol>
+  <li><a href="#materialtheme">Material Theme</a></li>
+  <li><a href="#layouts">Layouts</a></li>
+  <li><a href="#widgets">UI Widgets</a></li>
+  <li><a href="#animation">Animation APIs</a></li>
+</ol>
+</div>
+</div>
+
+<p>The new material design features (like the material theme and custom animations) are only
 available in the Android L Developer Preview. However, you can design your apps to make use of
 these features when running on devices with the Android L Developer Preview and still be
 compatible with previous releases of Android.</p>
 
 
-<h2 style="margin-top:35px">Material Theme</h2>
+<h2 id="materialtheme">Material Theme</h2>
 
-<p>The Material theme is only available in the Android L Developer Preview. To configure your
-app to use the Material theme on devices running the Android L Developer Preview and an older
+<p>The material theme is only available in the Android L Developer Preview. To configure your
+app to use the material theme on devices running the Android L Developer Preview and an older
 theme on devices running earlier versions of Android:</p>
 
 <ol>
 <li>Define a theme that inherits from an older theme (like Holo) in
 <code>res/values/styles.xml</code>.</li>
-<li>Define a theme with the same name that inherits from the Material theme in
+<li>Define a theme with the same name that inherits from the material theme in
 <code>res/values-v21/styles.xml</code>.</li>
 <li>Set this theme as your app's theme in the manifest file.</li>
 </ol>
@@ -26,7 +38,7 @@ theme on devices running earlier versions of Android:</p>
 your app will not run on earlier versions of Android.</p>
 
 
-<h2 style="margin-top:35px">Layouts</h2>
+<h2 id="layouts">Layouts</h2>
 
 <p>If the layouts that you design according to the material design guidelines do not use any
 of the new XML attributes from the Android L Developer Preview, they will work on previous
@@ -38,13 +50,13 @@ and your alternative layout files for earlier versions of Android inside <code>r
 Alternative layouts have the same file name.</p>
 
 
-<h2 style="margin-top:35px">UI Widgets</h2>
+<h2 id="widgets">UI Widgets</h2>
 
 <p>The <code>RecyclerView</code> and <code>CardView</code> widgets are included in the Android L
 Developer Preview Support Library, so they are available in earlier versions of Android.</p>
 
 
-<h2 style="margin-top:35px">Animation APIs</h2>
+<h2 id="animation">Animation APIs</h2>
 
 <p>The new APIs for custom animations are only available in the Android L Developer Preview. To
 preserve compatibility with earlier verisons of Android, check the system version at runtime before
diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd
index c527550..9c0e55d 100644
--- a/docs/html/preview/material/get-started.jd
+++ b/docs/html/preview/material/get-started.jd
@@ -2,135 +2,145 @@ page.title=Get Started
 
 @jd:body
 
-<p>To create material design apps on Android:</p>
+<div id="qv-wrapper">
+<div id="qv">
+<h2>In this document</h2>
+<ol>
+  <li><a href="#applytheme">Apply the Material Theme</a></li>
+  <li><a href="#layouts">Design Your Layouts</a></li>
+  <li><a href="#depth">Specify Depth in Your Views</a></li>
+  <li><a href="#widgets">Use the New UI Widgets</a></li>
+  <li><a href="#apis">Use the New APIs</a></li>
+</ol>
+</div>
+</div>
+
+<p>To create apps with material design:</p>
 
 <ol>
-  <li>Take a look at the <a href="">material design specification</a>.</li>
-  <li>Apply the Material <strong>theme</strong> to your app.</li>
-  <li>Define additional <strong>styles</strong> to customize the Material theme.</li>
-  <li>Create your <strong>layouts</strong> following material design guidelines.</li>
-  <li>Specify the <strong>depth</strong> of each component in your layouts to cast appropriate shadows.</li>
-  <li>Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
-  <li>Use the new <strong>APIs</strong> to customize 3D views and animations in your app.</li>
+  <li style="margin-bottom:10px">
+    Take a look at the <a href="">material design specification</a>.</li>
+  <li style="margin-bottom:10px">
+    Apply the material <strong>theme</strong> to your app.</li>
+  <li style="margin-bottom:10px">
+    Define additional <strong>styles</strong> to customize the material theme.</li>
+  <li style="margin-bottom:10px">
+    Create your <strong>layouts</strong> following material design guidelines.</li>
+  <li style="margin-bottom:10px">
+    Specify the <strong>depth</strong> for views to cast appropriate shadows.</li>
+  <li style="margin-bottom:10px">
+    Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
+  <li style="margin-bottom:10px">
+    Use the new <strong>APIs</strong> to customize the animations in your app.</li>
 </ol>
 
-<h3 style="margin-top:25px;">Update Your App for the Android L Developer Preview</h3>
+<h3>Update Your App for the Android L Developer Preview</h3>
 
 <p>To update an existing app for the Android L Developer Preview, design new layouts following
 material design guidelines and consider how you can improve the user experience for your app by
 incorporating depth, touch feedback and animations in your UI.</p>
 
-<h3 style="margin-top:25px;">Create New Apps for the Android L Developer Preview</h3>
+<h3>Create New Apps for the Android L Developer Preview</h3>
 
 <p>If you are creating a new app for the Android L Developer Preview, the material design
 guidelines provide you with a solid design framework for your app. Follow these guidelines and
 use the new functionality in the Android framework to design and develop your app.</p>
 
 
-<h2 style="margin-top:35px">Material Theme</h2>
+<h2 id="applytheme">Apply the Material Theme</h2>
 
-<div style="float:right;margin-left:25px">
-<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/>
-<p class="img-caption"><strong>Figure 1.</strong> Customizing the Material theme.</p>
-</div>
+<p>To apply the material theme in your app, specify a style that inherits from
+<code>android:theme.Material</code>:</p>
 
-<p>The new Material theme provides:</p>
+<pre>
+&lt;!-- res/values/styles.xml -->
+&lt;resources>
+  &lt!-- your app's theme inherits from the Material theme -->
+  &lt;style name="AppTheme" parent="android:Theme.Material">
+    &lt!-- theme customizations -->
+  &lt;/style>
+&lt;/resources>
+</pre>
 
-<ul>
-  <li>System widgets that let you set their color palette</li>
-  <li>Touch feedback animations for the system widgets</li>
-  <li>Activity transition animations</li>
-</ul>
+<p>The material theme provides new system widgets that let you set their color palette and default
+animations for touch feedback and activity transitions. For more details, see
+<a href="{@docRoot}preview/material/theme.html">Material Theme</a>.</p>
 
-<p>The Android L Developer Preview lets you easily customize the look of the Material theme
-according to your brand identity with a color palette you control. You can tint the app bar and
-the status bar using theme attributes, as shown in Figure 1.</p>
 
-<p>The system widgets have a new design and touch feedback animations. Activity transitions help
-users navigate your app by providing visual continuity. You can customize the color palette,
-the touch feedback animations, and the activity transitions for your app.</p>
+<h2 id="layouts">Design Your Layouts</h2>
 
-<p>The Material theme is defined as:</p>
+<p>In addition to applying and customizing the material theme, your layouts should conform to
+the material design guidelines. When you design your layouts, pay special attention to the
+following:</p>
 
 <ul>
-  <li><code>@android:style/Theme.Material</code> (dark version)</li>
-  <li><code>@android:style/Theme.Material.Light</code> (light version)</li>
-  <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+<li>Baseline grids</li>
+<li>Keylines</li>
+<li>Spacing</li>
+<li>Touch target size</li>
+<li>Layout structure</li>
 </ul>
 
-<p>For a list of material styles that you can use, see the API reference for
-<code>android.R.styles</code>.</p>
+<p>You still define layouts inside XML files using the standard tools from the Android framework.
+For details on the material design guidelines, see the <a href="">material design
+specification</a>.</p>
 
-<p class="note">
-<strong>Note:</strong> The Material theme is only available in the Android L Developer Preview.
-For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.
-</p>
 
-<h3 style="margin-top:25px;">Theme Inheritance</h3>
+<h2 id="depth">Specify Depth in Your Views</h2>
 
-<p>In the Android L Developer Preview, elements in XML layout definitions can specify the
-<code>android:theme</code> attribute, which references a theme resource. This attribute modifies
-the theme for the element and any elements inflated below it, which is useful to alter theme
-color palettes in a specific portion of an interface.</p>
+<p>In the Android L Developer Preview, views can cast shadows. The elevation value of a view
+determines the size of its shadow. To set the elevation of a view, use the
+<code>android:elevation</code> attribute in your layouts:</p>
 
-<h3 style="margin-top:25px;">Customize the Status Bar</h3>
+<pre>
+&lt;Button
+    android:id="@+id/my_button"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/next"
+    <strong>android:elevation</strong>="10dp" />
+</pre>
 
-<p>The Material theme lets you easily customize the status bar, so you can specify a
-color which fits your brand and provides enough contrast to show the white status icons. To
-set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
-you extend the Material theme.</p>
+<p>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and
+Shadows</a>.</p>
 
-<p>To handle the color of the status bar yourself (for example, by adding a gradient in the
-background), set the <code>android:statusBarColor</code> attribute to
-<code>&#64;android:color/transparent</code>. You can also use the
-<code>Window.setStatusBarColor</code> method for animations or fading.</p>
 
+<h2 id="widgets">Use the New UI Widgets</h2>
 
-<h2 style="margin-top:35px">Material Design</h2>
+<p>The Android L Developer Preview includes two new UI widgets for complex views,
+<code>RecyclerView</code> and <code>CardView</code>. <code>RecyclerView</code> is a more advanced
+version of <code>ListView</code> that provides performance improvements and is easier to use.
+<code>CardView</code> lets you show pieces of information inside cards with a consistent look
+across apps. To include a <code>CardView</code> in your layout:</p>
 
-<p>In addition to applying the Material theme, you also have to:</p>
+<pre>
+&lt;android.support.v7.widget.CardView
+    android:id="@+id/card_view"
+    android:layout_width="200dp"
+    android:layout_height="200dp"
+    card_view:cardCornerRadius="3dp">
+    ...
+&lt;/android.support.v7.widget.CardView>
+</pre>
 
-<ul>
-  <li>Customize the theme's base colors to fit your brand.</li>
-  <li>Design your layouts according to material design guidelines.</li>
-</ul>
+<p>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>
 
-<p>The Android L Developer Preview provides new attributes to make it easy to customize the
-Material theme:</p>
 
-<pre>
-&lt;resources>
-  &lt;!-- inherit from the Material theme -->
-  &lt;style name="BaseAppTheme" parent="android:Theme.Material">
-    &lt;!-- Main theme colors -->
-    &lt;!--   your app's branding color (for the app bar) -->
-    &lt;item name="android:colorPrimary">@color/primary&lt;/item>
-    &lt;!--   darker variant of colorPrimary (for contextual app bars) -->
-    &lt;item name="android:colorPrimaryDark">@color/primary_dark&lt;/item>
-
-    &lt;!-- other theme colors -->
-    &lt;item name="android:colorBackground">@color/background&lt;/item>
-    &lt;item name="android:colorAccent">@color/accent&lt;/item>
-    &lt;item name="android:colorButtonNormal">@color/button_normal&lt;/item>
-    &lt;item name="android:colorControlHighlight">@color/button_chigh&lt;/item>
-    &lt;item name="android:windowBackground">@color/wbackground&lt;/item>
-  &lt;/style>
-&lt;/resources>
-</pre>
+<h2 id="apis">Use the APIs to Customize Your Animations</h2>
 
-<p>Ensure that you follow material design guidelines when choosing colors for your app.</p>
+<p>The Android L Developer Preview includes new APIs to create custom animations in your app.
+For example, you can enable activity transitions and define an exit transition inside an
+activity:</p>
 
-<p>Design your layouts according to the material design specification. In particular, pay
-attention to:</p>
+<pre>
+// inside your activity
+getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 
-<ul>
-  <li>Baseline grids</li>
-  <li>Keylines</li>
-  <li>Spacing</li>
-  <li>Touch target size</li>
-  <li>Layout structure</li>
-</ul>
+// set an exit transition
+getWindow().setExitTransition(new Explode());
+</pre>
 
-<p>You still define layouts inside XML files using the standard tools from the Android framework.
-To specify the depth level of each view in your layout, use the <code>android:elevation</code>
-attribute.</p>
\ No newline at end of file
+<p>When you start another activity from this activity, the exit transition is activated.</p>
+
+<p>To learn about all the features in the new APIs, see <a
+href="{@docRoot}preview/material/animations.html">Animations</a>.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/index.jd b/docs/html/preview/material/index.jd
index 468e4bd..b7abcb4 100644
--- a/docs/html/preview/material/index.jd
+++ b/docs/html/preview/material/index.jd
@@ -19,9 +19,9 @@ design apps:</p>
 </ul>
 
 
-<h3 style="margin-top:30px">Material Theme</h3>
+<h3>Material Theme</h3>
 
-<p>The Material theme provides a new style for your app, system widgets that let you set
+<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 -->
@@ -42,7 +42,7 @@ their color palette, and default animations for touch feedback and activity tran
 </div>
 
 
-<h3 style="margin-top:30px">New Widgets</h3>
+<h3>New Widgets</h3>
 
 <p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>
 
@@ -50,8 +50,8 @@ their color palette, and default animations for touch feedback and activity tran
 <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 container for large sets of views that can be
-  recycled and scrolled very efficiently.</p>
+  <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;"/>
@@ -62,21 +62,13 @@ their color palette, and default animations for touch feedback and activity tran
 </div>
 
 
-<h3 style="margin-top:30px">3D Views and Shadows</h3>
+<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>
 
-
-<h3 style="margin-top:30px">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>
-
-<!-- two columns -->
-<div style="width:700px;margin-left:12px;margin-top:25px;margin-bottom:5px">
-<div style="float:left;width:340px;margin-left:0px;margin-right:0px;">
+<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"/>
@@ -84,52 +76,41 @@ touch feedback in UI controls, view state changes, and activity transitions.</p>
     <source src="/preview/material/videos/ContactsAnim.ogv"/>
   </video>
   </div>
-</div>
-<div style="float:left;width:340px;margin-right:0px;">
-  <div class="framed-nexus5-port-span-5">
-  <video class="play-on-hover" autoplay>
-    <source src="/preview/material/videos/Dial.mp4"/>
-    <source src="/preview/material/videos/Dial.webm"/>
-    <source src="/preview/material/videos/Dial.ogv"/>
-  </video>
+  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
+    <em>Click on the device screen to replay the movie</em>
   </div>
 </div>
-<br style="clear:left"/>
-</div>
 
-<div style="text-align:center;font-size:10pt;margin-right:35px">
-<em>Click on the device screen to replay the movie</em>
-</div>
+<h3>Animations</h3>
 
-<!-- three columns -->
-<div style="width:700px;margin-top:25px;margin-bottom:0px">
-<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
-  <p>Respond to touch events in your views with <strong>touch feedback</strong> animations.</p>
-</div>
-<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
-  <p>Hide and show views with <strong>reveal effect</strong> animations.</p>
-</div>
-<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
-  <p>Switch between activities with custom <strong>activity transition</strong> animations.</p>
-</div>
-<br style="clear:left"/>
-</div>
-<!-- three columns -->
-<div style="width:700px;margin-top:0px;margin-bottom:20px">
-<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
-  <p>Create custom animation patterns with <strong>curved motion</strong>.</p>
-</div>
-<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
-  <p>Animate changes in one or more view properties with <strong>view state change</strong> animations.</p>
-</div>
-<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
-  <p>Show animations in <strong>state list drawables</strong> between view state changes.</p>
-</div>
-<br style="clear:left"/>
-</div>
+<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 style="margin-top:30px">New Capabilities for Drawables</h3>
+<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
diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd
new file mode 100644
index 0000000..b954960
--- /dev/null
+++ b/docs/html/preview/material/theme.jd
@@ -0,0 +1,100 @@
+page.title=Material Theme
+
+@jd:body
+
+<div id="qv-wrapper">
+<div id="qv">
+<h2>In this document</h2>
+<ol>
+  <li><a href="#colorpalette">Customize the Colot Palette</a></li>
+  <li><a href="#statusbar">Customize the Status Bar</a></li>
+  <li><a href="#inheritance">Theme Inheritance</a></li>
+</ol>
+</div>
+</div>
+
+<p>The new material theme provides:</p>
+
+<ul>
+  <li>System widgets that let you set their color palette</li>
+  <li>Touch feedback animations for the system widgets</li>
+  <li>Activity transition animations</li>
+</ul>
+
+<p>The Android L Developer Preview lets you easily customize the look of the material theme
+according to your brand identity with a color palette you control. You can tint the app bar and
+the status bar using theme attributes, as shown in Figure 1.</p>
+
+<div style="float:right;margin-left:25px;margin-top:-25px">
+<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/>
+<p class="img-caption"><strong>Figure 1.</strong> Customizing the material theme.</p>
+</div>
+
+<p>The system widgets have a new design and touch feedback animations. Activity transitions help
+users navigate your app by providing visual continuity. You can customize the color palette,
+the touch feedback animations, and the activity transitions for your app.</p>
+
+<p>The material theme is defined as:</p>
+
+<ul>
+  <li><code>@android:style/Theme.Material</code> (dark version)</li>
+  <li><code>@android:style/Theme.Material.Light</code> (light version)</li>
+  <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>For a list of material styles that you can use, see the API reference for
+<code>android.R.styles</code>.</p>
+
+<p class="note">
+<strong>Note:</strong> The material theme is only available in the Android L Developer Preview.
+For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.
+</p>
+
+
+<h2 id="colorpalette">Customize the Color Palette</h2>
+
+<p>To customize the theme's base colors to fit your brand, define your custom colors using
+theme attributes when you inherit from the material theme:</p>
+
+<pre>
+&lt;resources>
+  &lt;!-- inherit from the material theme -->
+  &lt;style name="AppTheme" parent="android:Theme.Material">
+    &lt;!-- Main theme colors -->
+    &lt;!--   your app's branding color (for the app bar) -->
+    &lt;item name="android:colorPrimary">@color/primary&lt;/item>
+    &lt;!--   darker variant of colorPrimary (for contextual app bars) -->
+    &lt;item name="android:colorPrimaryDark">@color/primary_dark&lt;/item>
+
+    &lt;!-- other theme colors -->
+    &lt;item name="android:colorButtonNormal">@color/button_normal&lt;/item>
+    &lt;item name="android:windowBackground">@color/wbackground&lt;/item>
+  &lt;/style>
+&lt;/resources>
+</pre>
+
+
+<h2 id="statusbar">Customize the Status Bar</h2>
+
+<p>The material theme lets you easily customize the status bar, so you can specify a
+color which fits your brand and provides enough contrast to show the white status icons. To
+set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
+you extend the material theme.</p>
+
+<p>To handle the color of the status bar yourself (for example, by adding a gradient in the
+background), set the <code>android:statusBarColor</code> attribute to
+<code>&#64;android:color/transparent</code>. You can also use the
+<code>Window.setStatusBarColor</code> method for animations or fading.</p>
+
+<p class="note"><strong>Note:</strong>
+The status bar should almost always have a clear delineation from the primary toolbar, except for
+full-bleed imagery cases and when you use a gradient as a protection.
+</p>
+
+
+<h2 id="inheritance">Theme Inheritance</h3>
+
+<p>In the Android L Developer Preview, elements in XML layout definitions can specify the
+<code>android:theme</code> attribute, which references a theme resource. This attribute modifies
+the theme for the element and any elements inflated below it, which is useful to alter theme
+color palettes in a specific portion of an interface.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/ui-widgets.jd b/docs/html/preview/material/ui-widgets.jd
index 5c12a1a..f18bff9 100644
--- a/docs/html/preview/material/ui-widgets.jd
+++ b/docs/html/preview/material/ui-widgets.jd
@@ -2,13 +2,22 @@ page.title=UI Widgets
 
 @jd:body
 
+<div id="qv-wrapper">
+<div id="qv">
+<h2>In this document</h2>
+<ol>
+  <li><a href="#recyclerview">RecyclerView</a></li>
+  <li><a href="#cardview">CardView</a></li>
+</ol>
+</div>
+</div>
 
 <p>The support library in the Android L Developer Preview contains two new widgets,
 <code>RecyclerView</code> and <code>CardView</code>. Use these widgets to show complex lists
 and cards in your app. These widgets have material design styles and animations by default.</p>
 
 
-<h2  style="margin-top:35px">RecyclerView</h2>
+<h2 id="recyclerview">RecyclerView</h2>
 
 <p><code>RecyclerView</code> is a more advanced version of <code>ListView</code>. This widget is
 a container for large sets of views that can be recycled and scrolled very efficiently. Use the
@@ -62,7 +71,7 @@ performance by avoiding the creation of unnecessary views or performing expensiv
 
 <p>To create a custom layout, you extend the <code>RecyclerView.LayoutManager</code> class.</p>
 
-<h3 style="margin-top:30px">Examples</h3>
+<h3>Examples</h3>
 
 <p>To include a <code>RecyclerView</code> in your layout:</p>
 
@@ -155,7 +164,7 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
 </pre>
 
 
-<h2 style="margin-top:35px">CardView</h2>
+<h2 id="cardview">CardView</h2>
 
 <p><code>CardView</code> extends the <code>FrameLayout</code> class and lets you show information
 inside a card with optional rounded corners:</p>
diff --git a/docs/html/preview/material/videos/Dial.mp4 b/docs/html/preview/material/videos/Dial.mp4
deleted file mode 100644
index cd5a6a2..0000000
--- a/docs/html/preview/material/videos/Dial.mp4
+++ /dev/null
diff --git a/docs/html/preview/material/videos/Dial.ogv b/docs/html/preview/material/videos/Dial.ogv
deleted file mode 100644
index b7b29d0..0000000
--- a/docs/html/preview/material/videos/Dial.ogv
+++ /dev/null
diff --git a/docs/html/preview/material/videos/Dial.webm b/docs/html/preview/material/videos/Dial.webm
deleted file mode 100644
index e30d2a5..0000000
--- a/docs/html/preview/material/videos/Dial.webm
+++ /dev/null
diff --git a/docs/html/preview/material/views-shadows.jd b/docs/html/preview/material/views-shadows.jd
index 52fe83c..c5884d6 100644
--- a/docs/html/preview/material/views-shadows.jd
+++ b/docs/html/preview/material/views-shadows.jd
@@ -2,14 +2,24 @@ page.title=Views and Shadows
 
 @jd:body
 
-
-<p>In material design apps, depth has meaning. You should assign higher elevation values to more
+<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 style="margin-top:35px">View Elevation</h2>
+<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>
@@ -29,7 +39,7 @@ static component, and the translation is used for animations:</p>
 <code>px</code>).</p>
 
 
-<h2 style="margin-top:35px">Shadows and Outlines</h2>
+<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>
@@ -55,7 +65,7 @@ myView.setOutline(outline);
 <p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p>
 
 
-<h2 style="margin-top:35px">Clipping Views</h2>
+<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
diff --git a/docs/html/preview/preview_toc.cs b/docs/html/preview/preview_toc.cs
index 8f6f8c1..ab14cf8 100644
--- a/docs/html/preview/preview_toc.cs
+++ b/docs/html/preview/preview_toc.cs
@@ -19,6 +19,7 @@
       </a></div>
     <ul>
       <li><a href="<?cs var:toroot ?>preview/material/get-started.html">Get Started</a></li>
+      <li><a href="<?cs var:toroot ?>preview/material/theme.html">Material Theme</a></li>
       <li><a href="<?cs var:toroot ?>preview/material/ui-widgets.html">UI Widgets</a></li>
       <li><a href="<?cs var:toroot ?>preview/material/views-shadows.html">Views and Shadows</a></li>
       <li><a href="<?cs var:toroot ?>preview/material/animations.html">Animations</a></li>